diff --git a/docs/components/display-techstack.tsx b/docs/components/display-techstack.tsx index 70fc8033..5893ded9 100644 --- a/docs/components/display-techstack.tsx +++ b/docs/components/display-techstack.tsx @@ -1,42 +1,42 @@ import { cn } from "@/lib/utils"; import { techStackIcons } from "./techstack-icons"; import { - Tooltip, - TooltipContent, - TooltipProvider, - TooltipTrigger, + Tooltip, + TooltipContent, + TooltipProvider, + TooltipTrigger, } from "@/components/ui/tooltip"; export const TechStackDisplay = ({ - skills, - className, + skills, + className, }: { - skills: string[]; - className?: string; + skills: string[]; + className?: string; }) => { - return ( -
- {skills.map((icon) => { - return ( - - - - - {techStackIcons[icon].icon} - - - - {techStackIcons[icon].name} - - - - ); - })} -
- ); + return ( +
+ {skills.map((icon) => { + return ( + + + + + {techStackIcons[icon].icon} + + + + {techStackIcons[icon].name} + + + + ); + })} +
+ ); }; diff --git a/docs/components/landing/hero.tsx b/docs/components/landing/hero.tsx index 2f0513c5..c311317f 100644 --- a/docs/components/landing/hero.tsx +++ b/docs/components/landing/hero.tsx @@ -13,9 +13,9 @@ import { Builder } from "../builder"; import { Spotlight } from "./spotlight"; import { GradientBG } from "./gradient-bg"; const tabs: { name: "auth.ts" | "client.ts"; code: string }[] = [ - { - name: "auth.ts", - code: `export const auth = betterAuth({ + { + name: "auth.ts", + code: `export const auth = betterAuth({ database: new Pool({ connectionString: DATABASE_URL, }), @@ -27,509 +27,509 @@ const tabs: { name: "auth.ts" | "client.ts"; code: string }[] = [ twoFactor(), ] })`, - }, - { - name: "client.ts", - code: `const client = createAuthClient({ + }, + { + name: "client.ts", + code: `const client = createAuthClient({ plugins: [passkeyClient()] }); `, - }, + }, ]; function TrafficLightsIcon(props: React.ComponentPropsWithoutRef<"svg">) { - return ( - - ); + return ( + + ); } export default function Hero() { - return ( -
- -
-
-
-
-
-
-
- - - - - Own Your Auth - -
- - - - v1.2 is out - - - - -
-
+ return ( +
+ +
+
+
+
+
+
+
+ + + + + Own Your Auth + +
+ + + + v1.2 is out + + + + +
+
-

- The most comprehensive authentication framework for TypeScript. -

-
- -
-

- - git: - (main) - - x -

-

- npm add{" "} - - better-auth - - -

-
-
- - - - - - - - - - - - - - -
- -
- { - <> -
- - Get Started - - -
- - } -
-
+

+ The most comprehensive authentication framework for TypeScript. +

+
+ +
+

+ + git: + (main) + + x +

+

+ npm add{" "} + + better-auth + + +

+
+
+ + + + + + + + + + + + + + +
+ +
+ { + <> +
+ + Get Started + + +
+ + } +
+
-
-
-
-
- -
-
-
-
-
- ); +
+
+
+
+ +
+
+
+
+
+ ); } function CodePreview() { - const [currentTab, setCurrentTab] = useState<"auth.ts" | "client.ts">( - "auth.ts", - ); + const [currentTab, setCurrentTab] = useState<"auth.ts" | "client.ts">( + "auth.ts", + ); - const theme = useTheme(); + const theme = useTheme(); - const code = tabs.find((tab) => tab.name === currentTab)?.code ?? ""; - const [copyState, setCopyState] = useState(false); - const [ref, { height }] = useMeasure(); - const copyToClipboard = (text: string) => { - navigator.clipboard.writeText(text).then(() => { - setCopyState(true); - setTimeout(() => { - setCopyState(false); - }, 2000); - }); - }; + const code = tabs.find((tab) => tab.name === currentTab)?.code ?? ""; + const [copyState, setCopyState] = useState(false); + const [ref, { height }] = useMeasure(); + const copyToClipboard = (text: string) => { + navigator.clipboard.writeText(text).then(() => { + setCopyState(true); + setTimeout(() => { + setCopyState(false); + }, 2000); + }); + }; - const [codeTheme, setCodeTheme] = useState(themes.synthwave84); + const [codeTheme, setCodeTheme] = useState(themes.synthwave84); - useEffect(() => { - setCodeTheme( - theme.resolvedTheme === "light" ? themes.oneLight : themes.synthwave84, - ); - }, [theme.resolvedTheme]); + useEffect(() => { + setCodeTheme( + theme.resolvedTheme === "light" ? themes.oneLight : themes.synthwave84, + ); + }, [theme.resolvedTheme]); - return ( - - - 0 ? height : undefined }} - className="from-stone-100 to-stone-200 dark:to-black/90 dark:via-stone-950/10 dark:from-stone-950/90 relative overflow-hidden rounded-sm bg-gradient-to-tr ring-1 ring-white/10 backdrop-blur-lg" - > -
-
-
-
- + return ( + + + 0 ? height : undefined }} + className="from-stone-100 to-stone-200 dark:to-black/90 dark:via-stone-950/10 dark:from-stone-950/90 relative overflow-hidden rounded-sm bg-gradient-to-tr ring-1 ring-white/10 backdrop-blur-lg" + > +
+
+
+
+ -
- {tabs.map((tab) => ( - - ))} -
+
+ {tabs.map((tab) => ( + + ))} +
-
-
- -
- - - - {({ - className, - style, - tokens, - getLineProps, - getTokenProps, - }) => ( - 
-                        
-                          {tokens.map((line, lineIndex) => (
-                            

-                              {line.map((token, tokenIndex) => (
-                                
-                              ))}
-                            

-                          ))}
-                        
-
- )} - - - - - - - -

Demo

- - -
-
-
- - - - ); +
+
+ +
+ + + + {({ + className, + style, + tokens, + getLineProps, + getTokenProps, + }) => ( + 
+												
+													{tokens.map((line, lineIndex) => (
+														

+															{line.map((token, tokenIndex) => (
+																
+															))}
+														

+													))}
+												
+
+ )} + + + + + + + +

Demo

+ + +
+
+
+ + + + ); } export function HeroBackground(props: React.ComponentPropsWithoutRef<"svg">) { - const id = useId(); - return ( - - ); + const id = useId(); + return ( + + ); } diff --git a/docs/components/ui/tooltip.tsx b/docs/components/ui/tooltip.tsx index f66742cc..c6b9cfbf 100644 --- a/docs/components/ui/tooltip.tsx +++ b/docs/components/ui/tooltip.tsx @@ -6,56 +6,56 @@ import * as TooltipPrimitive from "@radix-ui/react-tooltip"; import { cn } from "@/lib/utils"; function TooltipProvider({ - delayDuration = 0, - ...props + delayDuration = 0, + ...props }: React.ComponentProps) { - return ( - - ); + return ( + + ); } function Tooltip({ - ...props + ...props }: React.ComponentProps) { - return ( - - - - ); + return ( + + + + ); } function TooltipTrigger({ - ...props + ...props }: React.ComponentProps) { - return ; + return ; } function TooltipContent({ - className, - sideOffset = 0, - children, - ...props + className, + sideOffset = 0, + children, + ...props }: React.ComponentProps) { - return ( - - - {children} - - - - ); + return ( + + + {children} + + + + ); } export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider };