From 55394e87173a23fbfd360a27ed3f710af87fcbfe Mon Sep 17 00:00:00 2001 From: Yerdy Date: Sat, 7 Jun 2025 12:35:55 +0000 Subject: [PATCH 1/2] Feat(frontend): implement and connect main page --- frontend/spectrackr-main/.gitignore | 27 + .../spectrackr-main/app/dashboard/loading.tsx | 3 + .../spectrackr-main/app/dashboard/page.tsx | 83 + frontend/spectrackr-main/app/globals.css | 142 + frontend/spectrackr-main/app/layout.tsx | 24 + frontend/spectrackr-main/app/loading.tsx | 3 + frontend/spectrackr-main/app/page.tsx | 446 + frontend/spectrackr-main/components.json | 17 + .../components/theme-provider.tsx | 7 + .../components/theme-toggle.tsx | 37 + .../components/ui/accordion.tsx | 58 + .../components/ui/alert-dialog.tsx | 141 + .../spectrackr-main/components/ui/alert.tsx | 59 + .../components/ui/aspect-ratio.tsx | 7 + .../spectrackr-main/components/ui/avatar.tsx | 50 + .../spectrackr-main/components/ui/badge.tsx | 36 + .../components/ui/breadcrumb.tsx | 115 + .../spectrackr-main/components/ui/button.tsx | 47 + .../components/ui/calendar.tsx | 66 + .../spectrackr-main/components/ui/card.tsx | 79 + .../components/ui/carousel.tsx | 262 + .../spectrackr-main/components/ui/chart.tsx | 365 + .../components/ui/checkbox.tsx | 30 + .../components/ui/collapsible.tsx | 11 + .../spectrackr-main/components/ui/command.tsx | 153 + .../components/ui/context-menu.tsx | 200 + .../spectrackr-main/components/ui/dialog.tsx | 122 + .../spectrackr-main/components/ui/drawer.tsx | 118 + .../components/ui/dropdown-menu.tsx | 200 + .../spectrackr-main/components/ui/form.tsx | 178 + .../components/ui/hover-card.tsx | 29 + .../components/ui/input-otp.tsx | 71 + .../spectrackr-main/components/ui/input.tsx | 22 + .../spectrackr-main/components/ui/label.tsx | 26 + .../spectrackr-main/components/ui/menubar.tsx | 236 + .../components/ui/navigation-menu.tsx | 128 + .../components/ui/pagination.tsx | 117 + .../spectrackr-main/components/ui/popover.tsx | 31 + .../components/ui/progress.tsx | 28 + .../components/ui/radio-group.tsx | 44 + .../components/ui/resizable.tsx | 45 + .../components/ui/scroll-area.tsx | 48 + .../spectrackr-main/components/ui/select.tsx | 160 + .../components/ui/separator.tsx | 31 + .../spectrackr-main/components/ui/sheet.tsx | 140 + .../spectrackr-main/components/ui/sidebar.tsx | 763 + .../components/ui/skeleton.tsx | 15 + .../spectrackr-main/components/ui/slider.tsx | 28 + .../spectrackr-main/components/ui/sonner.tsx | 31 + .../spectrackr-main/components/ui/switch.tsx | 29 + .../spectrackr-main/components/ui/table.tsx | 117 + .../spectrackr-main/components/ui/tabs.tsx | 55 + .../components/ui/textarea.tsx | 22 + .../spectrackr-main/components/ui/toast.tsx | 129 + .../spectrackr-main/components/ui/toaster.tsx | 35 + .../components/ui/toggle-group.tsx | 61 + .../spectrackr-main/components/ui/toggle.tsx | 45 + .../spectrackr-main/components/ui/tooltip.tsx | 30 + .../components/ui/use-mobile.tsx | 19 + .../components/ui/use-toast.ts | 194 + frontend/spectrackr-main/hooks/use-mobile.tsx | 19 + frontend/spectrackr-main/hooks/use-toast.ts | 194 + frontend/spectrackr-main/lib/utils.ts | 6 + frontend/spectrackr-main/next.config.mjs | 15 + frontend/spectrackr-main/package-lock.json | 15187 ++++++++++++++++ frontend/spectrackr-main/package.json | 81 + frontend/spectrackr-main/pnpm-lock.yaml | 5 + frontend/spectrackr-main/postcss.config.mjs | 8 + .../public/placeholder-logo.png | Bin 0 -> 958 bytes .../public/placeholder-logo.svg | 1 + .../public/placeholder-user.jpg | Bin 0 -> 2615 bytes .../spectrackr-main/public/placeholder.jpg | Bin 0 -> 1596 bytes .../spectrackr-main/public/placeholder.svg | 1 + frontend/spectrackr-main/styles/globals.css | 94 + frontend/spectrackr-main/tailwind.config.ts | 91 + frontend/spectrackr-main/tsconfig.json | 27 + 76 files changed, 21544 insertions(+) create mode 100644 frontend/spectrackr-main/.gitignore create mode 100644 frontend/spectrackr-main/app/dashboard/loading.tsx create mode 100644 frontend/spectrackr-main/app/dashboard/page.tsx create mode 100644 frontend/spectrackr-main/app/globals.css create mode 100644 frontend/spectrackr-main/app/layout.tsx create mode 100644 frontend/spectrackr-main/app/loading.tsx create mode 100644 frontend/spectrackr-main/app/page.tsx create mode 100644 frontend/spectrackr-main/components.json create mode 100644 frontend/spectrackr-main/components/theme-provider.tsx create mode 100644 frontend/spectrackr-main/components/theme-toggle.tsx create mode 100644 frontend/spectrackr-main/components/ui/accordion.tsx create mode 100644 frontend/spectrackr-main/components/ui/alert-dialog.tsx create mode 100644 frontend/spectrackr-main/components/ui/alert.tsx create mode 100644 frontend/spectrackr-main/components/ui/aspect-ratio.tsx create mode 100644 frontend/spectrackr-main/components/ui/avatar.tsx create mode 100644 frontend/spectrackr-main/components/ui/badge.tsx create mode 100644 frontend/spectrackr-main/components/ui/breadcrumb.tsx create mode 100644 frontend/spectrackr-main/components/ui/button.tsx create mode 100644 frontend/spectrackr-main/components/ui/calendar.tsx create mode 100644 frontend/spectrackr-main/components/ui/card.tsx create mode 100644 frontend/spectrackr-main/components/ui/carousel.tsx create mode 100644 frontend/spectrackr-main/components/ui/chart.tsx create mode 100644 frontend/spectrackr-main/components/ui/checkbox.tsx create mode 100644 frontend/spectrackr-main/components/ui/collapsible.tsx create mode 100644 frontend/spectrackr-main/components/ui/command.tsx create mode 100644 frontend/spectrackr-main/components/ui/context-menu.tsx create mode 100644 frontend/spectrackr-main/components/ui/dialog.tsx create mode 100644 frontend/spectrackr-main/components/ui/drawer.tsx create mode 100644 frontend/spectrackr-main/components/ui/dropdown-menu.tsx create mode 100644 frontend/spectrackr-main/components/ui/form.tsx create mode 100644 frontend/spectrackr-main/components/ui/hover-card.tsx create mode 100644 frontend/spectrackr-main/components/ui/input-otp.tsx create mode 100644 frontend/spectrackr-main/components/ui/input.tsx create mode 100644 frontend/spectrackr-main/components/ui/label.tsx create mode 100644 frontend/spectrackr-main/components/ui/menubar.tsx create mode 100644 frontend/spectrackr-main/components/ui/navigation-menu.tsx create mode 100644 frontend/spectrackr-main/components/ui/pagination.tsx create mode 100644 frontend/spectrackr-main/components/ui/popover.tsx create mode 100644 frontend/spectrackr-main/components/ui/progress.tsx create mode 100644 frontend/spectrackr-main/components/ui/radio-group.tsx create mode 100644 frontend/spectrackr-main/components/ui/resizable.tsx create mode 100644 frontend/spectrackr-main/components/ui/scroll-area.tsx create mode 100644 frontend/spectrackr-main/components/ui/select.tsx create mode 100644 frontend/spectrackr-main/components/ui/separator.tsx create mode 100644 frontend/spectrackr-main/components/ui/sheet.tsx create mode 100644 frontend/spectrackr-main/components/ui/sidebar.tsx create mode 100644 frontend/spectrackr-main/components/ui/skeleton.tsx create mode 100644 frontend/spectrackr-main/components/ui/slider.tsx create mode 100644 frontend/spectrackr-main/components/ui/sonner.tsx create mode 100644 frontend/spectrackr-main/components/ui/switch.tsx create mode 100644 frontend/spectrackr-main/components/ui/table.tsx create mode 100644 frontend/spectrackr-main/components/ui/tabs.tsx create mode 100644 frontend/spectrackr-main/components/ui/textarea.tsx create mode 100644 frontend/spectrackr-main/components/ui/toast.tsx create mode 100644 frontend/spectrackr-main/components/ui/toaster.tsx create mode 100644 frontend/spectrackr-main/components/ui/toggle-group.tsx create mode 100644 frontend/spectrackr-main/components/ui/toggle.tsx create mode 100644 frontend/spectrackr-main/components/ui/tooltip.tsx create mode 100644 frontend/spectrackr-main/components/ui/use-mobile.tsx create mode 100644 frontend/spectrackr-main/components/ui/use-toast.ts create mode 100644 frontend/spectrackr-main/hooks/use-mobile.tsx create mode 100644 frontend/spectrackr-main/hooks/use-toast.ts create mode 100644 frontend/spectrackr-main/lib/utils.ts create mode 100644 frontend/spectrackr-main/next.config.mjs create mode 100644 frontend/spectrackr-main/package-lock.json create mode 100644 frontend/spectrackr-main/package.json create mode 100644 frontend/spectrackr-main/pnpm-lock.yaml create mode 100644 frontend/spectrackr-main/postcss.config.mjs create mode 100644 frontend/spectrackr-main/public/placeholder-logo.png create mode 100644 frontend/spectrackr-main/public/placeholder-logo.svg create mode 100644 frontend/spectrackr-main/public/placeholder-user.jpg create mode 100644 frontend/spectrackr-main/public/placeholder.jpg create mode 100644 frontend/spectrackr-main/public/placeholder.svg create mode 100644 frontend/spectrackr-main/styles/globals.css create mode 100644 frontend/spectrackr-main/tailwind.config.ts create mode 100644 frontend/spectrackr-main/tsconfig.json diff --git a/frontend/spectrackr-main/.gitignore b/frontend/spectrackr-main/.gitignore new file mode 100644 index 000000000..f650315f3 --- /dev/null +++ b/frontend/spectrackr-main/.gitignore @@ -0,0 +1,27 @@ +# See https://help.github.com/articles/ignoring-files/ for more about ignoring files. + +# dependencies +/node_modules + +# next.js +/.next/ +/out/ + +# production +/build + +# debug +npm-debug.log* +yarn-debug.log* +yarn-error.log* +.pnpm-debug.log* + +# env files +.env* + +# vercel +.vercel + +# typescript +*.tsbuildinfo +next-env.d.ts \ No newline at end of file diff --git a/frontend/spectrackr-main/app/dashboard/loading.tsx b/frontend/spectrackr-main/app/dashboard/loading.tsx new file mode 100644 index 000000000..f15322a81 --- /dev/null +++ b/frontend/spectrackr-main/app/dashboard/loading.tsx @@ -0,0 +1,3 @@ +export default function Loading() { + return null +} diff --git a/frontend/spectrackr-main/app/dashboard/page.tsx b/frontend/spectrackr-main/app/dashboard/page.tsx new file mode 100644 index 000000000..d9afccd0c --- /dev/null +++ b/frontend/spectrackr-main/app/dashboard/page.tsx @@ -0,0 +1,83 @@ +"use client" + +import { useState } from "react" +import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs" +import { Button } from "@/components/ui/button" +import { ArrowLeft, Search, FileText } from "lucide-react" +import { useRouter } from "next/navigation" +import { ThemeProvider } from "@/components/theme-provider" +import { ThemeToggle } from "@/components/theme-toggle" + +export default function Dashboard() { + return ( + + + + ) +} + +function DashboardPage() { + const router = useRouter() + const [activeTab, setActiveTab] = useState("job-search") + + return ( +
+
+
+ + +
+ +

SpecTrackr 대시보드

+ + + + + 채용공고 검색 + + + 스펙 검색 + + + + +

채용공고 검색

+

+ 다양한 취업 사이트의 채용공고를 한 곳에서 확인하고 비교할 수 있습니다. 원하는 직무나 회사를 검색해보세요. +

+ + {/* 여기에 채용공고 검색 기능 구현 */} +
+ 채용공고 검색 기능이 여기에 구현됩니다. +
+ + + +

스펙 검색

+

+ 실제 합격자 자소서와 스펙 사례를 기반으로 현실적인 준비 방법을 확인할 수 있습니다. 관심 있는 직무나 회사를 + 검색해보세요. +

+ + {/* 여기에 스펙 검색 기능 구현 */} +
+ 스펙 검색 기능이 여기에 구현됩니다. +
+ + +
+
+ ) +} diff --git a/frontend/spectrackr-main/app/globals.css b/frontend/spectrackr-main/app/globals.css new file mode 100644 index 000000000..e7b3fb2af --- /dev/null +++ b/frontend/spectrackr-main/app/globals.css @@ -0,0 +1,142 @@ +@tailwind base; +@tailwind components; +@tailwind utilities; + +@layer base { + :root { + --background: 0 0% 100%; + --foreground: 222.2 84% 4.9%; + + --card: 0 0% 100%; + --card-foreground: 222.2 84% 4.9%; + + --popover: 0 0% 100%; + --popover-foreground: 222.2 84% 4.9%; + + --primary: 196 100% 50%; + --primary-foreground: 210 40% 98%; + + --secondary: 210 40% 96.1%; + --secondary-foreground: 222.2 47.4% 11.2%; + + --muted: 210 40% 96.1%; + --muted-foreground: 215.4 16.3% 46.9%; + + --accent: 210 40% 96.1%; + --accent-foreground: 222.2 47.4% 11.2%; + + --destructive: 0 84.2% 60.2%; + --destructive-foreground: 210 40% 98%; + + --border: 214.3 31.8% 91.4%; + --input: 214.3 31.8% 91.4%; + --ring: 196 100% 50%; + + --radius: 0.5rem; + } + + .dark { + --background: 222.2 84% 4.9%; + --foreground: 210 40% 98%; + + --card: 222.2 84% 4.9%; + --card-foreground: 210 40% 98%; + + --popover: 222.2 84% 4.9%; + --popover-foreground: 210 40% 98%; + + --primary: 196 100% 50%; + --primary-foreground: 222.2 47.4% 11.2%; + + --secondary: 217.2 32.6% 17.5%; + --secondary-foreground: 210 40% 98%; + + --muted: 217.2 32.6% 17.5%; + --muted-foreground: 215 20.2% 65.1%; + + --accent: 217.2 32.6% 17.5%; + --accent-foreground: 210 40% 98%; + + --destructive: 0 62.8% 30.6%; + --destructive-foreground: 210 40% 98%; + + --border: 217.2 32.6% 17.5%; + --input: 217.2 32.6% 17.5%; + --ring: 196 100% 50%; + } + + .light { + --background: 0 0% 100%; + --foreground: 222.2 84% 4.9%; + + --card: 0 0% 100%; + --card-foreground: 222.2 84% 4.9%; + + --popover: 0 0% 100%; + --popover-foreground: 222.2 84% 4.9%; + + --primary: 196 100% 50%; + --primary-foreground: 210 40% 98%; + + --secondary: 210 40% 96.1%; + --secondary-foreground: 222.2 47.4% 11.2%; + + --muted: 210 40% 96.1%; + --muted-foreground: 215.4 16.3% 46.9%; + + --accent: 210 40% 96.1%; + --accent-foreground: 222.2 47.4% 11.2%; + + --destructive: 0 84.2% 60.2%; + --destructive-foreground: 210 40% 98%; + + --border: 214.3 31.8% 91.4%; + --input: 214.3 31.8% 91.4%; + --ring: 196 100% 50%; + } +} + +@layer base { + * { + @apply border-border; + } + body { + @apply bg-background text-foreground; + } +} + +/* Custom scrollbar */ +::-webkit-scrollbar { + width: 8px; +} + +::-webkit-scrollbar-track { + background: rgba(15, 23, 42, 0.3); +} + +::-webkit-scrollbar-thumb { + background: rgba(148, 163, 184, 0.5); + border-radius: 4px; +} + +::-webkit-scrollbar-thumb:hover { + background: rgba(148, 163, 184, 0.7); +} + +/* Gradient animations */ +@keyframes gradient-shift { + 0% { + background-position: 0% 50%; + } + 50% { + background-position: 100% 50%; + } + 100% { + background-position: 0% 50%; + } +} + +.animate-gradient { + background-size: 200% 200%; + animation: gradient-shift 5s ease infinite; +} diff --git a/frontend/spectrackr-main/app/layout.tsx b/frontend/spectrackr-main/app/layout.tsx new file mode 100644 index 000000000..8c9c7f9e2 --- /dev/null +++ b/frontend/spectrackr-main/app/layout.tsx @@ -0,0 +1,24 @@ +import type React from "react" +import "./globals.css" +import type { Metadata } from "next" +import { Inter } from "next/font/google" + +const inter = Inter({ subsets: ["latin"] }) + +export const metadata: Metadata = { + title: "SpecTrackr - 의생명융합공학부 진로 탐색 플랫폼", + description: "의생명융합공학부 학생들의 진로 탐색을 위한 맞춤형 플랫폼", + generator: 'v0.dev' +} + +export default function RootLayout({ + children, +}: Readonly<{ + children: React.ReactNode +}>) { + return ( + + {children} + + ) +} diff --git a/frontend/spectrackr-main/app/loading.tsx b/frontend/spectrackr-main/app/loading.tsx new file mode 100644 index 000000000..f15322a81 --- /dev/null +++ b/frontend/spectrackr-main/app/loading.tsx @@ -0,0 +1,3 @@ +export default function Loading() { + return null +} diff --git a/frontend/spectrackr-main/app/page.tsx b/frontend/spectrackr-main/app/page.tsx new file mode 100644 index 000000000..196b5aa09 --- /dev/null +++ b/frontend/spectrackr-main/app/page.tsx @@ -0,0 +1,446 @@ +// "use client" + +// import type React from "react" +// import { useRef, useState, useEffect } from "react" +// import { Canvas, useFrame } from "@react-three/fiber" +// import { OrbitControls, PerspectiveCamera } from "@react-three/drei" +// import { Button } from "@/components/ui/button" +// import { motion } from "framer-motion" +// import { ChevronRight, Search, BarChart2, Briefcase, GraduationCap } from "lucide-react" +// import { useRouter } from "next/navigation" +// import * as THREE from "three" +// import { ThemeProvider } from "@/components/theme-provider" +// import { ThemeToggle } from "@/components/theme-toggle" + +// export default function Home() { +// return ( +// +// +// +// ) +// } + +// function HomePage() { +// const router = useRouter() +// const [mousePosition, setMousePosition] = useState({ x: 0, y: 0 }) + +// useEffect(() => { +// const handleMouseMove = (e: MouseEvent) => { +// setMousePosition({ +// x: (e.clientX / window.innerWidth) * 2 - 1, +// y: -(e.clientY / window.innerHeight) * 2 + 1, +// }) +// } + +// window.addEventListener("mousemove", handleMouseMove) +// return () => window.removeEventListener("mousemove", handleMouseMove) +// }, []) + +// return ( +//
+// {/* 3D Background - Fixed positioning and lower z-index */} +//
+// +// +// +// +// +// +// +//
+ +// {/* Content - Higher z-index to appear above 3D background */} +//
+//
+//
+// +//
+//
+// +//
+//

+// SpecTrackr +//

+//
+// +// + +// +// +// +//
+ +//
+// +//

+// 의생명융합공학부 학생들의{" "} +// +// 진로 탐색 +// +// 을 위한 플랫폼 +//

+ +//

+// 다양한 분야로의 진출 가능성을 연결하고, 채용 정보와 직무별 필수 역량을 한눈에 볼 수 있도록 지원합니다. +//

+ +// + +// +// } +// title="직무 정보 통합" +// description="다양한 취업 사이트의 채용공고를 한 곳에서 확인하고 비교할 수 있습니다." +// /> + +// } +// title="스펙 사례 제공" +// description="실제 합격자 자소서와 스펙 사례를 기반으로 현실적인 준비 방법을 제시합니다." +// /> + +// } +// title="맞춤형 탐색 기능" +// description="관심 직무 기반으로 필요한 역량과 준비 과정을 맞춤형으로 탐색할 수 있습니다." +// /> +// + +// +//
+//

+// "폭넓은 가능성 속에서, 각자의 길을 찾고 준비할 수 있도록 함께합니다." +//

+ +// +//
+// +//
+ +//
+//

© {new Date().getFullYear()} SpecTrackr. 의생명융합공학부 학생들을 위한 진로 탐색 플랫폼.

+//
+//
+//
+//
+// ) +// } + +// function FeatureCard({ icon, title, description }: { icon: React.ReactNode; title: string; description: string }) { +// return ( +// +//
+// {icon} +//
+//

{title}

+//

{description}

+// +// ) +// } + +// function Scene({ mousePosition }: { mousePosition: { x: number; y: number } }) { +// const particlesRef = useRef(null) + +// useFrame(() => { +// if (particlesRef.current) { +// particlesRef.current.rotation.y += 0.001 +// particlesRef.current.rotation.x = mousePosition.y * 0.05 +// particlesRef.current.rotation.z = mousePosition.x * 0.05 +// } +// }) + +// return ( +// <> +// +// {Array.from({ length: 50 }).map((_, i) => ( +// +// ))} +// +// +// ) +// } + +// function Particle({ index }: { index: number }) { +// const ref = useRef(null) + +// // Create a random position for each particle +// const position = [(Math.random() - 0.5) * 15, (Math.random() - 0.5) * 15, (Math.random() - 0.5) * 15] + +// // Random size for each particle +// const size = Math.random() * 0.03 + 0.01 + +// useFrame((state) => { +// if (ref.current) { +// // Slow oscillation based on time +// ref.current.position.y += Math.sin(state.clock.elapsedTime * 0.1 + index) * 0.001 +// ref.current.position.x += Math.cos(state.clock.elapsedTime * 0.1 + index) * 0.001 +// } +// }) + +// return ( +// +// +// +// +// ) +// } + +"use client" + +import type React from "react" +import { useRef } from "react" +import { Canvas, useFrame } from "@react-three/fiber" +import { OrbitControls } from "@react-three/drei" +import { Button } from "@/components/ui/button" +import { motion } from "framer-motion" +import { ChevronRight, Search, BarChart2, Briefcase, GraduationCap } from "lucide-react" +import { useRouter } from "next/navigation" +import * as THREE from "three" +import { ThemeProvider } from "@/components/theme-provider" +import { ThemeToggle } from "@/components/theme-toggle" + +export default function Home() { + return ( + + + + ) +} + +function HomePage() { + const router = useRouter() + + return ( +
+ {/* 3D Background - Fixed positioning and lower z-index */} +
+ + + + + + + +
+ + {/* Content - Higher z-index to appear above 3D background */} +
+
+
+ +
+
+ +
+

+ SpecTrackr +

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

+ 의생명융합공학부 학생들의{" "} + + 진로 탐색 + + 을 위한 플랫폼 +

+ +

+ 다양한 분야로의 진출 가능성을 연결하고, 채용 정보와 직무별 필수 역량을 한눈에 볼 수 있도록 지원합니다. +

+ + + + } + title="직무 정보 통합" + description="다양한 취업 사이트의 채용공고를 한 곳에서 확인하고 비교할 수 있습니다." + /> + + } + title="스펙 사례 제공" + description="실제 합격자 자소서와 스펙 사례를 기반으로 현실적인 준비 방법을 제시합니다." + /> + + } + title="맞춤형 탐색 기능" + description="관심 직무 기반으로 필요한 역량과 준비 과정을 맞춤형으로 탐색할 수 있습니다." + /> + + + +
+

+ "폭넓은 가능성 속에서, 각자의 길을 찾고 준비할 수 있도록 함께합니다." +

+ + +
+ +
+ +
+

© {new Date().getFullYear()} SpecTrackr. 의생명융합공학부 학생들을 위한 진로 탐색 플랫폼.

+
+
+
+
+ ) +} + +function FeatureCard({ icon, title, description }: { icon: React.ReactNode; title: string; description: string }) { + return ( + +
+ {icon} +
+

{title}

+

{description}

+ + ) +} + +function Scene() { + const particlesRef = useRef(null) + + useFrame(() => { + if (particlesRef.current) { + particlesRef.current.rotation.y += 0.001 + // 마우스 위치에 따른 x, z 회전은 삭제 + } + }) + + return ( + <> + + {Array.from({ length: 50 }).map((_, i) => ( + + ))} + + + ) +} + +function Particle({ index }: { index: number }) { + const ref = useRef(null) + + // Create a random position for each particle + const position = [(Math.random() - 0.5) * 15, (Math.random() - 0.5) * 15, (Math.random() - 0.5) * 15] + + // Random size for each particle + const size = Math.random() * 0.03 + 0.01 + + useFrame((state) => { + if (ref.current) { + // Slow oscillation based on time + ref.current.position.y += Math.sin(state.clock.elapsedTime * 0.1 + index) * 0.001 + ref.current.position.x += Math.cos(state.clock.elapsedTime * 0.1 + index) * 0.001 + } + }) + + return ( + + + + + ) +} diff --git a/frontend/spectrackr-main/components.json b/frontend/spectrackr-main/components.json new file mode 100644 index 000000000..fa674c93d --- /dev/null +++ b/frontend/spectrackr-main/components.json @@ -0,0 +1,17 @@ +{ + "$schema": "https://ui.shadcn.com/schema.json", + "style": "default", + "rsc": true, + "tsx": true, + "tailwind": { + "config": "tailwind.config.ts", + "css": "app/globals.css", + "baseColor": "slate", + "cssVariables": true, + "prefix": "" + }, + "aliases": { + "components": "@/components", + "utils": "@/lib/utils" + } +} diff --git a/frontend/spectrackr-main/components/theme-provider.tsx b/frontend/spectrackr-main/components/theme-provider.tsx new file mode 100644 index 000000000..1cd216d6d --- /dev/null +++ b/frontend/spectrackr-main/components/theme-provider.tsx @@ -0,0 +1,7 @@ +"use client" +import { ThemeProvider as NextThemesProvider } from "next-themes" +import type { ThemeProviderProps } from "next-themes" + +export function ThemeProvider({ children, ...props }: ThemeProviderProps) { + return {children} +} diff --git a/frontend/spectrackr-main/components/theme-toggle.tsx b/frontend/spectrackr-main/components/theme-toggle.tsx new file mode 100644 index 000000000..2374239b8 --- /dev/null +++ b/frontend/spectrackr-main/components/theme-toggle.tsx @@ -0,0 +1,37 @@ +"use client" + +import * as React from "react" +import { Moon, Sun } from "lucide-react" +import { useTheme } from "next-themes" + +import { Button } from "@/components/ui/button" + +export function ThemeToggle() { + const { theme, setTheme } = useTheme() + const [mounted, setMounted] = React.useState(false) + + React.useEffect(() => { + setMounted(true) + }, []) + + if (!mounted) { + return ( + + ) + } + + return ( + + ) +} diff --git a/frontend/spectrackr-main/components/ui/accordion.tsx b/frontend/spectrackr-main/components/ui/accordion.tsx new file mode 100644 index 000000000..24c788c2c --- /dev/null +++ b/frontend/spectrackr-main/components/ui/accordion.tsx @@ -0,0 +1,58 @@ +"use client" + +import * as React from "react" +import * as AccordionPrimitive from "@radix-ui/react-accordion" +import { ChevronDown } from "lucide-react" + +import { cn } from "@/lib/utils" + +const Accordion = AccordionPrimitive.Root + +const AccordionItem = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, ...props }, ref) => ( + +)) +AccordionItem.displayName = "AccordionItem" + +const AccordionTrigger = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, children, ...props }, ref) => ( + + svg]:rotate-180", + className + )} + {...props} + > + {children} + + + +)) +AccordionTrigger.displayName = AccordionPrimitive.Trigger.displayName + +const AccordionContent = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, children, ...props }, ref) => ( + +
{children}
+ +)) + +AccordionContent.displayName = AccordionPrimitive.Content.displayName + +export { Accordion, AccordionItem, AccordionTrigger, AccordionContent } diff --git a/frontend/spectrackr-main/components/ui/alert-dialog.tsx b/frontend/spectrackr-main/components/ui/alert-dialog.tsx new file mode 100644 index 000000000..25e7b4744 --- /dev/null +++ b/frontend/spectrackr-main/components/ui/alert-dialog.tsx @@ -0,0 +1,141 @@ +"use client" + +import * as React from "react" +import * as AlertDialogPrimitive from "@radix-ui/react-alert-dialog" + +import { cn } from "@/lib/utils" +import { buttonVariants } from "@/components/ui/button" + +const AlertDialog = AlertDialogPrimitive.Root + +const AlertDialogTrigger = AlertDialogPrimitive.Trigger + +const AlertDialogPortal = AlertDialogPrimitive.Portal + +const AlertDialogOverlay = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, ...props }, ref) => ( + +)) +AlertDialogOverlay.displayName = AlertDialogPrimitive.Overlay.displayName + +const AlertDialogContent = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, ...props }, ref) => ( + + + + +)) +AlertDialogContent.displayName = AlertDialogPrimitive.Content.displayName + +const AlertDialogHeader = ({ + className, + ...props +}: React.HTMLAttributes) => ( +
+) +AlertDialogHeader.displayName = "AlertDialogHeader" + +const AlertDialogFooter = ({ + className, + ...props +}: React.HTMLAttributes) => ( +
+) +AlertDialogFooter.displayName = "AlertDialogFooter" + +const AlertDialogTitle = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, ...props }, ref) => ( + +)) +AlertDialogTitle.displayName = AlertDialogPrimitive.Title.displayName + +const AlertDialogDescription = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, ...props }, ref) => ( + +)) +AlertDialogDescription.displayName = + AlertDialogPrimitive.Description.displayName + +const AlertDialogAction = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, ...props }, ref) => ( + +)) +AlertDialogAction.displayName = AlertDialogPrimitive.Action.displayName + +const AlertDialogCancel = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, ...props }, ref) => ( + +)) +AlertDialogCancel.displayName = AlertDialogPrimitive.Cancel.displayName + +export { + AlertDialog, + AlertDialogPortal, + AlertDialogOverlay, + AlertDialogTrigger, + AlertDialogContent, + AlertDialogHeader, + AlertDialogFooter, + AlertDialogTitle, + AlertDialogDescription, + AlertDialogAction, + AlertDialogCancel, +} diff --git a/frontend/spectrackr-main/components/ui/alert.tsx b/frontend/spectrackr-main/components/ui/alert.tsx new file mode 100644 index 000000000..41fa7e056 --- /dev/null +++ b/frontend/spectrackr-main/components/ui/alert.tsx @@ -0,0 +1,59 @@ +import * as React from "react" +import { cva, type VariantProps } from "class-variance-authority" + +import { cn } from "@/lib/utils" + +const alertVariants = cva( + "relative w-full rounded-lg border p-4 [&>svg~*]:pl-7 [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground", + { + variants: { + variant: { + default: "bg-background text-foreground", + destructive: + "border-destructive/50 text-destructive dark:border-destructive [&>svg]:text-destructive", + }, + }, + defaultVariants: { + variant: "default", + }, + } +) + +const Alert = React.forwardRef< + HTMLDivElement, + React.HTMLAttributes & VariantProps +>(({ className, variant, ...props }, ref) => ( +
+)) +Alert.displayName = "Alert" + +const AlertTitle = React.forwardRef< + HTMLParagraphElement, + React.HTMLAttributes +>(({ className, ...props }, ref) => ( +
+)) +AlertTitle.displayName = "AlertTitle" + +const AlertDescription = React.forwardRef< + HTMLParagraphElement, + React.HTMLAttributes +>(({ className, ...props }, ref) => ( +
+)) +AlertDescription.displayName = "AlertDescription" + +export { Alert, AlertTitle, AlertDescription } diff --git a/frontend/spectrackr-main/components/ui/aspect-ratio.tsx b/frontend/spectrackr-main/components/ui/aspect-ratio.tsx new file mode 100644 index 000000000..d6a5226f5 --- /dev/null +++ b/frontend/spectrackr-main/components/ui/aspect-ratio.tsx @@ -0,0 +1,7 @@ +"use client" + +import * as AspectRatioPrimitive from "@radix-ui/react-aspect-ratio" + +const AspectRatio = AspectRatioPrimitive.Root + +export { AspectRatio } diff --git a/frontend/spectrackr-main/components/ui/avatar.tsx b/frontend/spectrackr-main/components/ui/avatar.tsx new file mode 100644 index 000000000..51e507ba9 --- /dev/null +++ b/frontend/spectrackr-main/components/ui/avatar.tsx @@ -0,0 +1,50 @@ +"use client" + +import * as React from "react" +import * as AvatarPrimitive from "@radix-ui/react-avatar" + +import { cn } from "@/lib/utils" + +const Avatar = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, ...props }, ref) => ( + +)) +Avatar.displayName = AvatarPrimitive.Root.displayName + +const AvatarImage = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, ...props }, ref) => ( + +)) +AvatarImage.displayName = AvatarPrimitive.Image.displayName + +const AvatarFallback = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, ...props }, ref) => ( + +)) +AvatarFallback.displayName = AvatarPrimitive.Fallback.displayName + +export { Avatar, AvatarImage, AvatarFallback } diff --git a/frontend/spectrackr-main/components/ui/badge.tsx b/frontend/spectrackr-main/components/ui/badge.tsx new file mode 100644 index 000000000..f000e3ef5 --- /dev/null +++ b/frontend/spectrackr-main/components/ui/badge.tsx @@ -0,0 +1,36 @@ +import * as React from "react" +import { cva, type VariantProps } from "class-variance-authority" + +import { cn } from "@/lib/utils" + +const badgeVariants = cva( + "inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2", + { + variants: { + variant: { + default: + "border-transparent bg-primary text-primary-foreground hover:bg-primary/80", + secondary: + "border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80", + destructive: + "border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80", + outline: "text-foreground", + }, + }, + defaultVariants: { + variant: "default", + }, + } +) + +export interface BadgeProps + extends React.HTMLAttributes, + VariantProps {} + +function Badge({ className, variant, ...props }: BadgeProps) { + return ( +
+ ) +} + +export { Badge, badgeVariants } diff --git a/frontend/spectrackr-main/components/ui/breadcrumb.tsx b/frontend/spectrackr-main/components/ui/breadcrumb.tsx new file mode 100644 index 000000000..60e6c96f7 --- /dev/null +++ b/frontend/spectrackr-main/components/ui/breadcrumb.tsx @@ -0,0 +1,115 @@ +import * as React from "react" +import { Slot } from "@radix-ui/react-slot" +import { ChevronRight, MoreHorizontal } from "lucide-react" + +import { cn } from "@/lib/utils" + +const Breadcrumb = React.forwardRef< + HTMLElement, + React.ComponentPropsWithoutRef<"nav"> & { + separator?: React.ReactNode + } +>(({ ...props }, ref) =>