From e810c06c66b21027d2bfd8824c48cb305705fb13 Mon Sep 17 00:00:00 2001 From: Abdallah Samy Date: Sat, 11 May 2024 11:24:54 +0300 Subject: [PATCH 1/4] add react example --- pages/docs/examples/react.mdx | 85 ++++++++++++++++++++++++++++------- 1 file changed, 69 insertions(+), 16 deletions(-) diff --git a/pages/docs/examples/react.mdx b/pages/docs/examples/react.mdx index 49db916..8c7ea27 100644 --- a/pages/docs/examples/react.mdx +++ b/pages/docs/examples/react.mdx @@ -1,18 +1,71 @@ # React -import { Callout } from 'nextra-theme-docs'; - - -
- This page is a work in progress. If you have any questions, please ask in - the{' '} - - Discord - - . -
- + + + +```jsx +# /app/page.tsx + +import {title} from "@/components/primitives"; + +export default function Home() => ( +

+ Abdallah Samy +

+) +``` + + + +```ts +# /components/primitives +import { tv } from "tailwind-variants"; + +export const title = tv({ + base: "tracking-tight inline font-semibold", + variants: { + color: { + violet: "from-[#FF1CF7] to-[#b249f8]", + yellow: "from-[#FF705B] to-[#FFB457]", + blue: "from-[#5EA2EF] to-[#0072F5]", + cyan: "from-[#00b7fa] to-[#01cfea]", + green: "from-[#6FEE8D] to-[#17c964]", + pink: "from-[#FF72E1] to-[#F54C7A]", + foreground: "dark:from-[#FFFFFF] dark:to-[#4B4B4B]", + diamondGradient: "bg-gradient-to-br from-[#4F67C9] via-[#020E41] to-[#4F67C9] bg-clip-text text-transparent", + }, + size: { + xxs: "text-xl lg:text-2xl", + xs: "text-2xl lg:text-3xl", + sm: "text-3xl lg:text-4xl", + md: "text-[2.3rem] lg:text-5xl leading-9", + lg: "text-4xl lg:text-6xl", + }, + fullWidth: { + true: "w-full block", + }, + center: { + true: "text-center align-middle", + }, + }, + defaultVariants: { + size: "md", + }, + compoundVariants: [ + { + color: [ + "violet", + "yellow", + "blue", + "cyan", + "green", + "pink", + "foreground", + ], + class: "bg-clip-text text-transparent bg-gradient-to-b", + }, + ], +}); + + +``` From 13f502b8f599ae44c44de2116303b6dcc684ea06 Mon Sep 17 00:00:00 2001 From: Abdallah Samy Date: Mon, 13 May 2024 10:26:15 +0300 Subject: [PATCH 2/4] Update react.mdx --- pages/docs/examples/react.mdx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/pages/docs/examples/react.mdx b/pages/docs/examples/react.mdx index 8c7ea27..7b046fe 100644 --- a/pages/docs/examples/react.mdx +++ b/pages/docs/examples/react.mdx @@ -4,7 +4,7 @@ ```jsx -# /app/page.tsx +// /app/page.tsx import {title} from "@/components/primitives"; @@ -18,7 +18,7 @@ export default function Home() => ( ```ts -# /components/primitives +// /components/primitives import { tv } from "tailwind-variants"; export const title = tv({ From a39bf92a5e7344ae0dc893ae98ca3b768835ec18 Mon Sep 17 00:00:00 2001 From: Abdallah Samy Date: Mon, 13 May 2024 10:26:46 +0300 Subject: [PATCH 3/4] Update react.mdx --- pages/docs/examples/react.mdx | 5 ----- 1 file changed, 5 deletions(-) diff --git a/pages/docs/examples/react.mdx b/pages/docs/examples/react.mdx index 7b046fe..01fd0a2 100644 --- a/pages/docs/examples/react.mdx +++ b/pages/docs/examples/react.mdx @@ -1,8 +1,5 @@ # React - - - ```jsx // /app/page.tsx @@ -14,8 +11,6 @@ export default function Home() => ( ) ``` - - ```ts // /components/primitives From 073ffe0fb0563a07afe90fbae0e5794d48da0c42 Mon Sep 17 00:00:00 2001 From: Abdallah Samy Date: Mon, 13 May 2024 10:27:18 +0300 Subject: [PATCH 4/4] Update react.mdx --- pages/docs/examples/react.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/pages/docs/examples/react.mdx b/pages/docs/examples/react.mdx index 01fd0a2..2190b62 100644 --- a/pages/docs/examples/react.mdx +++ b/pages/docs/examples/react.mdx @@ -7,7 +7,7 @@ import {title} from "@/components/primitives"; export default function Home() => (

- Abdallah Samy + Tailwind Variants

) ```