diff --git a/examples/ui-demo/src/app/page.tsx b/examples/ui-demo/src/app/page.tsx index cb684fafc6..6e1eb4eeba 100644 --- a/examples/ui-demo/src/app/page.tsx +++ b/examples/ui-demo/src/app/page.tsx @@ -1,5 +1,7 @@ "use client"; +import { Public_Sans } from "next/font/google"; + import { AuthCard, AuthType, @@ -13,6 +15,13 @@ import { ChevronRight } from "@/src/components/icons/chevron"; import { MailIcon } from "@/src/components/icons/mail"; import { Input, useLogout } from "@account-kit/react"; import { useMemo } from "react"; +import { TopNav } from "../components/topnav/TopNav"; +import { Button } from "../components/shared/button"; + +const publicSans = Public_Sans({ + subsets: ["latin"], + display: "swap", +}); export default function Home() { const sections = useMemo( @@ -26,75 +35,21 @@ export default function Home() { return ( <> -
-
-
-

Buttons

-
- Primary - Secondary - Google +
+ +
+
+

Account Kit Demo

+
+ +
-
-

Inputs

- } - iconRight={} - /> - } - iconRight={} - disabled - /> - } - iconRight={} - error="There was an error" - /> -
-
-

Auth

-
-
-
-
- {!user ? ( - - ) : ( -
- Logged in as {user.email ?? "anon"} - -
- )} -
- {error && error.message && ( -
- {error.message} -
- )} -
-
- -
+
+
+
diff --git a/examples/ui-demo/src/components/icons/alchemy.tsx b/examples/ui-demo/src/components/icons/alchemy.tsx index a010db09c7..43aaba4f9f 100644 --- a/examples/ui-demo/src/components/icons/alchemy.tsx +++ b/examples/ui-demo/src/components/icons/alchemy.tsx @@ -1,16 +1,74 @@ import { JSX, SVGProps } from "react"; -export const AlchemyLogo = ({fill, ...props}: JSX.IntrinsicAttributes & SVGProps) => ( - - - - ); \ No newline at end of file +export const AlchemyLogo = ({ + fill, + ...props +}: JSX.IntrinsicAttributes & SVGProps) => ( + + + +); + +export const AlchemyFullLogo = ({ + fill, + ...props +}: JSX.IntrinsicAttributes & SVGProps) => ( + + + + + + + + + + + + +); diff --git a/examples/ui-demo/src/components/icons/github.tsx b/examples/ui-demo/src/components/icons/github.tsx new file mode 100644 index 0000000000..46c60b1012 --- /dev/null +++ b/examples/ui-demo/src/components/icons/github.tsx @@ -0,0 +1,22 @@ +import { SVGProps } from "react"; + +// eslint-disable-next-line jsdoc/require-jsdoc +export const GithubLogo = ({ + fill = "black", + size = 24, + ...props +}: JSX.IntrinsicAttributes & SVGProps & { size?: number }) => ( + + + +); diff --git a/examples/ui-demo/src/components/shared/ExternalLink.tsx b/examples/ui-demo/src/components/shared/ExternalLink.tsx new file mode 100644 index 0000000000..2799112d69 --- /dev/null +++ b/examples/ui-demo/src/components/shared/ExternalLink.tsx @@ -0,0 +1,20 @@ +import Link, { LinkProps } from "next/link" + +const ExternalLink = ({ + className, + children, + ...rest +}: LinkProps & { className?: string; children: React.ReactNode }) => { + return ( + + {children} + + ) +} + +export default ExternalLink diff --git a/examples/ui-demo/src/components/shared/button.tsx b/examples/ui-demo/src/components/shared/button.tsx new file mode 100644 index 0000000000..db88f80e29 --- /dev/null +++ b/examples/ui-demo/src/components/shared/button.tsx @@ -0,0 +1,9 @@ +import { PropsWithChildren } from "react"; + +export function Button({ children }: PropsWithChildren) { + return ( + + ); +} diff --git a/examples/ui-demo/src/components/topnav/TopNav.tsx b/examples/ui-demo/src/components/topnav/TopNav.tsx new file mode 100644 index 0000000000..1b277a0fbe --- /dev/null +++ b/examples/ui-demo/src/components/topnav/TopNav.tsx @@ -0,0 +1,32 @@ +import Link from "next/link"; +import { AlchemyFullLogo, AlchemyLogo } from "../icons/alchemy"; +import ExternalLink from "../shared/ExternalLink"; +import { DOCS } from "@/src/utils/links"; +import { GithubLogo } from "../icons/github"; + +export function TopNav() { + return ( +
+ +
+
+ + Demo + + + Docs + + + Examples + +
+ + +
+
+ ); +} + +function BarSeparator() { + return
; +} diff --git a/examples/ui-demo/src/utils/links.ts b/examples/ui-demo/src/utils/links.ts new file mode 100644 index 0000000000..81ef7c7491 --- /dev/null +++ b/examples/ui-demo/src/utils/links.ts @@ -0,0 +1 @@ +export const DOCS = 'https://accountkit.alchemy.com/getting-started/introduction.html' \ No newline at end of file