diff --git a/app/blocks/authentication/authentication.tsx b/app/blocks/authentication/authentication.tsx index 19fd854..a5bc3a0 100644 --- a/app/blocks/authentication/authentication.tsx +++ b/app/blocks/authentication/authentication.tsx @@ -1,10 +1,15 @@ +import { EmailOnlyLoginForm } from "@/components/ui/8bit/blocks/email-only-login-form"; import { LoginForm } from "@/components/ui/8bit/blocks/login-form"; import { LoginForm as LoginForm2 } from "@/components/ui/8bit/blocks/login-form-2"; import { LoginForm as LoginFormWithImage } from "@/components/ui/8bit/blocks/login-form-with-image"; +import { SignupForm } from "@/components/ui/8bit/blocks/signup-form"; +import { SignupForm as SignupForm2 } from "@/components/ui/8bit/blocks/signup-form-2"; +import { SignupForm as SignupFormWithImage } from "@/components/ui/8bit/blocks/signup-form-with-image"; import CopyCommandButton from "../../docs/components/copy-command-button"; import { OpenInV0Button } from "../../docs/components/open-in-v0-button"; import LoginPage from "../../login/page"; +import SignupPage from "../../signup/page"; export default function AuthenticationBlocks() { return ( @@ -87,6 +92,107 @@ export default function AuthenticationBlocks() { + +
+
+

+ A simple email-only login form +

+ +
+ + +
+
+
+ +
+
+ +
+
+

+ A simple signup form +

+ +
+ + +
+
+
+ +
+
+ +
+

+ A two column signup page with a cover image. +

+ +
+ + +
+
+
+
+ +
+
+ +
+
+

+ A simple signup form with icons +

+ +
+ + +
+
+
+ +
+
+ +
+
+

+ A simple signup form with image +

+ +
+ + +
+
+
+ +
+
); } diff --git a/app/signup/page.tsx b/app/signup/page.tsx new file mode 100644 index 0000000..2c5946e --- /dev/null +++ b/app/signup/page.tsx @@ -0,0 +1,32 @@ +import { GalleryVerticalEnd } from "lucide-react"; + +import { SignupForm } from "@/components/ui/8bit/blocks/signup-form"; + +export default function SignupPage() { + return ( +
+
+ Image +
+
+
+ +
+ +
+ Acme Inc. + +
+
+
+ +
+
+
+
+ ); +} diff --git a/components/ui/8bit/blocks/email-only-login-form.tsx b/components/ui/8bit/blocks/email-only-login-form.tsx new file mode 100644 index 0000000..819e6ba --- /dev/null +++ b/components/ui/8bit/blocks/email-only-login-form.tsx @@ -0,0 +1,78 @@ +import { GalleryVerticalEnd } from "lucide-react"; + +import { cn } from "@/lib/utils"; + +import { Button } from "@/components/ui/8bit/button"; +import { Input } from "@/components/ui/8bit/input"; +import { Label } from "@/components/ui/8bit/label"; + +export function EmailOnlyLoginForm({ + className, + ...props +}: React.ComponentPropsWithoutRef<"div">) { + return ( +
+
+
+
+ +
+ +
+ Acme Inc. + +

Welcome to Acme Inc.

+
+ Don't have an account?{" "} + + Sign up + +
+
+
+
+ + +
+ +
+
+ + Or continue with + +
+
+ + +
+
+
+
+ ); +} diff --git a/components/ui/8bit/blocks/signup-form-2.tsx b/components/ui/8bit/blocks/signup-form-2.tsx new file mode 100644 index 0000000..9209b66 --- /dev/null +++ b/components/ui/8bit/blocks/signup-form-2.tsx @@ -0,0 +1,92 @@ +import { cn } from "@/lib/utils"; + +import { Button } from "@/components/ui/8bit/button"; +import { + Card, + CardContent, + CardDescription, + CardHeader, + CardTitle, +} from "@/components/ui/8bit/card"; +import { Input } from "@/components/ui/8bit/input"; +import { Label } from "@/components/ui/8bit/label"; + +import "../styles/retro.css"; + +export function SignupForm({ + className, + ...props +}: React.ComponentPropsWithoutRef<"div">) { + return ( +
+ + + Create an account + + Sign up with your Apple or Google account + + + +
+
+
+ + +
+
+ + Or continue with + +
+
+
+ + +
+
+ + +
+ +
+
+ Already have an account?{" "} + + Sign in + +
+
+
+ + +
+ Terms of Service and Privacy Policy. +
+
+ ); +} diff --git a/components/ui/8bit/blocks/signup-form-with-image.tsx b/components/ui/8bit/blocks/signup-form-with-image.tsx new file mode 100644 index 0000000..1bc6966 --- /dev/null +++ b/components/ui/8bit/blocks/signup-form-with-image.tsx @@ -0,0 +1,101 @@ +import { cn } from "@/lib/utils"; + +import { Button } from "@/components/ui/8bit/button"; +import { Card, CardContent } from "@/components/ui/8bit/card"; +import { Input } from "@/components/ui/8bit/input"; +import { Label } from "@/components/ui/8bit/label"; + +import "../styles/retro.css"; + +export function SignupForm({ + className, + ...props +}: React.ComponentProps<"div">) { + return ( +
+ + +
+ Image +
+
+
+
+

Create your account

+

+ Sign up for an Acme Inc account to get started +

+
+
+ + +
+
+ + +
+ +
+ + Or continue with + +
+
+ + + +
+
+ Already have an account?{" "} + + Sign in + +
+
+
+ + +

+ By clicking create account, you agree to our{" "} + Terms of Service and Privacy Policy. +

+
+ ); +} diff --git a/components/ui/8bit/blocks/signup-form.tsx b/components/ui/8bit/blocks/signup-form.tsx new file mode 100644 index 0000000..d5da482 --- /dev/null +++ b/components/ui/8bit/blocks/signup-form.tsx @@ -0,0 +1,61 @@ +import { cn } from "@/lib/utils"; + +import { Button } from "@/components/ui/8bit/button"; +import { + Card, + CardContent, + CardDescription, + CardHeader, + CardTitle, +} from "@/components/ui/8bit/card"; +import { Input } from "@/components/ui/8bit/input"; +import { Label } from "@/components/ui/8bit/label"; + +export function SignupForm({ + className, + ...props +}: React.ComponentPropsWithoutRef<"div">) { + return ( +
+ + + Sign up + + Enter your email and choose a password to create your account + + + +
+
+
+ + +
+
+ + +
+ + +
+
+ Already have an account?{" "} + + Log in + +
+
+ + +
+ ); +} diff --git a/public/r/email-only-login-form.json b/public/r/email-only-login-form.json new file mode 100644 index 0000000..bb81cae --- /dev/null +++ b/public/r/email-only-login-form.json @@ -0,0 +1,44 @@ +{ + "$schema": "https://ui.shadcn.com/schema/registry-item.json", + "name": "email-only-login-form", + "type": "registry:component", + "title": "8-bit Email Only Login Form", + "description": "A simple 8-bit email only login form component", + "registryDependencies": [ + "button", + "input", + "label" + ], + "files": [ + { + "path": "components/ui/8bit/blocks/email-only-login-form.tsx", + "content": "import { GalleryVerticalEnd } from \"lucide-react\";\n\nimport { cn } from \"@/lib/utils\";\n\nimport { Button } from \"@/components/ui/8bit/button\";\nimport { Input } from \"@/components/ui/8bit/input\";\nimport { Label } from \"@/components/ui/8bit/label\";\n\nexport function EmailOnlyLoginForm({\n className,\n ...props\n}: React.ComponentPropsWithoutRef<\"div\">) {\n return (\n
\n
\n
\n
\n \n
\n \n
\n Acme Inc.\n \n

Welcome to Acme Inc.

\n
\n Don't have an account?{\" \"}\n \n Sign up\n \n
\n
\n
\n
\n \n \n
\n \n
\n
\n \n Or continue with\n \n
\n
\n \n \n
\n
\n
\n
\n );\n}\n", + "type": "registry:component", + "target": "components/ui/8bit/blocks/email-only-login-form.tsx" + }, + { + "path": "components/ui/8bit/button.tsx", + "content": "import { type VariantProps, cva } from \"class-variance-authority\";\n\nimport { cn } from \"@/lib/utils\";\n\nimport { Button as ShadcnButton } from \"@/components/ui/button\";\n\nimport \"./styles/retro.css\";\n\nexport const buttonVariants = cva(\"\", {\n variants: {\n font: {\n normal: \"\",\n retro: \"retro\",\n },\n variant: {\n default: \"bg-foreground\",\n destructive: \"bg-foreground\",\n outline: \"bg-foreground\",\n secondary: \"bg-secondary text-secondary-foreground hover:bg-secondary/80\",\n ghost: \"hover:bg-accent hover:text-accent-foreground\",\n link: \"text-primary underline-offset-4 hover:underline\",\n },\n size: {\n default: \"h-9 px-4 py-2 has-[>svg]:px-3\",\n sm: \"h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5\",\n lg: \"h-10 rounded-md px-6 has-[>svg]:px-4\",\n icon: \"size-9\",\n },\n },\n defaultVariants: {\n variant: \"default\",\n size: \"default\",\n },\n});\n\nexport interface BitButtonProps\n extends React.ButtonHTMLAttributes,\n VariantProps {\n asChild?: boolean;\n ref?: React.Ref;\n}\n\nfunction Button({ children, asChild, ...props }: BitButtonProps) {\n const { variant, size, className, font } = props;\n\n return (\n \n {asChild ? (\n \n {children}\n\n {variant !== \"ghost\" && variant !== \"link\" && size !== \"icon\" && (\n <>\n {/* Pixelated border */}\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n {variant !== \"outline\" && (\n <>\n {/* Top shadow */}\n
\n
\n\n {/* Bottom shadow */}\n
\n
\n \n )}\n \n )}\n\n {size === \"icon\" && (\n <>\n
\n
\n
\n
\n
\n
\n \n )}\n \n ) : (\n <>\n {children}\n\n {variant !== \"ghost\" && variant !== \"link\" && size !== \"icon\" && (\n <>\n {/* Pixelated border */}\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n {variant !== \"outline\" && (\n <>\n {/* Top shadow */}\n
\n
\n\n {/* Bottom shadow */}\n
\n
\n \n )}\n \n )}\n\n {size === \"icon\" && (\n <>\n
\n
\n
\n
\n
\n
\n \n )}\n \n )}\n \n );\n}\n\nexport { Button };\n", + "type": "registry:component", + "target": "components/ui/8bit/button.tsx" + }, + { + "path": "components/ui/8bit/input.tsx", + "content": "import { type VariantProps, cva } from \"class-variance-authority\";\n\nimport { cn } from \"@/lib/utils\";\n\nimport { Input as ShadcnInput } from \"@/components/ui/input\";\n\nimport \"./styles/retro.css\";\n\nexport const inputVariants = cva(\"\", {\n variants: {\n font: {\n normal: \"\",\n retro: \"retro\",\n },\n },\n defaultVariants: {\n font: \"retro\",\n },\n});\n\nexport interface BitInputProps\n extends React.InputHTMLAttributes,\n VariantProps {\n asChild?: boolean;\n}\n\nfunction Input({ ...props }: BitInputProps) {\n const { className, font } = props;\n\n return (\n \n \n\n \n
\n );\n}\n\nexport { Input };\n", + "type": "registry:component", + "target": "components/ui/8bit/input.tsx" + }, + { + "path": "components/ui/8bit/label.tsx", + "content": "\"use client\";\n\nimport * as React from \"react\";\n\nimport * as LabelPrimitive from \"@radix-ui/react-label\";\nimport { type VariantProps, cva } from \"class-variance-authority\";\n\nimport { cn } from \"@/lib/utils\";\n\nimport { Label as ShadcnLabel } from \"@/components/ui/label\";\n\nimport \"./styles/retro.css\";\n\nexport const inputVariants = cva(\"\", {\n variants: {\n font: {\n normal: \"\",\n retro: \"retro\",\n },\n },\n defaultVariants: {\n font: \"retro\",\n },\n});\n\ninterface BitLabelProps\n extends React.ComponentProps,\n VariantProps {\n asChild?: boolean;\n}\n\nfunction Label({ className, font, ...props }: BitLabelProps) {\n return (\n \n );\n}\n\nexport { Label };\n", + "type": "registry:component", + "target": "components/ui/8bit/label.tsx" + }, + { + "path": "components/ui/8bit/styles/retro.css", + "content": "@import url(\"https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap\");\n\n.retro {\n font-family:\n \"Press Start 2P\",\n system-ui,\n -apple-system,\n sans-serif;\n line-height: 1.5;\n letter-spacing: 0.5px;\n}\n", + "type": "registry:component", + "target": "components/ui/8bit/styles/retro.css" + } + ] +} \ No newline at end of file diff --git a/public/r/registry.json b/public/r/registry.json index 44b6ed8..80c61ed 100644 --- a/public/r/registry.json +++ b/public/r/registry.json @@ -1789,6 +1789,201 @@ "target": "components/ui/8bit/styles/retro.css" } ] + }, + { + "name": "signup-form", + "type": "registry:component", + "title": "8-bit Signup Form", + "description": "A simple 8-bit signup form component", + "registryDependencies": ["button", "card", "input", "label"], + "files": [ + { + "path": "components/ui/8bit/blocks/signup-form.tsx", + "type": "registry:component", + "target": "components/ui/8bit/blocks/signup-form.tsx" + }, + { + "path": "components/ui/8bit/button.tsx", + "type": "registry:component", + "target": "components/ui/8bit/button.tsx" + }, + { + "path": "components/ui/8bit/card.tsx", + "type": "registry:component", + "target": "components/ui/8bit/card.tsx" + }, + { + "path": "components/ui/8bit/input.tsx", + "type": "registry:component", + "target": "components/ui/8bit/input.tsx" + }, + { + "path": "components/ui/8bit/label.tsx", + "type": "registry:component", + "target": "components/ui/8bit/label.tsx" + }, + { + "path": "components/ui/8bit/styles/retro.css", + "type": "registry:component", + "target": "components/ui/8bit/styles/retro.css" + } + ] + }, + { + "name": "signup-page", + "type": "registry:component", + "title": "8-bit Signup Page", + "description": "A simple 8-bit signup page component", + "registryDependencies": ["button", "card", "input", "label"], + "files": [ + { + "path": "app/signup/page.tsx", + "type": "registry:component", + "target": "app/signup/page.tsx" + }, + { + "path": "components/ui/8bit/blocks/signup-form.tsx", + "type": "registry:component", + "target": "components/ui/8bit/blocks/signup-form.tsx" + }, + { + "path": "components/ui/8bit/button.tsx", + "type": "registry:component", + "target": "components/ui/8bit/button.tsx" + }, + { + "path": "components/ui/8bit/card.tsx", + "type": "registry:component", + "target": "components/ui/8bit/card.tsx" + }, + { + "path": "components/ui/8bit/input.tsx", + "type": "registry:component", + "target": "components/ui/8bit/input.tsx" + }, + { + "path": "components/ui/8bit/label.tsx", + "type": "registry:component", + "target": "components/ui/8bit/label.tsx" + }, + { + "path": "components/ui/8bit/styles/retro.css", + "type": "registry:component", + "target": "components/ui/8bit/styles/retro.css" + } + ] + }, + { + "name": "signup-form-2", + "type": "registry:component", + "title": "8-bit Signup Form 2", + "description": "A simple 8-bit signup form component", + "registryDependencies": ["button", "card", "input", "label"], + "files": [ + { + "path": "components/ui/8bit/blocks/signup-form-2.tsx", + "type": "registry:component", + "target": "components/ui/8bit/blocks/signup-form-2.tsx" + }, + { + "path": "components/ui/8bit/button.tsx", + "type": "registry:component", + "target": "components/ui/8bit/button.tsx" + }, + { + "path": "components/ui/8bit/card.tsx", + "type": "registry:component", + "target": "components/ui/8bit/card.tsx" + }, + { + "path": "components/ui/8bit/input.tsx", + "type": "registry:component", + "target": "components/ui/8bit/input.tsx" + }, + { + "path": "components/ui/8bit/label.tsx", + "type": "registry:component", + "target": "components/ui/8bit/label.tsx" + }, + { + "path": "components/ui/8bit/styles/retro.css", + "type": "registry:component", + "target": "components/ui/8bit/styles/retro.css" + } + ] + }, + { + "name": "signup-form-with-image", + "type": "registry:component", + "title": "8-bit Signup Form with Image", + "description": "A simple 8-bit signup form component with image", + "registryDependencies": ["button", "card", "input", "label"], + "files": [ + { + "path": "components/ui/8bit/blocks/signup-form-with-image.tsx", + "type": "registry:component", + "target": "components/ui/8bit/blocks/signup-form-with-image.tsx" + }, + { + "path": "components/ui/8bit/button.tsx", + "type": "registry:component", + "target": "components/ui/8bit/button.tsx" + }, + { + "path": "components/ui/8bit/card.tsx", + "type": "registry:component", + "target": "components/ui/8bit/card.tsx" + }, + { + "path": "components/ui/8bit/input.tsx", + "type": "registry:component", + "target": "components/ui/8bit/input.tsx" + }, + { + "path": "components/ui/8bit/label.tsx", + "type": "registry:component", + "target": "components/ui/8bit/label.tsx" + }, + { + "path": "components/ui/8bit/styles/retro.css", + "type": "registry:component", + "target": "components/ui/8bit/styles/retro.css" + } + ] + }, + { + "name": "email-only-login-form", + "type": "registry:component", + "title": "8-bit Email Only Login Form", + "description": "A simple 8-bit email only login form component", + "registryDependencies": ["button", "input", "label"], + "files": [ + { + "path": "components/ui/8bit/blocks/email-only-login-form.tsx", + "type": "registry:component", + "target": "components/ui/8bit/blocks/email-only-login-form.tsx" + }, + { + "path": "components/ui/8bit/button.tsx", + "type": "registry:component", + "target": "components/ui/8bit/button.tsx" + }, + { + "path": "components/ui/8bit/input.tsx", + "type": "registry:component", + "target": "components/ui/8bit/input.tsx" + }, + { + "path": "components/ui/8bit/label.tsx", + "type": "registry:component", + "target": "components/ui/8bit/label.tsx" + }, + { + "path": "components/ui/8bit/styles/retro.css", + "type": "registry:component", + "target": "components/ui/8bit/styles/retro.css" + } + ] } ] } diff --git a/public/r/signup-form-2.json b/public/r/signup-form-2.json new file mode 100644 index 0000000..b054af5 --- /dev/null +++ b/public/r/signup-form-2.json @@ -0,0 +1,51 @@ +{ + "$schema": "https://ui.shadcn.com/schema/registry-item.json", + "name": "signup-form-2", + "type": "registry:component", + "title": "8-bit Signup Form 2", + "description": "A simple 8-bit signup form component", + "registryDependencies": [ + "button", + "card", + "input", + "label" + ], + "files": [ + { + "path": "components/ui/8bit/blocks/signup-form-2.tsx", + "content": "import { cn } from \"@/lib/utils\";\n\nimport { Button } from \"@/components/ui/8bit/button\";\nimport {\n Card,\n CardContent,\n CardDescription,\n CardHeader,\n CardTitle,\n} from \"@/components/ui/8bit/card\";\nimport { Input } from \"@/components/ui/8bit/input\";\nimport { Label } from \"@/components/ui/8bit/label\";\n\nimport \"../styles/retro.css\";\n\nexport function SignupForm({\n className,\n ...props\n}: React.ComponentPropsWithoutRef<\"div\">) {\n return (\n
\n \n \n Create an account\n \n Sign up with your Apple or Google account\n \n \n \n
\n
\n
\n \n \n
\n
\n \n Or continue with\n \n
\n
\n
\n \n \n
\n
\n \n \n
\n \n
\n
\n Already have an account?{\" \"}\n \n Sign in\n \n
\n
\n
\n \n \n \n Terms of Service and Privacy Policy.\n
\n
\n );\n}\n", + "type": "registry:component", + "target": "components/ui/8bit/blocks/signup-form-2.tsx" + }, + { + "path": "components/ui/8bit/button.tsx", + "content": "import { type VariantProps, cva } from \"class-variance-authority\";\n\nimport { cn } from \"@/lib/utils\";\n\nimport { Button as ShadcnButton } from \"@/components/ui/button\";\n\nimport \"./styles/retro.css\";\n\nexport const buttonVariants = cva(\"\", {\n variants: {\n font: {\n normal: \"\",\n retro: \"retro\",\n },\n variant: {\n default: \"bg-foreground\",\n destructive: \"bg-foreground\",\n outline: \"bg-foreground\",\n secondary: \"bg-secondary text-secondary-foreground hover:bg-secondary/80\",\n ghost: \"hover:bg-accent hover:text-accent-foreground\",\n link: \"text-primary underline-offset-4 hover:underline\",\n },\n size: {\n default: \"h-9 px-4 py-2 has-[>svg]:px-3\",\n sm: \"h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5\",\n lg: \"h-10 rounded-md px-6 has-[>svg]:px-4\",\n icon: \"size-9\",\n },\n },\n defaultVariants: {\n variant: \"default\",\n size: \"default\",\n },\n});\n\nexport interface BitButtonProps\n extends React.ButtonHTMLAttributes,\n VariantProps {\n asChild?: boolean;\n ref?: React.Ref;\n}\n\nfunction Button({ children, asChild, ...props }: BitButtonProps) {\n const { variant, size, className, font } = props;\n\n return (\n \n {asChild ? (\n \n {children}\n\n {variant !== \"ghost\" && variant !== \"link\" && size !== \"icon\" && (\n <>\n {/* Pixelated border */}\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n {variant !== \"outline\" && (\n <>\n {/* Top shadow */}\n
\n
\n\n {/* Bottom shadow */}\n
\n
\n \n )}\n \n )}\n\n {size === \"icon\" && (\n <>\n
\n
\n
\n
\n
\n
\n \n )}\n \n ) : (\n <>\n {children}\n\n {variant !== \"ghost\" && variant !== \"link\" && size !== \"icon\" && (\n <>\n {/* Pixelated border */}\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n {variant !== \"outline\" && (\n <>\n {/* Top shadow */}\n
\n
\n\n {/* Bottom shadow */}\n
\n
\n \n )}\n \n )}\n\n {size === \"icon\" && (\n <>\n
\n
\n
\n
\n
\n
\n \n )}\n \n )}\n \n );\n}\n\nexport { Button };\n", + "type": "registry:component", + "target": "components/ui/8bit/button.tsx" + }, + { + "path": "components/ui/8bit/card.tsx", + "content": "import { type VariantProps, cva } from \"class-variance-authority\";\n\nimport { cn } from \"@/lib/utils\";\n\nimport {\n Card as ShadcnCard,\n CardAction as ShadcnCardAction,\n CardContent as ShadcnCardContent,\n CardDescription as ShadcnCardDescription,\n CardFooter as ShadcnCardFooter,\n CardHeader as ShadcnCardHeader,\n CardTitle as ShadcnCardTitle,\n} from \"@/components/ui/card\";\n\nimport \"./styles/retro.css\";\n\nexport const cardVariants = cva(\"\", {\n variants: {\n font: {\n normal: \"\",\n retro: \"retro\",\n },\n },\n defaultVariants: {\n font: \"retro\",\n },\n});\n\nexport interface BitCardProps\n extends React.ComponentProps<\"div\">,\n VariantProps {\n asChild?: boolean;\n}\n\nfunction Card({ ...props }: BitCardProps) {\n const { className, font } = props;\n\n return (\n \n \n\n \n
\n );\n}\n\nfunction CardHeader({ ...props }: BitCardProps) {\n const { className, font } = props;\n\n return (\n \n );\n}\n\nfunction CardTitle({ ...props }: BitCardProps) {\n const { className, font } = props;\n\n return (\n \n );\n}\n\nfunction CardDescription({ ...props }: BitCardProps) {\n const { className, font } = props;\n\n return (\n \n );\n}\n\nfunction CardAction({ ...props }: BitCardProps) {\n const { className, font } = props;\n\n return (\n \n );\n}\n\nfunction CardContent({ ...props }: BitCardProps) {\n const { className, font } = props;\n\n return (\n \n );\n}\n\nfunction CardFooter({ ...props }: BitCardProps) {\n const { className, font } = props;\n\n return (\n \n );\n}\n\nexport {\n Card,\n CardHeader,\n CardFooter,\n CardTitle,\n CardAction,\n CardDescription,\n CardContent,\n};\n", + "type": "registry:component", + "target": "components/ui/8bit/card.tsx" + }, + { + "path": "components/ui/8bit/input.tsx", + "content": "import { type VariantProps, cva } from \"class-variance-authority\";\n\nimport { cn } from \"@/lib/utils\";\n\nimport { Input as ShadcnInput } from \"@/components/ui/input\";\n\nimport \"./styles/retro.css\";\n\nexport const inputVariants = cva(\"\", {\n variants: {\n font: {\n normal: \"\",\n retro: \"retro\",\n },\n },\n defaultVariants: {\n font: \"retro\",\n },\n});\n\nexport interface BitInputProps\n extends React.InputHTMLAttributes,\n VariantProps {\n asChild?: boolean;\n}\n\nfunction Input({ ...props }: BitInputProps) {\n const { className, font } = props;\n\n return (\n \n \n\n \n
\n );\n}\n\nexport { Input };\n", + "type": "registry:component", + "target": "components/ui/8bit/input.tsx" + }, + { + "path": "components/ui/8bit/label.tsx", + "content": "\"use client\";\n\nimport * as React from \"react\";\n\nimport * as LabelPrimitive from \"@radix-ui/react-label\";\nimport { type VariantProps, cva } from \"class-variance-authority\";\n\nimport { cn } from \"@/lib/utils\";\n\nimport { Label as ShadcnLabel } from \"@/components/ui/label\";\n\nimport \"./styles/retro.css\";\n\nexport const inputVariants = cva(\"\", {\n variants: {\n font: {\n normal: \"\",\n retro: \"retro\",\n },\n },\n defaultVariants: {\n font: \"retro\",\n },\n});\n\ninterface BitLabelProps\n extends React.ComponentProps,\n VariantProps {\n asChild?: boolean;\n}\n\nfunction Label({ className, font, ...props }: BitLabelProps) {\n return (\n \n );\n}\n\nexport { Label };\n", + "type": "registry:component", + "target": "components/ui/8bit/label.tsx" + }, + { + "path": "components/ui/8bit/styles/retro.css", + "content": "@import url(\"https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap\");\n\n.retro {\n font-family:\n \"Press Start 2P\",\n system-ui,\n -apple-system,\n sans-serif;\n line-height: 1.5;\n letter-spacing: 0.5px;\n}\n", + "type": "registry:component", + "target": "components/ui/8bit/styles/retro.css" + } + ] +} \ No newline at end of file diff --git a/public/r/signup-form-with-image.json b/public/r/signup-form-with-image.json new file mode 100644 index 0000000..d7917e6 --- /dev/null +++ b/public/r/signup-form-with-image.json @@ -0,0 +1,51 @@ +{ + "$schema": "https://ui.shadcn.com/schema/registry-item.json", + "name": "signup-form-with-image", + "type": "registry:component", + "title": "8-bit Signup Form with Image", + "description": "A simple 8-bit signup form component with image", + "registryDependencies": [ + "button", + "card", + "input", + "label" + ], + "files": [ + { + "path": "components/ui/8bit/blocks/signup-form-with-image.tsx", + "content": "import { cn } from \"@/lib/utils\";\n\nimport { Button } from \"@/components/ui/8bit/button\";\nimport { Card, CardContent } from \"@/components/ui/8bit/card\";\nimport { Input } from \"@/components/ui/8bit/input\";\nimport { Label } from \"@/components/ui/8bit/label\";\n\nimport \"../styles/retro.css\";\n\nexport function SignupForm({\n className,\n ...props\n}: React.ComponentProps<\"div\">) {\n return (\n
\n \n \n \n
\n
\n
\n

Create your account

\n

\n Sign up for an Acme Inc account to get started\n

\n
\n
\n \n \n
\n
\n \n \n
\n \n
\n \n Or continue with\n \n
\n
\n \n \n \n
\n
\n Already have an account?{\" \"}\n \n Sign in\n \n
\n
\n
\n \n \n \n By clicking create account, you agree to our{\" \"}\n Terms of Service and Privacy Policy.\n

\n
\n );\n}\n", + "type": "registry:component", + "target": "components/ui/8bit/blocks/signup-form-with-image.tsx" + }, + { + "path": "components/ui/8bit/button.tsx", + "content": "import { type VariantProps, cva } from \"class-variance-authority\";\n\nimport { cn } from \"@/lib/utils\";\n\nimport { Button as ShadcnButton } from \"@/components/ui/button\";\n\nimport \"./styles/retro.css\";\n\nexport const buttonVariants = cva(\"\", {\n variants: {\n font: {\n normal: \"\",\n retro: \"retro\",\n },\n variant: {\n default: \"bg-foreground\",\n destructive: \"bg-foreground\",\n outline: \"bg-foreground\",\n secondary: \"bg-secondary text-secondary-foreground hover:bg-secondary/80\",\n ghost: \"hover:bg-accent hover:text-accent-foreground\",\n link: \"text-primary underline-offset-4 hover:underline\",\n },\n size: {\n default: \"h-9 px-4 py-2 has-[>svg]:px-3\",\n sm: \"h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5\",\n lg: \"h-10 rounded-md px-6 has-[>svg]:px-4\",\n icon: \"size-9\",\n },\n },\n defaultVariants: {\n variant: \"default\",\n size: \"default\",\n },\n});\n\nexport interface BitButtonProps\n extends React.ButtonHTMLAttributes,\n VariantProps {\n asChild?: boolean;\n ref?: React.Ref;\n}\n\nfunction Button({ children, asChild, ...props }: BitButtonProps) {\n const { variant, size, className, font } = props;\n\n return (\n \n {asChild ? (\n \n {children}\n\n {variant !== \"ghost\" && variant !== \"link\" && size !== \"icon\" && (\n <>\n {/* Pixelated border */}\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n {variant !== \"outline\" && (\n <>\n {/* Top shadow */}\n
\n
\n\n {/* Bottom shadow */}\n
\n
\n \n )}\n \n )}\n\n {size === \"icon\" && (\n <>\n
\n
\n
\n
\n
\n
\n \n )}\n \n ) : (\n <>\n {children}\n\n {variant !== \"ghost\" && variant !== \"link\" && size !== \"icon\" && (\n <>\n {/* Pixelated border */}\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n {variant !== \"outline\" && (\n <>\n {/* Top shadow */}\n
\n
\n\n {/* Bottom shadow */}\n
\n
\n \n )}\n \n )}\n\n {size === \"icon\" && (\n <>\n
\n
\n
\n
\n
\n
\n \n )}\n \n )}\n \n );\n}\n\nexport { Button };\n", + "type": "registry:component", + "target": "components/ui/8bit/button.tsx" + }, + { + "path": "components/ui/8bit/card.tsx", + "content": "import { type VariantProps, cva } from \"class-variance-authority\";\n\nimport { cn } from \"@/lib/utils\";\n\nimport {\n Card as ShadcnCard,\n CardAction as ShadcnCardAction,\n CardContent as ShadcnCardContent,\n CardDescription as ShadcnCardDescription,\n CardFooter as ShadcnCardFooter,\n CardHeader as ShadcnCardHeader,\n CardTitle as ShadcnCardTitle,\n} from \"@/components/ui/card\";\n\nimport \"./styles/retro.css\";\n\nexport const cardVariants = cva(\"\", {\n variants: {\n font: {\n normal: \"\",\n retro: \"retro\",\n },\n },\n defaultVariants: {\n font: \"retro\",\n },\n});\n\nexport interface BitCardProps\n extends React.ComponentProps<\"div\">,\n VariantProps {\n asChild?: boolean;\n}\n\nfunction Card({ ...props }: BitCardProps) {\n const { className, font } = props;\n\n return (\n \n \n\n \n
\n );\n}\n\nfunction CardHeader({ ...props }: BitCardProps) {\n const { className, font } = props;\n\n return (\n \n );\n}\n\nfunction CardTitle({ ...props }: BitCardProps) {\n const { className, font } = props;\n\n return (\n \n );\n}\n\nfunction CardDescription({ ...props }: BitCardProps) {\n const { className, font } = props;\n\n return (\n \n );\n}\n\nfunction CardAction({ ...props }: BitCardProps) {\n const { className, font } = props;\n\n return (\n \n );\n}\n\nfunction CardContent({ ...props }: BitCardProps) {\n const { className, font } = props;\n\n return (\n \n );\n}\n\nfunction CardFooter({ ...props }: BitCardProps) {\n const { className, font } = props;\n\n return (\n \n );\n}\n\nexport {\n Card,\n CardHeader,\n CardFooter,\n CardTitle,\n CardAction,\n CardDescription,\n CardContent,\n};\n", + "type": "registry:component", + "target": "components/ui/8bit/card.tsx" + }, + { + "path": "components/ui/8bit/input.tsx", + "content": "import { type VariantProps, cva } from \"class-variance-authority\";\n\nimport { cn } from \"@/lib/utils\";\n\nimport { Input as ShadcnInput } from \"@/components/ui/input\";\n\nimport \"./styles/retro.css\";\n\nexport const inputVariants = cva(\"\", {\n variants: {\n font: {\n normal: \"\",\n retro: \"retro\",\n },\n },\n defaultVariants: {\n font: \"retro\",\n },\n});\n\nexport interface BitInputProps\n extends React.InputHTMLAttributes,\n VariantProps {\n asChild?: boolean;\n}\n\nfunction Input({ ...props }: BitInputProps) {\n const { className, font } = props;\n\n return (\n \n \n\n \n
\n );\n}\n\nexport { Input };\n", + "type": "registry:component", + "target": "components/ui/8bit/input.tsx" + }, + { + "path": "components/ui/8bit/label.tsx", + "content": "\"use client\";\n\nimport * as React from \"react\";\n\nimport * as LabelPrimitive from \"@radix-ui/react-label\";\nimport { type VariantProps, cva } from \"class-variance-authority\";\n\nimport { cn } from \"@/lib/utils\";\n\nimport { Label as ShadcnLabel } from \"@/components/ui/label\";\n\nimport \"./styles/retro.css\";\n\nexport const inputVariants = cva(\"\", {\n variants: {\n font: {\n normal: \"\",\n retro: \"retro\",\n },\n },\n defaultVariants: {\n font: \"retro\",\n },\n});\n\ninterface BitLabelProps\n extends React.ComponentProps,\n VariantProps {\n asChild?: boolean;\n}\n\nfunction Label({ className, font, ...props }: BitLabelProps) {\n return (\n \n );\n}\n\nexport { Label };\n", + "type": "registry:component", + "target": "components/ui/8bit/label.tsx" + }, + { + "path": "components/ui/8bit/styles/retro.css", + "content": "@import url(\"https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap\");\n\n.retro {\n font-family:\n \"Press Start 2P\",\n system-ui,\n -apple-system,\n sans-serif;\n line-height: 1.5;\n letter-spacing: 0.5px;\n}\n", + "type": "registry:component", + "target": "components/ui/8bit/styles/retro.css" + } + ] +} \ No newline at end of file diff --git a/public/r/signup-form.json b/public/r/signup-form.json new file mode 100644 index 0000000..e85cc77 --- /dev/null +++ b/public/r/signup-form.json @@ -0,0 +1,51 @@ +{ + "$schema": "https://ui.shadcn.com/schema/registry-item.json", + "name": "signup-form", + "type": "registry:component", + "title": "8-bit Signup Form", + "description": "A simple 8-bit signup form component", + "registryDependencies": [ + "button", + "card", + "input", + "label" + ], + "files": [ + { + "path": "components/ui/8bit/blocks/signup-form.tsx", + "content": "import { cn } from \"@/lib/utils\";\n\nimport { Button } from \"@/components/ui/8bit/button\";\nimport {\n Card,\n CardContent,\n CardDescription,\n CardHeader,\n CardTitle,\n} from \"@/components/ui/8bit/card\";\nimport { Input } from \"@/components/ui/8bit/input\";\nimport { Label } from \"@/components/ui/8bit/label\";\n\nexport function SignupForm({\n className,\n ...props\n}: React.ComponentPropsWithoutRef<\"div\">) {\n return (\n
\n \n \n Sign up\n \n Enter your email and choose a password to create your account\n \n \n \n
\n
\n
\n \n \n
\n
\n \n \n
\n \n \n
\n
\n Already have an account?{\" \"}\n \n Log in\n \n
\n
\n \n \n
\n );\n}\n", + "type": "registry:component", + "target": "components/ui/8bit/blocks/signup-form.tsx" + }, + { + "path": "components/ui/8bit/button.tsx", + "content": "import { type VariantProps, cva } from \"class-variance-authority\";\n\nimport { cn } from \"@/lib/utils\";\n\nimport { Button as ShadcnButton } from \"@/components/ui/button\";\n\nimport \"./styles/retro.css\";\n\nexport const buttonVariants = cva(\"\", {\n variants: {\n font: {\n normal: \"\",\n retro: \"retro\",\n },\n variant: {\n default: \"bg-foreground\",\n destructive: \"bg-foreground\",\n outline: \"bg-foreground\",\n secondary: \"bg-secondary text-secondary-foreground hover:bg-secondary/80\",\n ghost: \"hover:bg-accent hover:text-accent-foreground\",\n link: \"text-primary underline-offset-4 hover:underline\",\n },\n size: {\n default: \"h-9 px-4 py-2 has-[>svg]:px-3\",\n sm: \"h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5\",\n lg: \"h-10 rounded-md px-6 has-[>svg]:px-4\",\n icon: \"size-9\",\n },\n },\n defaultVariants: {\n variant: \"default\",\n size: \"default\",\n },\n});\n\nexport interface BitButtonProps\n extends React.ButtonHTMLAttributes,\n VariantProps {\n asChild?: boolean;\n ref?: React.Ref;\n}\n\nfunction Button({ children, asChild, ...props }: BitButtonProps) {\n const { variant, size, className, font } = props;\n\n return (\n \n {asChild ? (\n \n {children}\n\n {variant !== \"ghost\" && variant !== \"link\" && size !== \"icon\" && (\n <>\n {/* Pixelated border */}\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n {variant !== \"outline\" && (\n <>\n {/* Top shadow */}\n
\n
\n\n {/* Bottom shadow */}\n
\n
\n \n )}\n \n )}\n\n {size === \"icon\" && (\n <>\n
\n
\n
\n
\n
\n
\n \n )}\n \n ) : (\n <>\n {children}\n\n {variant !== \"ghost\" && variant !== \"link\" && size !== \"icon\" && (\n <>\n {/* Pixelated border */}\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n {variant !== \"outline\" && (\n <>\n {/* Top shadow */}\n
\n
\n\n {/* Bottom shadow */}\n
\n
\n \n )}\n \n )}\n\n {size === \"icon\" && (\n <>\n
\n
\n
\n
\n
\n
\n \n )}\n \n )}\n \n );\n}\n\nexport { Button };\n", + "type": "registry:component", + "target": "components/ui/8bit/button.tsx" + }, + { + "path": "components/ui/8bit/card.tsx", + "content": "import { type VariantProps, cva } from \"class-variance-authority\";\n\nimport { cn } from \"@/lib/utils\";\n\nimport {\n Card as ShadcnCard,\n CardAction as ShadcnCardAction,\n CardContent as ShadcnCardContent,\n CardDescription as ShadcnCardDescription,\n CardFooter as ShadcnCardFooter,\n CardHeader as ShadcnCardHeader,\n CardTitle as ShadcnCardTitle,\n} from \"@/components/ui/card\";\n\nimport \"./styles/retro.css\";\n\nexport const cardVariants = cva(\"\", {\n variants: {\n font: {\n normal: \"\",\n retro: \"retro\",\n },\n },\n defaultVariants: {\n font: \"retro\",\n },\n});\n\nexport interface BitCardProps\n extends React.ComponentProps<\"div\">,\n VariantProps {\n asChild?: boolean;\n}\n\nfunction Card({ ...props }: BitCardProps) {\n const { className, font } = props;\n\n return (\n \n \n\n \n
\n );\n}\n\nfunction CardHeader({ ...props }: BitCardProps) {\n const { className, font } = props;\n\n return (\n \n );\n}\n\nfunction CardTitle({ ...props }: BitCardProps) {\n const { className, font } = props;\n\n return (\n \n );\n}\n\nfunction CardDescription({ ...props }: BitCardProps) {\n const { className, font } = props;\n\n return (\n \n );\n}\n\nfunction CardAction({ ...props }: BitCardProps) {\n const { className, font } = props;\n\n return (\n \n );\n}\n\nfunction CardContent({ ...props }: BitCardProps) {\n const { className, font } = props;\n\n return (\n \n );\n}\n\nfunction CardFooter({ ...props }: BitCardProps) {\n const { className, font } = props;\n\n return (\n \n );\n}\n\nexport {\n Card,\n CardHeader,\n CardFooter,\n CardTitle,\n CardAction,\n CardDescription,\n CardContent,\n};\n", + "type": "registry:component", + "target": "components/ui/8bit/card.tsx" + }, + { + "path": "components/ui/8bit/input.tsx", + "content": "import { type VariantProps, cva } from \"class-variance-authority\";\n\nimport { cn } from \"@/lib/utils\";\n\nimport { Input as ShadcnInput } from \"@/components/ui/input\";\n\nimport \"./styles/retro.css\";\n\nexport const inputVariants = cva(\"\", {\n variants: {\n font: {\n normal: \"\",\n retro: \"retro\",\n },\n },\n defaultVariants: {\n font: \"retro\",\n },\n});\n\nexport interface BitInputProps\n extends React.InputHTMLAttributes,\n VariantProps {\n asChild?: boolean;\n}\n\nfunction Input({ ...props }: BitInputProps) {\n const { className, font } = props;\n\n return (\n \n \n\n \n
\n );\n}\n\nexport { Input };\n", + "type": "registry:component", + "target": "components/ui/8bit/input.tsx" + }, + { + "path": "components/ui/8bit/label.tsx", + "content": "\"use client\";\n\nimport * as React from \"react\";\n\nimport * as LabelPrimitive from \"@radix-ui/react-label\";\nimport { type VariantProps, cva } from \"class-variance-authority\";\n\nimport { cn } from \"@/lib/utils\";\n\nimport { Label as ShadcnLabel } from \"@/components/ui/label\";\n\nimport \"./styles/retro.css\";\n\nexport const inputVariants = cva(\"\", {\n variants: {\n font: {\n normal: \"\",\n retro: \"retro\",\n },\n },\n defaultVariants: {\n font: \"retro\",\n },\n});\n\ninterface BitLabelProps\n extends React.ComponentProps,\n VariantProps {\n asChild?: boolean;\n}\n\nfunction Label({ className, font, ...props }: BitLabelProps) {\n return (\n \n );\n}\n\nexport { Label };\n", + "type": "registry:component", + "target": "components/ui/8bit/label.tsx" + }, + { + "path": "components/ui/8bit/styles/retro.css", + "content": "@import url(\"https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap\");\n\n.retro {\n font-family:\n \"Press Start 2P\",\n system-ui,\n -apple-system,\n sans-serif;\n line-height: 1.5;\n letter-spacing: 0.5px;\n}\n", + "type": "registry:component", + "target": "components/ui/8bit/styles/retro.css" + } + ] +} \ No newline at end of file diff --git a/public/r/signup-page.json b/public/r/signup-page.json new file mode 100644 index 0000000..5490ad5 --- /dev/null +++ b/public/r/signup-page.json @@ -0,0 +1,57 @@ +{ + "$schema": "https://ui.shadcn.com/schema/registry-item.json", + "name": "signup-page", + "type": "registry:component", + "title": "8-bit Signup Page", + "description": "A simple 8-bit signup page component", + "registryDependencies": [ + "button", + "card", + "input", + "label" + ], + "files": [ + { + "path": "app/signup/page.tsx", + "content": "import { GalleryVerticalEnd } from \"lucide-react\";\n\nimport { SignupForm } from \"@/components/ui/8bit/blocks/signup-form\";\n\nexport default function SignupPage() {\n return (\n
\n \n
\n \n
\n
\n \n
\n
\n
\n
\n );\n}\n", + "type": "registry:component", + "target": "app/signup/page.tsx" + }, + { + "path": "components/ui/8bit/blocks/signup-form.tsx", + "content": "import { cn } from \"@/lib/utils\";\n\nimport { Button } from \"@/components/ui/8bit/button\";\nimport {\n Card,\n CardContent,\n CardDescription,\n CardHeader,\n CardTitle,\n} from \"@/components/ui/8bit/card\";\nimport { Input } from \"@/components/ui/8bit/input\";\nimport { Label } from \"@/components/ui/8bit/label\";\n\nexport function SignupForm({\n className,\n ...props\n}: React.ComponentPropsWithoutRef<\"div\">) {\n return (\n
\n \n \n Sign up\n \n Enter your email and choose a password to create your account\n \n \n \n
\n
\n
\n \n \n
\n
\n \n \n
\n \n \n
\n
\n Already have an account?{\" \"}\n \n Log in\n \n
\n
\n \n \n
\n );\n}\n", + "type": "registry:component", + "target": "components/ui/8bit/blocks/signup-form.tsx" + }, + { + "path": "components/ui/8bit/button.tsx", + "content": "import { type VariantProps, cva } from \"class-variance-authority\";\n\nimport { cn } from \"@/lib/utils\";\n\nimport { Button as ShadcnButton } from \"@/components/ui/button\";\n\nimport \"./styles/retro.css\";\n\nexport const buttonVariants = cva(\"\", {\n variants: {\n font: {\n normal: \"\",\n retro: \"retro\",\n },\n variant: {\n default: \"bg-foreground\",\n destructive: \"bg-foreground\",\n outline: \"bg-foreground\",\n secondary: \"bg-secondary text-secondary-foreground hover:bg-secondary/80\",\n ghost: \"hover:bg-accent hover:text-accent-foreground\",\n link: \"text-primary underline-offset-4 hover:underline\",\n },\n size: {\n default: \"h-9 px-4 py-2 has-[>svg]:px-3\",\n sm: \"h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5\",\n lg: \"h-10 rounded-md px-6 has-[>svg]:px-4\",\n icon: \"size-9\",\n },\n },\n defaultVariants: {\n variant: \"default\",\n size: \"default\",\n },\n});\n\nexport interface BitButtonProps\n extends React.ButtonHTMLAttributes,\n VariantProps {\n asChild?: boolean;\n ref?: React.Ref;\n}\n\nfunction Button({ children, asChild, ...props }: BitButtonProps) {\n const { variant, size, className, font } = props;\n\n return (\n \n {asChild ? (\n \n {children}\n\n {variant !== \"ghost\" && variant !== \"link\" && size !== \"icon\" && (\n <>\n {/* Pixelated border */}\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n {variant !== \"outline\" && (\n <>\n {/* Top shadow */}\n
\n
\n\n {/* Bottom shadow */}\n
\n
\n \n )}\n \n )}\n\n {size === \"icon\" && (\n <>\n
\n
\n
\n
\n
\n
\n \n )}\n \n ) : (\n <>\n {children}\n\n {variant !== \"ghost\" && variant !== \"link\" && size !== \"icon\" && (\n <>\n {/* Pixelated border */}\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n {variant !== \"outline\" && (\n <>\n {/* Top shadow */}\n
\n
\n\n {/* Bottom shadow */}\n
\n
\n \n )}\n \n )}\n\n {size === \"icon\" && (\n <>\n
\n
\n
\n
\n
\n
\n \n )}\n \n )}\n \n );\n}\n\nexport { Button };\n", + "type": "registry:component", + "target": "components/ui/8bit/button.tsx" + }, + { + "path": "components/ui/8bit/card.tsx", + "content": "import { type VariantProps, cva } from \"class-variance-authority\";\n\nimport { cn } from \"@/lib/utils\";\n\nimport {\n Card as ShadcnCard,\n CardAction as ShadcnCardAction,\n CardContent as ShadcnCardContent,\n CardDescription as ShadcnCardDescription,\n CardFooter as ShadcnCardFooter,\n CardHeader as ShadcnCardHeader,\n CardTitle as ShadcnCardTitle,\n} from \"@/components/ui/card\";\n\nimport \"./styles/retro.css\";\n\nexport const cardVariants = cva(\"\", {\n variants: {\n font: {\n normal: \"\",\n retro: \"retro\",\n },\n },\n defaultVariants: {\n font: \"retro\",\n },\n});\n\nexport interface BitCardProps\n extends React.ComponentProps<\"div\">,\n VariantProps {\n asChild?: boolean;\n}\n\nfunction Card({ ...props }: BitCardProps) {\n const { className, font } = props;\n\n return (\n \n \n\n \n
\n );\n}\n\nfunction CardHeader({ ...props }: BitCardProps) {\n const { className, font } = props;\n\n return (\n \n );\n}\n\nfunction CardTitle({ ...props }: BitCardProps) {\n const { className, font } = props;\n\n return (\n \n );\n}\n\nfunction CardDescription({ ...props }: BitCardProps) {\n const { className, font } = props;\n\n return (\n \n );\n}\n\nfunction CardAction({ ...props }: BitCardProps) {\n const { className, font } = props;\n\n return (\n \n );\n}\n\nfunction CardContent({ ...props }: BitCardProps) {\n const { className, font } = props;\n\n return (\n \n );\n}\n\nfunction CardFooter({ ...props }: BitCardProps) {\n const { className, font } = props;\n\n return (\n \n );\n}\n\nexport {\n Card,\n CardHeader,\n CardFooter,\n CardTitle,\n CardAction,\n CardDescription,\n CardContent,\n};\n", + "type": "registry:component", + "target": "components/ui/8bit/card.tsx" + }, + { + "path": "components/ui/8bit/input.tsx", + "content": "import { type VariantProps, cva } from \"class-variance-authority\";\n\nimport { cn } from \"@/lib/utils\";\n\nimport { Input as ShadcnInput } from \"@/components/ui/input\";\n\nimport \"./styles/retro.css\";\n\nexport const inputVariants = cva(\"\", {\n variants: {\n font: {\n normal: \"\",\n retro: \"retro\",\n },\n },\n defaultVariants: {\n font: \"retro\",\n },\n});\n\nexport interface BitInputProps\n extends React.InputHTMLAttributes,\n VariantProps {\n asChild?: boolean;\n}\n\nfunction Input({ ...props }: BitInputProps) {\n const { className, font } = props;\n\n return (\n \n \n\n \n
\n );\n}\n\nexport { Input };\n", + "type": "registry:component", + "target": "components/ui/8bit/input.tsx" + }, + { + "path": "components/ui/8bit/label.tsx", + "content": "\"use client\";\n\nimport * as React from \"react\";\n\nimport * as LabelPrimitive from \"@radix-ui/react-label\";\nimport { type VariantProps, cva } from \"class-variance-authority\";\n\nimport { cn } from \"@/lib/utils\";\n\nimport { Label as ShadcnLabel } from \"@/components/ui/label\";\n\nimport \"./styles/retro.css\";\n\nexport const inputVariants = cva(\"\", {\n variants: {\n font: {\n normal: \"\",\n retro: \"retro\",\n },\n },\n defaultVariants: {\n font: \"retro\",\n },\n});\n\ninterface BitLabelProps\n extends React.ComponentProps,\n VariantProps {\n asChild?: boolean;\n}\n\nfunction Label({ className, font, ...props }: BitLabelProps) {\n return (\n \n );\n}\n\nexport { Label };\n", + "type": "registry:component", + "target": "components/ui/8bit/label.tsx" + }, + { + "path": "components/ui/8bit/styles/retro.css", + "content": "@import url(\"https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap\");\n\n.retro {\n font-family:\n \"Press Start 2P\",\n system-ui,\n -apple-system,\n sans-serif;\n line-height: 1.5;\n letter-spacing: 0.5px;\n}\n", + "type": "registry:component", + "target": "components/ui/8bit/styles/retro.css" + } + ] +} \ No newline at end of file diff --git a/registry.json b/registry.json index 44b6ed8..80c61ed 100644 --- a/registry.json +++ b/registry.json @@ -1789,6 +1789,201 @@ "target": "components/ui/8bit/styles/retro.css" } ] + }, + { + "name": "signup-form", + "type": "registry:component", + "title": "8-bit Signup Form", + "description": "A simple 8-bit signup form component", + "registryDependencies": ["button", "card", "input", "label"], + "files": [ + { + "path": "components/ui/8bit/blocks/signup-form.tsx", + "type": "registry:component", + "target": "components/ui/8bit/blocks/signup-form.tsx" + }, + { + "path": "components/ui/8bit/button.tsx", + "type": "registry:component", + "target": "components/ui/8bit/button.tsx" + }, + { + "path": "components/ui/8bit/card.tsx", + "type": "registry:component", + "target": "components/ui/8bit/card.tsx" + }, + { + "path": "components/ui/8bit/input.tsx", + "type": "registry:component", + "target": "components/ui/8bit/input.tsx" + }, + { + "path": "components/ui/8bit/label.tsx", + "type": "registry:component", + "target": "components/ui/8bit/label.tsx" + }, + { + "path": "components/ui/8bit/styles/retro.css", + "type": "registry:component", + "target": "components/ui/8bit/styles/retro.css" + } + ] + }, + { + "name": "signup-page", + "type": "registry:component", + "title": "8-bit Signup Page", + "description": "A simple 8-bit signup page component", + "registryDependencies": ["button", "card", "input", "label"], + "files": [ + { + "path": "app/signup/page.tsx", + "type": "registry:component", + "target": "app/signup/page.tsx" + }, + { + "path": "components/ui/8bit/blocks/signup-form.tsx", + "type": "registry:component", + "target": "components/ui/8bit/blocks/signup-form.tsx" + }, + { + "path": "components/ui/8bit/button.tsx", + "type": "registry:component", + "target": "components/ui/8bit/button.tsx" + }, + { + "path": "components/ui/8bit/card.tsx", + "type": "registry:component", + "target": "components/ui/8bit/card.tsx" + }, + { + "path": "components/ui/8bit/input.tsx", + "type": "registry:component", + "target": "components/ui/8bit/input.tsx" + }, + { + "path": "components/ui/8bit/label.tsx", + "type": "registry:component", + "target": "components/ui/8bit/label.tsx" + }, + { + "path": "components/ui/8bit/styles/retro.css", + "type": "registry:component", + "target": "components/ui/8bit/styles/retro.css" + } + ] + }, + { + "name": "signup-form-2", + "type": "registry:component", + "title": "8-bit Signup Form 2", + "description": "A simple 8-bit signup form component", + "registryDependencies": ["button", "card", "input", "label"], + "files": [ + { + "path": "components/ui/8bit/blocks/signup-form-2.tsx", + "type": "registry:component", + "target": "components/ui/8bit/blocks/signup-form-2.tsx" + }, + { + "path": "components/ui/8bit/button.tsx", + "type": "registry:component", + "target": "components/ui/8bit/button.tsx" + }, + { + "path": "components/ui/8bit/card.tsx", + "type": "registry:component", + "target": "components/ui/8bit/card.tsx" + }, + { + "path": "components/ui/8bit/input.tsx", + "type": "registry:component", + "target": "components/ui/8bit/input.tsx" + }, + { + "path": "components/ui/8bit/label.tsx", + "type": "registry:component", + "target": "components/ui/8bit/label.tsx" + }, + { + "path": "components/ui/8bit/styles/retro.css", + "type": "registry:component", + "target": "components/ui/8bit/styles/retro.css" + } + ] + }, + { + "name": "signup-form-with-image", + "type": "registry:component", + "title": "8-bit Signup Form with Image", + "description": "A simple 8-bit signup form component with image", + "registryDependencies": ["button", "card", "input", "label"], + "files": [ + { + "path": "components/ui/8bit/blocks/signup-form-with-image.tsx", + "type": "registry:component", + "target": "components/ui/8bit/blocks/signup-form-with-image.tsx" + }, + { + "path": "components/ui/8bit/button.tsx", + "type": "registry:component", + "target": "components/ui/8bit/button.tsx" + }, + { + "path": "components/ui/8bit/card.tsx", + "type": "registry:component", + "target": "components/ui/8bit/card.tsx" + }, + { + "path": "components/ui/8bit/input.tsx", + "type": "registry:component", + "target": "components/ui/8bit/input.tsx" + }, + { + "path": "components/ui/8bit/label.tsx", + "type": "registry:component", + "target": "components/ui/8bit/label.tsx" + }, + { + "path": "components/ui/8bit/styles/retro.css", + "type": "registry:component", + "target": "components/ui/8bit/styles/retro.css" + } + ] + }, + { + "name": "email-only-login-form", + "type": "registry:component", + "title": "8-bit Email Only Login Form", + "description": "A simple 8-bit email only login form component", + "registryDependencies": ["button", "input", "label"], + "files": [ + { + "path": "components/ui/8bit/blocks/email-only-login-form.tsx", + "type": "registry:component", + "target": "components/ui/8bit/blocks/email-only-login-form.tsx" + }, + { + "path": "components/ui/8bit/button.tsx", + "type": "registry:component", + "target": "components/ui/8bit/button.tsx" + }, + { + "path": "components/ui/8bit/input.tsx", + "type": "registry:component", + "target": "components/ui/8bit/input.tsx" + }, + { + "path": "components/ui/8bit/label.tsx", + "type": "registry:component", + "target": "components/ui/8bit/label.tsx" + }, + { + "path": "components/ui/8bit/styles/retro.css", + "type": "registry:component", + "target": "components/ui/8bit/styles/retro.css" + } + ] } ] }