dashboard ui
This commit is contained in:
parent
bb05dad34e
commit
8a64c69452
@ -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"
|
||||
|
||||
|
19
app/dashboard/page.tsx
Normal file
19
app/dashboard/page.tsx
Normal file
@ -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 (
|
||||
<div className="w-screen h-screen flex flex-col overflow-hidden overscroll-none">
|
||||
<Navbar />
|
||||
<Dashboard />
|
||||
</div>
|
||||
)
|
||||
}
|
@ -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 */
|
||||
}
|
85
components/dashboard/index.tsx
Normal file
85
components/dashboard/index.tsx
Normal file
@ -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<TScreen>("projects")
|
||||
|
||||
const activeScreen = (s: TScreen) => {
|
||||
if (screen === s) return "justify-start"
|
||||
else return "justify-start font-normal text-muted-foreground"
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="flex grow w-full">
|
||||
<div className="w-56 border-r border-border p-4 justify-between flex flex-col">
|
||||
<div className="flex flex-col">
|
||||
<CustomButton className="mb-4">
|
||||
<Plus className="w-4 h-4 mr-2" />
|
||||
New Project
|
||||
</CustomButton>
|
||||
<Button
|
||||
variant="ghost"
|
||||
onClick={() => setScreen("projects")}
|
||||
className={activeScreen("projects")}
|
||||
>
|
||||
<FolderDot className="w-4 h-4 mr-2" />
|
||||
My Projects
|
||||
</Button>
|
||||
<Button
|
||||
variant="ghost"
|
||||
onClick={() => setScreen("shared")}
|
||||
className={activeScreen("shared")}
|
||||
>
|
||||
<Users className="w-4 h-4 mr-2" />
|
||||
Shared Rooms
|
||||
</Button>
|
||||
<Button
|
||||
variant="ghost"
|
||||
onClick={() => setScreen("settings")}
|
||||
className={activeScreen("settings")}
|
||||
>
|
||||
<Settings className="w-4 h-4 mr-2" />
|
||||
Settings
|
||||
</Button>
|
||||
</div>
|
||||
<div className="flex flex-col">
|
||||
<Button
|
||||
variant="ghost"
|
||||
className="justify-start font-normal text-muted-foreground"
|
||||
>
|
||||
<Code2 className="w-4 h-4 mr-2" />
|
||||
GitHub Repository
|
||||
</Button>
|
||||
<Button
|
||||
variant="ghost"
|
||||
className="justify-start font-normal text-muted-foreground"
|
||||
>
|
||||
<HelpCircle className="w-4 h-4 mr-2" />
|
||||
About
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
<div className="grow flex flex-col items-start p-4">
|
||||
<h1 className="text-2xl font-medium text-center">
|
||||
A Collaborative, AI-Powered, Auto-Scaling Code Editor
|
||||
</h1>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
37
components/dashboard/navbar/index.tsx
Normal file
37
components/dashboard/navbar/index.tsx
Normal file
@ -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 (
|
||||
<div className="h-16 px-4 w-full flex items-center justify-between border-b border-border">
|
||||
<div className="flex items-center space-x-4">
|
||||
<Link
|
||||
href="/"
|
||||
className="ring-offset-2 ring-offset-background focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none rounded-sm"
|
||||
>
|
||||
<Image src={Logo} alt="Logo" width={36} height={36} />
|
||||
</Link>
|
||||
<div className="text-sm font-medium flex items-center">Sandbox</div>
|
||||
</div>
|
||||
<div className="flex items-center space-x-4">
|
||||
<DashboardNavbarSearch />
|
||||
<UserButton
|
||||
appearance={{
|
||||
baseTheme: dark,
|
||||
}}
|
||||
afterSignOutUrl="/"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
36
components/dashboard/navbar/search.tsx
Normal file
36
components/dashboard/navbar/search.tsx
Normal file
@ -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 (
|
||||
<div className="relative h-9 w-44 flex items-center justify-start">
|
||||
<Search className="w-4 h-4 absolute left-2 text-muted-foreground" />
|
||||
<Input
|
||||
value={search}
|
||||
onChange={(e) => setSearch(e.target.value)}
|
||||
placeholder="Search projects..."
|
||||
className="pl-8"
|
||||
/>
|
||||
</div>
|
||||
)
|
||||
}
|
@ -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 (
|
||||
<button className="gradient-button-bg p-[1px] inline-flex group rounded-md text-sm font-medium focus-visible:ring-offset-1 focus-visible:ring-offset-ring focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50">
|
||||
<div className="rounded-[6px] gradient-button flex items-center justify-center whitespace-nowrap px-4 py-2 h-9">
|
||||
Go To App
|
||||
<button
|
||||
onClick={onClick}
|
||||
className={cn(
|
||||
className,
|
||||
"gradient-button-bg p-[1px] inline-flex group rounded-md text-sm font-medium focus-visible:ring-offset-1 focus-visible:ring-offset-ring focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50"
|
||||
)}
|
||||
>
|
||||
<div className="rounded-[6px] w-full gradient-button flex items-center justify-center whitespace-nowrap px-4 py-2 h-9">
|
||||
<Plus className="w-4 h-4 mr-2" />
|
||||
New Project
|
||||
</div>
|
||||
</button>
|
||||
)
|
||||
|
Loading…
x
Reference in New Issue
Block a user