-
Notifications
You must be signed in to change notification settings - Fork 133
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat: add toggle for code preview mode (#731)
* feat: add dev mode toggle * fix: update switch color
- Loading branch information
1 parent
1e04601
commit 5607645
Showing
6 changed files
with
188 additions
and
59 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,21 @@ | ||
| import { SVGProps } from "react"; | ||
|
|
||
| export const Code = ({ | ||
| stroke = "currentColor", | ||
| ...props | ||
| }: JSX.IntrinsicAttributes & SVGProps<SVGSVGElement>) => ( | ||
| <svg | ||
| width="16" | ||
| height="16" | ||
| viewBox="0 0 14 10" | ||
| fill="none" | ||
| xmlns="http://www.w3.org/2000/svg" | ||
| > | ||
| <path | ||
| d="M6.19961 8.8002L7.79961 1.2002M2.99961 7.6002L0.599609 5.2002L2.99961 2.8002M10.9996 2.8002L13.3996 5.2002L10.9996 7.6002" | ||
| stroke="#020617" | ||
| stroke-linecap="round" | ||
| stroke-linejoin="round" | ||
| /> | ||
| </svg> | ||
| ); |
60 changes: 60 additions & 0 deletions
60
examples/ui-demo/src/components/preview/AuthCardWrapper.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,60 @@ | ||
| import { cn } from "@/lib/utils"; | ||
| import { useConfig } from "@/src/app/state"; | ||
| import { AuthCard, AuthType } from "@account-kit/react"; | ||
| import { useMemo } from "react"; | ||
|
|
||
| export function AuthCardWrapper({ className }: { className?: string }) { | ||
| const { config } = useConfig(); | ||
|
|
||
| const sections = useMemo<AuthType[][]>(() => { | ||
| const output = []; | ||
| if (config.auth.showEmail) { | ||
| output.push([{ type: "email" as const }]); | ||
| } | ||
|
|
||
| output.push([{ type: "passkey" as const }]); | ||
|
|
||
| return output; | ||
| }, [config.auth]); | ||
|
|
||
| return ( | ||
| <div | ||
| className={cn( | ||
| "flex flex-1 flex-col justify-center items-center overflow-auto", | ||
| className | ||
| )} | ||
| style={{ | ||
| backgroundImage: "url(/images/grid.png)", | ||
| backgroundSize: "100px", | ||
| backgroundRepeat: "repeat", | ||
| }} | ||
| > | ||
| <div className="flex flex-col gap-2 w-[368px]"> | ||
| <div className="modal bg-white shadow-md"> | ||
| <AuthCard | ||
| header={<AuthCardHeader />} | ||
| showSignInText | ||
| showNavigation | ||
| sections={sections} | ||
| /> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| ); | ||
| } | ||
|
|
||
| function AuthCardHeader() { | ||
| const { | ||
| config: { | ||
| ui: { logoDark, logoLight, theme }, | ||
| }, | ||
| } = useConfig(); | ||
|
|
||
| const logo = theme === "dark" ? logoDark : logoLight; | ||
|
|
||
| if (!logo) return null; | ||
|
|
||
| return ( | ||
| <img style={{ height: "60px" }} src={logo.fileSrc} alt={logo.fileName} /> | ||
| ); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,58 @@ | ||
| import { cn } from "@/lib/utils"; | ||
| import ExternalLink from "../shared/ExternalLink"; | ||
|
|
||
| import { Roboto_Mono } from "next/font/google"; | ||
| const robotoMono = Roboto_Mono({ | ||
| subsets: ["latin"], | ||
| display: "swap", | ||
| }); | ||
|
|
||
| export function CodePreview() { | ||
| return ( | ||
| <div className="flex flex-col gap-6 p-6 overflow-y-auto"> | ||
| <div className="flex flex-col gap-2"> | ||
| <div className="font-semibold text-fg-primary text-xl"> | ||
| Export configuration | ||
| </div> | ||
| <div className="text-sm text-gray-600"> | ||
| To get started, simply paste the below code into your environment. | ||
| You’ll need to add your Alchemy API key and Gas Policy ID too. Login | ||
| to automatically inject the keys into the code below.{" "} | ||
| <ExternalLink href="#" className="text-blue-600 font-semibold"> | ||
| Fully customize CSS here. | ||
| </ExternalLink> | ||
| </div> | ||
| </div> | ||
| <div className="flex flex-col gap-4"> | ||
| <div className="font-semibold text-fg-secondary">Style</div> | ||
| <CodeBlock title="tailwind.config.ts" code={styleCode} /> | ||
| </div> | ||
| <div className="flex flex-col gap-4"> | ||
| <div className="font-semibold text-fg-secondary">Config</div> | ||
| <CodeBlock title="src/app/page.tsx" code={styleCode} /> | ||
| </div> | ||
| </div> | ||
| ); | ||
| } | ||
|
|
||
| function CodeBlock({ title, code }: { title: string; code: string }) { | ||
| return ( | ||
| <div className="rounded-lg flex flex-col text-sm overflow-hidden"> | ||
| <div className="px-4 py-3 bg-gray-700 text-white font-medium"> | ||
| {title} | ||
| </div> | ||
| <pre | ||
| className={cn("px-4 py-6 bg-gray-800 text-white", robotoMono.className)} | ||
| > | ||
| {code} | ||
| </pre> | ||
| </div> | ||
| ); | ||
| } | ||
|
|
||
| const styleCode = `import { withAccountKitUi } from "@alchemy/aa-alchemy/tailwind"; | ||
| import type { Config } from "tailwindcss"; | ||
| const config: Config = <your tailwind config>; | ||
| export default withAccountKitUi(config); | ||
| `; |
32 changes: 32 additions & 0 deletions
32
examples/ui-demo/src/components/shared/CodePreviewSwitch.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,32 @@ | ||
| "use client" | ||
|
|
||
| import * as React from "react" | ||
| import * as SwitchPrimitives from "@radix-ui/react-switch" | ||
|
|
||
| import { cn } from "@/lib/utils" | ||
| import { Code } from "../icons/code" | ||
|
|
||
| const CodePreviewSwitch = React.forwardRef< | ||
| React.ElementRef<typeof SwitchPrimitives.Root>, | ||
| React.ComponentPropsWithoutRef<typeof SwitchPrimitives.Root> | ||
| >(({ className, ...props }, ref) => ( | ||
| <SwitchPrimitives.Root | ||
| className={cn( | ||
| "peer inline-flex h-[28px] w-[50px] shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-btn-primary data-[state=unchecked]:bg-input", | ||
| className | ||
| )} | ||
| {...props} | ||
| ref={ref} | ||
| > | ||
| <SwitchPrimitives.Thumb | ||
| className={cn( | ||
| "flex items-center justify-center pointer-events-none h-[24px] w-[24px] rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-[22px] data-[state=unchecked]:translate-x-0" | ||
| )} | ||
| > | ||
| <Code /> | ||
| </SwitchPrimitives.Thumb> | ||
| </SwitchPrimitives.Root> | ||
| )) | ||
| CodePreviewSwitch.displayName = SwitchPrimitives.Root.displayName | ||
|
|
||
| export { CodePreviewSwitch } |