diff --git a/app/code/[id]/page.tsx b/app/code/[id]/page.tsx index 28f81c0..ca464dc 100644 --- a/app/code/[id]/page.tsx +++ b/app/code/[id]/page.tsx @@ -1,6 +1,6 @@ "use client" -import Navbar from "@/components/navbar" +import Navbar from "@/components/editor/navbar" import { useClerk } from "@clerk/nextjs" import dynamic from "next/dynamic" diff --git a/app/dashboard/page.tsx b/app/dashboard/page.tsx new file mode 100644 index 0000000..81ed9d2 --- /dev/null +++ b/app/dashboard/page.tsx @@ -0,0 +1,19 @@ +import { UserButton, currentUser } from "@clerk/nextjs" +import { redirect } from "next/navigation" +import Dashboard from "@/components/dashboard" +import Navbar from "@/components/dashboard/navbar" + +export default async function DashboardPage() { + const user = await currentUser() + + if (!user) { + redirect("/") + } + + return ( +
+ + +
+ ) +} diff --git a/app/globals.css b/app/globals.css index 69939b8..3635c1f 100644 --- a/app/globals.css +++ b/app/globals.css @@ -76,13 +76,13 @@ } .gradient-button-bg { - background: radial-gradient(circle at top, #a5b4fc, #3730a3); /* violet 300 -> 800 */ + background: radial-gradient(circle at top, #a5b4fc -25%, #3730a3 50%); /* violet 300 -> 800 */ } .gradient-button { - background: radial-gradient(circle at bottom, #312e81 0%, hsl(0 0% 3.9%) 100%); /* violet 900 -> bg */ + background: radial-gradient(circle at bottom, #312e81 0%, hsl(0 0% 3.9%) 80%); /* violet 900 -> bg */ } .gradient-button-bg > div:hover { - background: radial-gradient(circle at bottom, #312e81 0%, hsl(0 0% 3.9%) 150%); /* violet 900 -> bg */ + background: radial-gradient(circle at bottom, #312e81 0%, hsl(0 0% 3.9%) 130%); /* violet 900 -> bg */ } \ No newline at end of file diff --git a/components/dashboard/index.tsx b/components/dashboard/index.tsx new file mode 100644 index 0000000..7915ff0 --- /dev/null +++ b/components/dashboard/index.tsx @@ -0,0 +1,85 @@ +"use client" + +import CustomButton from "@/components/ui/customButton" +import { Button } from "@/components/ui/button" +import { + Bolt, + Code2, + FolderDot, + FolderOpenDot, + HelpCircle, + Plus, + Settings, + User, + Users, +} from "lucide-react" +import { useState } from "react" + +type TScreen = "projects" | "shared" | "settings" | "search" + +export default function Dashboard() { + const [screen, setScreen] = useState("projects") + + const activeScreen = (s: TScreen) => { + if (screen === s) return "justify-start" + else return "justify-start font-normal text-muted-foreground" + } + + return ( +
+
+
+ + + New Project + + + + +
+
+ + +
+
+
+

+ A Collaborative, AI-Powered, Auto-Scaling Code Editor +

+
+
+ ) +} diff --git a/components/dashboard/navbar/index.tsx b/components/dashboard/navbar/index.tsx new file mode 100644 index 0000000..d44ea82 --- /dev/null +++ b/components/dashboard/navbar/index.tsx @@ -0,0 +1,37 @@ +"use client" + +import { UserButton } from "@clerk/nextjs" +import { dark } from "@clerk/themes" +import Image from "next/image" +import Link from "next/link" +import Logo from "@/assets/logo.svg" +import { Input } from "../../ui/input" +import { Search } from "lucide-react" +import { Suspense, useCallback, useEffect, useState } from "react" +import { useRouter, useSearchParams } from "next/navigation" +import DashboardNavbarSearch from "./search" + +export default function DashboardNavbar() { + return ( +
+
+ + Logo + +
Sandbox
+
+
+ + +
+
+ ) +} diff --git a/components/dashboard/navbar/search.tsx b/components/dashboard/navbar/search.tsx new file mode 100644 index 0000000..6546de7 --- /dev/null +++ b/components/dashboard/navbar/search.tsx @@ -0,0 +1,36 @@ +"use client" + +import { Input } from "../../ui/input" +import { Search } from "lucide-react" +import { useCallback, useEffect, useState } from "react" +import { useRouter, useSearchParams } from "next/navigation" + +export default function DashboardNavbarSearch() { + const [search, setSearch] = useState("") + const router = useRouter() + + useEffect(() => { + const delayDebounceFn = setTimeout(() => { + console.log("SEARCH", search) + if (search) { + router.push(`/dashboard?q=${search}`) + } else { + router.push(`/dashboard`) + } + }, 300) + + return () => clearTimeout(delayDebounceFn) + }, [search]) + + return ( +
+ + setSearch(e.target.value)} + placeholder="Search projects..." + className="pl-8" + /> +
+ ) +} diff --git a/components/navbar/index.tsx b/components/editor/navbar/index.tsx similarity index 100% rename from components/navbar/index.tsx rename to components/editor/navbar/index.tsx diff --git a/components/ui/customButton.tsx b/components/ui/customButton.tsx index 55368cb..31ae6e5 100644 --- a/components/ui/customButton.tsx +++ b/components/ui/customButton.tsx @@ -1,44 +1,27 @@ import * as React from "react" -import { Slot } from "@radix-ui/react-slot" -import { cva, type VariantProps } from "class-variance-authority" - +import { Plus } from "lucide-react" 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", - { - variants: { - variant: { - default: - "bg-primary text-primary-foreground shadow hover:bg-primary/90", - destructive: - "bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90", - outline: - "border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground", - secondary: - "bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80", - ghost: "hover:bg-accent hover:text-accent-foreground", - link: "text-primary underline-offset-4 hover:underline", - }, - size: { - default: "h-9 px-4 py-2", - sm: "h-8 rounded-md px-3 text-xs", - lg: "h-10 rounded-md px-8", - icon: "h-9 w-9", - }, - }, - defaultVariants: { - variant: "default", - size: "default", - }, - } -) - -const Button = ({ children }: { children: React.ReactNode }) => { +const Button = ({ + children, + className, + onClick, +}: { + children: React.ReactNode + className?: string + onClick?: () => void +}) => { return ( - )