From e95ec216808d88d09d69ef468f10fad68c059bf7 Mon Sep 17 00:00:00 2001 From: Bereket Engida Date: Fri, 22 Nov 2024 10:23:06 +0300 Subject: [PATCH] wip --- docs/components/ac/focus-card.tsx | 64 ++ .../buidler/code-tabs/code-editor.tsx | 38 + .../buidler/code-tabs/code-tabs.tsx | 35 + docs/components/buidler/code-tabs/index.tsx | 88 +++ docs/components/buidler/code-tabs/tab-bar.tsx | 36 + docs/components/buidler/code-tabs/theme.ts | 79 ++ docs/components/buidler/index.tsx | 747 ++++++++++++++++-- docs/components/buidler/sign-in.tsx | 22 +- docs/components/buidler/tabs.tsx | 28 +- 9 files changed, 1019 insertions(+), 118 deletions(-) create mode 100644 docs/components/ac/focus-card.tsx create mode 100644 docs/components/buidler/code-tabs/code-editor.tsx create mode 100644 docs/components/buidler/code-tabs/code-tabs.tsx create mode 100644 docs/components/buidler/code-tabs/index.tsx create mode 100644 docs/components/buidler/code-tabs/tab-bar.tsx create mode 100644 docs/components/buidler/code-tabs/theme.ts diff --git a/docs/components/ac/focus-card.tsx b/docs/components/ac/focus-card.tsx new file mode 100644 index 0000000000..b316cdd231 --- /dev/null +++ b/docs/components/ac/focus-card.tsx @@ -0,0 +1,64 @@ +"use client"; +import Image from "next/image"; +import React, { useState } from "react"; +import { cn } from "@/lib/utils"; + +export const Card = React.memo( + ({ + card, + index, + hovered, + setHovered, + }: { + card: any; + index: number; + hovered: number | null; + setHovered: React.Dispatch>; + }) => ( +
setHovered(index)} + onMouseLeave={() => setHovered(null)} + className={cn( + "rounded-lg relative bg-gray-100 dark:bg-neutral-900 overflow-hidden h-60 md:h-96 w-full transition-all duration-300 ease-out", + hovered !== null && hovered !== index && "blur-sm scale-[0.98]", + )} + > + {card.children} +
+
+ {card.title} +
+
+
+ ), +); + +Card.displayName = "Card"; + +type Card = { + title: string; + children: string; +}; + +export function FocusCards({ cards }: { cards: Card[] }) { + const [hovered, setHovered] = useState(null); + + return ( +
+ {cards.map((card, index) => ( + + ))} +
+ ); +} diff --git a/docs/components/buidler/code-tabs/code-editor.tsx b/docs/components/buidler/code-tabs/code-editor.tsx new file mode 100644 index 0000000000..391ada5450 --- /dev/null +++ b/docs/components/buidler/code-tabs/code-editor.tsx @@ -0,0 +1,38 @@ +import React from "react"; +import { Highlight, HighlightProps, themes } from "prism-react-renderer"; +import theme from "./theme"; + +interface CodeEditorProps { + code: string; + language: string; +} + +export function CodeEditor({ code, language }: CodeEditorProps) { + return ( + + {({ className, style, tokens, getLineProps, getTokenProps }) => ( + 
+					{tokens.map((line, i) => (
+						

+							{i + 1}
+							{line.map((token, key) => (
+								
+							))}
+						

+					))}
+
+ )} + + ); +} diff --git a/docs/components/buidler/code-tabs/code-tabs.tsx b/docs/components/buidler/code-tabs/code-tabs.tsx new file mode 100644 index 0000000000..d62b4a7f15 --- /dev/null +++ b/docs/components/buidler/code-tabs/code-tabs.tsx @@ -0,0 +1,35 @@ +import React from "react"; +import { cn } from "@/lib/utils"; +import { X } from "lucide-react"; + +interface TabProps { + fileName: string; + isActive: boolean; + onClick: () => void; + onClose: () => void; +} + +export function CodeTab({ fileName, isActive, onClick, onClose }: TabProps) { + return ( +
+ {fileName} + +
+ ); +} diff --git a/docs/components/buidler/code-tabs/index.tsx b/docs/components/buidler/code-tabs/index.tsx new file mode 100644 index 0000000000..1387717f42 --- /dev/null +++ b/docs/components/buidler/code-tabs/index.tsx @@ -0,0 +1,88 @@ +import React, { useState } from "react"; +import { TabBar } from "./tab-bar"; +import { CodeEditor } from "./code-editor"; + +const initialFiles = [ + { + id: "1", + name: "index.ts", + content: `import express from 'express'; + +const app = express(); +const port = 3000; + +app.get('/', (req, res) => { + res.send('Hello, TypeScript!'); +}); + +app.listen(port, () => { + console.log(\`Server running at http://localhost:\${port}\`); +});`, + }, + { + id: "2", + name: "utils.ts", + content: `export function add(a: number, b: number): number { + return a + b; +} + +export function multiply(a: number, b: number): number { + return a * b; +} + +export function capitalize(str: string): string { + return str.charAt(0).toUpperCase() + str.slice(1); +}`, + }, + { + id: "3", + name: "types.ts", + content: `export interface User { + id: number; + name: string; + email: string; +} + +export type Status = 'active' | 'inactive' | 'pending'; + +export enum Role { + Admin = 'ADMIN', + User = 'USER', + Guest = 'GUEST' +}`, + }, +]; + +export default function CodeTabs() { + const [files, setFiles] = useState(initialFiles); + const [activeFileId, setActiveFileId] = useState(files[0].id); + + const handleTabClick = (fileId: string) => { + setActiveFileId(fileId); + }; + + const handleTabClose = (fileId: string) => { + setFiles(files.filter((file) => file.id !== fileId)); + if (activeFileId === fileId) { + setActiveFileId(files[0].id); + } + }; + + const activeFile = files.find((file) => file.id === activeFileId); + + return ( +
+ +
+ {activeFile && ( + + )} +
+
+ ); +} diff --git a/docs/components/buidler/code-tabs/tab-bar.tsx b/docs/components/buidler/code-tabs/tab-bar.tsx new file mode 100644 index 0000000000..4905c65ff2 --- /dev/null +++ b/docs/components/buidler/code-tabs/tab-bar.tsx @@ -0,0 +1,36 @@ +import React from "react"; +import { CodeTab } from "./code-tabs"; + +interface File { + id: string; + name: string; + content: string; +} + +interface TabBarProps { + files: File[]; + activeFileId: string; + onTabClick: (fileId: string) => void; + onTabClose: (fileId: string) => void; +} + +export function TabBar({ + files, + activeFileId, + onTabClick, + onTabClose, +}: TabBarProps) { + return ( +
+ {files.map((file) => ( + onTabClick(file.id)} + onClose={() => onTabClose(file.id)} + /> + ))} +
+ ); +} diff --git a/docs/components/buidler/code-tabs/theme.ts b/docs/components/buidler/code-tabs/theme.ts new file mode 100644 index 0000000000..21d1db2ae0 --- /dev/null +++ b/docs/components/buidler/code-tabs/theme.ts @@ -0,0 +1,79 @@ +import { PrismTheme } from "prism-react-renderer"; + +const theme: PrismTheme = { + plain: { + color: "#e0e0e0", + backgroundColor: "#1a1a1a", + }, + styles: [ + { + types: ["comment", "prolog", "doctype", "cdata"], + style: { + color: "#999999", + fontStyle: "italic", + }, + }, + { + types: ["namespace"], + style: { + opacity: 0.7, + }, + }, + { + types: ["string", "attr-value"], + style: { + color: "#a3d9ff", // Soft blue for strings + }, + }, + { + types: ["punctuation", "operator"], + style: { + color: "#cccccc", + }, + }, + { + types: [ + "entity", + "url", + "symbol", + "number", + "boolean", + "variable", + "constant", + "property", + "regex", + "inserted", + ], + style: { + color: "#b3b3b3", + }, + }, + { + types: ["atrule", "keyword", "attr-name", "selector"], + style: { + color: "#e6e6e6", + fontWeight: "bold", // Bold for keywords + }, + }, + { + types: ["function", "deleted", "tag"], + style: { + color: "#70c0ff", // Soft blue for functions + }, + }, + { + types: ["function-variable"], + style: { + color: "#a6a6a6", + }, + }, + { + types: ["tag", "selector", "keyword"], + style: { + color: "#f0f0f0", + }, + }, + ], +}; + +export default theme; diff --git a/docs/components/buidler/index.tsx b/docs/components/buidler/index.tsx index 79ca15bfcf..8dcc1807cb 100644 --- a/docs/components/buidler/index.tsx +++ b/docs/components/buidler/index.tsx @@ -1,12 +1,4 @@ -import { - Code, - Layout, - LayoutDashboard, - Mail, - PhoneCall, - PlusIcon, - Users, -} from "lucide-react"; +import { ChevronLeft, Copy, Mail, PlusIcon } from "lucide-react"; import { Dialog, DialogContent, @@ -22,18 +14,415 @@ import { 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"; +import { useState } from "react"; +import CodeTabs from "./code-tabs"; +import { cn } from "@/lib/utils"; + +const frameworks = [ + { + title: "Next.js", + description: "The React Framework for Production", + Icon: () => ( + + + + ), + }, + { + title: "Nuxt", + description: "The Intuitive Vue Framework", + Icon: () => ( + + + + + + + ), + }, + { + title: "Svelte Kit", + description: "Web development for the rest of us", + Icon: () => ( + + + + + + + + + + + + + + + ), + }, + { + title: "Solid Start", + description: "Fine-grained reactivity goes fullstack", + Icon: () => ( + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + ), + }, +]; export function Builder() { - const enabledComp = {}; + const socialProviders = { + apple: { + Icon: () => ( + + + + ), + }, + dropbox: { + Icon: () => ( + + + + + + + ), + }, + discord: { + Icon: () => ( + + + + ), + }, + facebook: { + Icon: () => ( + + + + ), + }, + github: { + Icon: () => ( + + + + ), + }, + gitlab: { + Icon: () => ( + + + + ), + }, + google: { + Icon: () => ( + + + + ), + }, + linkedin: { + Icon: () => ( + + + + ), + }, + microsoft: { + Icon: () => ( + + + + ), + }, + twitch: { + Icon: () => ( + + + + ), + }, + spotify: { + Icon: () => ( + + + + ), + }, + x: { + Icon: () => ( + + + + ), + }, + }; + + const [currentStep, setCurrentStep] = useState(0); return ( @@ -48,7 +437,7 @@ export function Builder() { - + Create Sign in Box @@ -57,7 +446,7 @@ export function Builder() { -
+
-
- - - Configuration - - -
-
- -
- -
-
- - -
- -
-
-
- - -
- -
-
-
- - -
- -
-
-
- - - - -
- + +
+ {currentStep === 0 ? ( + + + Configuration + + +
+
+ +
+ +
+
+ + +
+ +
+
+
+ + + + +
+ +
+
+
+ +
+ +
+
+
+ +
+ +
+
+
+
+ +
+ + {Object.entries(socialProviders).map( + ([provider, { Icon }]) => ( +
+
+ +
+
- - - - - - ), - }, - { - title: "code", - value: "auth.ts", - content:
, - }, - ]} - /> + ), + )} +
+
+
+ +
+ +
+
+ + + + +
+ +
+
+
+ + + + +
+ +
+
+
+ + + + +
+ +
+
+
+ + + + + + + +
+ +
+
+
+ + + + +
+ +
+
+ + + + + + ) : currentStep === 1 ? ( + + + Choose Framework + + + {frameworks.map((fm) => ( +
{ + if (fm.title === "Next.js") { + setCurrentStep(currentStep + 1); + } + }} + className={cn( + "flex flex-col items-center gap-4 border p-6 rounded-md w-5/12 flex-grow h-44 relative", + fm.title !== "Next.js" + ? "opacity-55" + : "hover:ring-1 transition-all ring-border hover:bg-background duration-200 ease-in-out cursor-pointer", + )} + key={fm.title} + > + {fm.title !== "Next.js" && ( + + Coming Soon + + )} + + +

{fm.description}

+
+ ))} + + + + + + + ) : ( + + + Code + + +
+

+ To use the sign in box in your application, copy the code + below and paste it in your application. +

+
+
+ +
+ + + )}
diff --git a/docs/components/buidler/sign-in.tsx b/docs/components/buidler/sign-in.tsx index c5dba3a5f6..4bf89e82c2 100644 --- a/docs/components/buidler/sign-in.tsx +++ b/docs/components/buidler/sign-in.tsx @@ -17,6 +17,7 @@ import { Key, Loader2 } from "lucide-react"; import Link from "next/link"; import { useRouter } from "next/navigation"; import { useState } from "react"; +import { Separator } from "../ui/separator"; export default function SignIn() { const [email, setEmail] = useState(""); @@ -82,6 +83,16 @@ export default function SignIn() { > {loading ? : "Login"} + + +
+ +

Continue with

+ +
-
- -
-

- Secured by better-auth. -

-
- ); } diff --git a/docs/components/buidler/tabs.tsx b/docs/components/buidler/tabs.tsx index 146a23bfec..caf2e23931 100644 --- a/docs/components/buidler/tabs.tsx +++ b/docs/components/buidler/tabs.tsx @@ -1,7 +1,6 @@ "use client"; import { useState } from "react"; -import { motion } from "framer-motion"; import { cn } from "@/lib/utils"; type Tab = { @@ -40,7 +39,7 @@ export const AuthTabs = ({ <>
@@ -56,21 +55,9 @@ export const AuthTabs = ({ "relative px-4 py-2 rounded-full opacity-80 hover:opacity-100", tabClassName, )} - style={{ - transformStyle: "preserve-3d", - }} > {active.value === tab.value && ( -
{tabs.map((tab, idx) => ( - {tab.content} - +
))}