diff --git a/docs/app/global.css b/docs/app/global.css index 053db1b0..6b17919c 100644 --- a/docs/app/global.css +++ b/docs/app/global.css @@ -31,9 +31,9 @@ --chart-5: 27 87% 67% } .dark { - --background: 360 50% 5%; + --background: 0 0% 2%; --foreground: 0 0% 98%; - --card: 240 10% 3.9%; + --card: 240 10% 0%; --card-foreground: 0 0% 98%; --popover: 240 10% 3.9%; --popover-foreground: 0 0% 98%; diff --git a/docs/components/buidler/index.tsx b/docs/components/buidler/index.tsx index 21923c42..79ca15bf 100644 --- a/docs/components/buidler/index.tsx +++ b/docs/components/buidler/index.tsx @@ -1,15 +1,39 @@ -import { PlusIcon } from "lucide-react"; +import { + Code, + Layout, + LayoutDashboard, + Mail, + PhoneCall, + PlusIcon, + Users, +} from "lucide-react"; import { Dialog, DialogContent, + DialogDescription, DialogHeader, DialogTitle, DialogTrigger, } from "../ui/dialog"; -import { Card } from "../ui/card"; -import { Tabs, TabsList, TabsTrigger } from "../ui/tabs"; +import { + Card, + CardContent, + CardFooter, + CardHeader, + CardTitle, +} from "../ui/card"; +import { Tabs, TabsContent, TabsList, TabsTrigger } from "../ui/tabs"; +import SignIn from "./sign-in"; +import { SignUp } from "./sign-up"; +import { AuthTabs } from "./tabs"; +import { Label } from "../ui/label"; +import { Input } from "../ui/input"; +import { Button } from "../ui/button"; +import { Switch } from "../ui/switch"; +import { Separator } from "../ui/separator"; export function Builder() { + const enabledComp = {}; return ( @@ -24,33 +48,104 @@ export function Builder() { - + Create Sign in Box + + Configure the sign in box to your liking and copy the code to your + application + - -
-
- - - { - // setIsPrev(true); - // setActiveTab("preview"); - }} - > - {/* */} - - Preview - - - - -
+ +
+
+ , + }, + { + title: "Sign Up", + value: "sign-up", + content: , + }, + ]} + />
- +
+ + + Configuration + + +
+
+ +
+ +
+
+ + +
+ +
+
+
+ + +
+ +
+
+
+ + +
+ +
+
+
+ + + + +
+ +
+
+ + + + + + ), + }, + { + title: "code", + value: "auth.ts", + content:
, + }, + ]} + /> +
+
); diff --git a/docs/components/buidler/sign-in.tsx b/docs/components/buidler/sign-in.tsx new file mode 100644 index 00000000..c5dba3a5 --- /dev/null +++ b/docs/components/buidler/sign-in.tsx @@ -0,0 +1,223 @@ +"use client"; + +import { Button } from "@/components/ui/button"; +import { + Card, + CardContent, + CardDescription, + CardFooter, + CardHeader, + CardTitle, +} from "@/components/ui/card"; +import { Checkbox } from "@/components/ui/checkbox"; +import { Input } from "@/components/ui/input"; +import { Label } from "@/components/ui/label"; +import { DiscordLogoIcon, GitHubLogoIcon } from "@radix-ui/react-icons"; +import { Key, Loader2 } from "lucide-react"; +import Link from "next/link"; +import { useRouter } from "next/navigation"; +import { useState } from "react"; + +export default function SignIn() { + const [email, setEmail] = useState(""); + const [password, setPassword] = useState(""); + const [rememberMe, setRememberMe] = useState(false); + const router = useRouter(); + const [loading, setLoading] = useState(false); + return ( + + + Sign In + + Enter your email below to login to your account + + + +
+
+ + { + setEmail(e.target.value); + }} + value={email} + /> +
+
+
+ + + Forgot your password? + +
+ + +
+
+ { + setRememberMe(!rememberMe); + }} + /> + +
+ + +
+ + + + + + + + +
+ +
+ + +
+

+ Secured by better-auth. +

+
+ + + ); +} diff --git a/docs/components/buidler/sign-up.tsx b/docs/components/buidler/sign-up.tsx new file mode 100644 index 00000000..a258cbe8 --- /dev/null +++ b/docs/components/buidler/sign-up.tsx @@ -0,0 +1,282 @@ +"use client"; + +import { Button } from "@/components/ui/button"; +import { + Card, + CardContent, + CardDescription, + CardFooter, + CardHeader, + CardTitle, +} from "@/components/ui/card"; +import { Input } from "@/components/ui/input"; +import { Label } from "@/components/ui/label"; +import { DiscordLogoIcon, GitHubLogoIcon } from "@radix-ui/react-icons"; +import { useState } from "react"; +import Image from "next/image"; +import { Loader2, X } from "lucide-react"; +import { toast } from "sonner"; +import { useRouter } from "next/navigation"; + +export function SignUp() { + const [firstName, setFirstName] = useState(""); + const [lastName, setLastName] = useState(""); + const [email, setEmail] = useState(""); + const [password, setPassword] = useState(""); + const [passwordConfirmation, setPasswordConfirmation] = useState(""); + const [image, setImage] = useState(null); + const [imagePreview, setImagePreview] = useState(null); + const router = useRouter(); + + const handleImageChange = (e: React.ChangeEvent) => { + const file = e.target.files?.[0]; + if (file) { + setImage(file); + const reader = new FileReader(); + reader.onloadend = () => { + setImagePreview(reader.result as string); + }; + reader.readAsDataURL(file); + } + }; + const [loading, setLoading] = useState(false); + + return ( + + + Sign Up + + Enter your information to create an account + + + +
+
+
+ + { + setFirstName(e.target.value); + }} + value={firstName} + /> +
+
+ + { + setLastName(e.target.value); + }} + value={lastName} + /> +
+
+
+ + { + setEmail(e.target.value); + }} + value={email} + /> +
+
+ + {/* setPassword(e.target.value)} + autoComplete="new-password" + placeholder="Password" + /> */} +
+
+ + {/* setPasswordConfirmation(e.target.value)} + autoComplete="new-password" + placeholder="Confirm Password" + /> */} +
+
+ +
+ {imagePreview && ( +
+ Profile preview +
+ )} +
+ + {imagePreview && ( + { + setImage(null); + setImagePreview(null); + }} + /> + )} +
+
+
+ +
+ + + + +
+
+ + +
+

+ Secured by better-auth. +

+
+ + + ); +} + +async function convertImageToBase64(file: File): Promise { + return new Promise((resolve, reject) => { + const reader = new FileReader(); + reader.onloadend = () => resolve(reader.result as string); + reader.onerror = reject; + reader.readAsDataURL(file); + }); +} diff --git a/docs/components/buidler/tabs.tsx b/docs/components/buidler/tabs.tsx new file mode 100644 index 00000000..146a23bf --- /dev/null +++ b/docs/components/buidler/tabs.tsx @@ -0,0 +1,118 @@ +"use client"; + +import { useState } from "react"; +import { motion } from "framer-motion"; +import { cn } from "@/lib/utils"; + +type Tab = { + title: string; + value: string; + content?: string | React.ReactNode | any; +}; + +export const AuthTabs = ({ + tabs: propTabs, + containerClassName, + activeTabClassName, + tabClassName, +}: { + tabs: Tab[]; + containerClassName?: string; + activeTabClassName?: string; + tabClassName?: string; +}) => { + const [active, setActive] = useState(propTabs[0]); + const [tabs, setTabs] = useState(propTabs); + const isActive = (tab: Tab) => { + return tab.value === tabs[0].value; + }; + const moveSelectedTabToTop = (idx: number) => { + const newTabs = [...propTabs]; + const selectedTab = newTabs.splice(idx, 1); + newTabs.unshift(selectedTab[0]); + setTabs(newTabs); + setActive(newTabs[0]); + }; + + const [hovering, setHovering] = useState(false); + + return ( + <> +
+ {propTabs.map((tab, idx) => ( + + ))} +
+
+ {tabs.map((tab, idx) => ( + + {tab.content} + + ))} +
+ + ); +}; diff --git a/docs/components/ui/button.tsx b/docs/components/ui/button.tsx index 076213c1..93b13fa4 100644 --- a/docs/components/ui/button.tsx +++ b/docs/components/ui/button.tsx @@ -5,7 +5,7 @@ import { cva, type VariantProps } from "class-variance-authority"; import { cn } from "@/lib/utils"; const buttonVariants = cva( - "inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50", + "inline-flex items-center justify-center whitespace-nowrap rounded-none text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50", { variants: { variant: { diff --git a/docs/components/ui/checkbox.tsx b/docs/components/ui/checkbox.tsx index 2a7e8b86..6130819b 100644 --- a/docs/components/ui/checkbox.tsx +++ b/docs/components/ui/checkbox.tsx @@ -13,7 +13,7 @@ const Checkbox = React.forwardRef< (