SpecTrackr
diff --git a/frontend/spec-trackr-app/src/sp_com.jsx b/frontend/spec-trackr-app/src/sp_com.jsx
index 646a36b6a..2f7a7ebad 100644
--- a/frontend/spec-trackr-app/src/sp_com.jsx
+++ b/frontend/spec-trackr-app/src/sp_com.jsx
@@ -147,6 +147,23 @@ const SpCom = ({ onCompanyTabClick }) => {
// --- 렌더링 ---
return (
+
+ { window.location.href = "http://localhost:3001"; }}
+ >
+
+
{/* 상단 중앙 제목 */}
SpecTrackr
@@ -158,7 +175,7 @@ const SpCom = ({ onCompanyTabClick }) => {
{/* 버튼: 100% 가로, 반반, 검정/흰색 */}
{
@@ -168,6 +185,17 @@ const SpCom = ({ onCompanyTabClick }) => {
style={{ fontSize: "1.2rem", fontWeight: 500, borderRight: 0 }}
>
채용공고 검색
+ */}
+ {
+ setActiveTab("채용공고 검색");
+ if (onCompanyTabClick) onCompanyTabClick();
+ }}
+ style={{ fontSize: "1.2rem", fontWeight: 500 }}
+ >
+ 채용공고 검색
+
+ )
+}
+
+function DashboardPage() {
+ const router = useRouter()
+ const [activeTab, setActiveTab] = useState("job-search")
+
+ return (
+
+
+
+
router.push("/")}
+ className="text-slate-600 dark:text-slate-300 hover:text-slate-900 dark:hover:text-white"
+ >
+
+
+
+
+
SpecTrackr 대시보드
+
+
+
+
+
+
+
+
+
+
+ 채용공고 검색
+
+ 다양한 취업 사이트의 채용공고를 한 곳에서 확인하고 비교할 수 있습니다. 원하는 직무나 회사를 검색해보세요.
+
+
+ {/* 여기에 채용공고 검색 기능 구현 */}
+
+ 채용공고 검색 기능이 여기에 구현됩니다.
+
+
+
+
+ 스펙 검색
+
+ 실제 합격자 자소서와 스펙 사례를 기반으로 현실적인 준비 방법을 확인할 수 있습니다. 관심 있는 직무나 회사를
+ 검색해보세요.
+
+
+ {/* 여기에 스펙 검색 기능 구현 */}
+
+ 스펙 검색 기능이 여기에 구현됩니다.
+
+
+
+
+
+//
+// )
+// }
+
+// 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
+//
+//
+
+//
+// { window.location.href = "http://localhost:3000" }}
+// className="bg-gradient-to-r from-cyan-500 to-blue-500 hover:from-cyan-600 hover:to-blue-600 text-white shadow-lg"
+// >
+// 시작하기
+//
+//
+
+//
+//
+//
+// 의생명융합공학부 학생들의{" "}
+//
+// 진로 탐색
+//
+// 을 위한 플랫폼
+//
+
+//
+// 다양한 분야로의 진출 가능성을 연결하고, 채용 정보와 직무별 필수 역량을 한눈에 볼 수 있도록 지원합니다.
+//
+
+//
+
+//
+//
+
+//
+//
+//
+// "폭넓은 가능성 속에서, 각자의 길을 찾고 준비할 수 있도록 함께합니다."
+//
+
+// { window.location.href = "http://localhost:3000" }}
+// size="lg"
+// className="mt-8 bg-gradient-to-r from-cyan-500 to-blue-500 hover:from-cyan-600 hover:to-blue-600 text-lg text-white shadow-lg"
+// >
+// 지금 시작하기
+//
+//
+//
+
+//
+//
+//
+//
+//
+// {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 */}
+
+
+
+
+
+
+
+
+ { window.location.href = "http://localhost:3000" }}
+ className="bg-gradient-to-r from-cyan-500 to-blue-500 hover:from-cyan-600 hover:to-blue-600 text-white shadow-lg"
+ >
+ 시작하기
+
+
+
+
+
+
+ 의생명융합공학부 학생들의{" "}
+
+ 진로 탐색
+
+ 을 위한 플랫폼
+
+
+
+ 다양한 분야로의 진출 가능성을 연결하고, 채용 정보와 직무별 필수 역량을 한눈에 볼 수 있도록 지원합니다.
+
+
+
+
+
+
+
+
+
+ "폭넓은 가능성 속에서, 각자의 길을 찾고 준비할 수 있도록 함께합니다."
+
+
+ { window.location.href = "http://localhost:3000" }}
+ size="lg"
+ className="mt-8 bg-gradient-to-r from-cyan-500 to-blue-500 hover:from-cyan-600 hover:to-blue-600 text-lg text-white shadow-lg"
+ >
+ 지금 시작하기
+
+
+
+
+
+
+
+
+
+ {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 (
+ setTheme(theme === "light" ? "dark" : "light")}
+ className="relative bg-white/80 dark:bg-slate-800/80 backdrop-blur-sm hover:bg-white dark:hover:bg-slate-700"
+ >
+ 테마 전환
+
+ )
+}
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) => (
+ ,
+ 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) => (
+ ,
+ 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) => (
+ ,
+ React.ComponentPropsWithoutRef
+>(({ className, ...props }, ref) => (
+ ,
+ React.ComponentPropsWithoutRef
+>(({ className, ...props }, ref) => (
+ ,
+ React.ComponentPropsWithoutRef
+>(({ className, ...props }, ref) => (
+ & VariantProps
+>(({ className, variant, ...props }, ref) => (
+
+))
+Alert.displayName = "Alert"
+
+const AlertTitle = React.forwardRef<
+ HTMLParagraphElement,
+ React.HTMLAttributes
+>(({ className, ...props }, ref) => (
+
+>(({ 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) => (
+ ,
+ React.ComponentPropsWithoutRef
+>(({ className, ...props }, ref) => (
+ ,
+ React.ComponentPropsWithoutRef
+>(({ className, ...props }, ref) => (
+ ,
+ 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) => svg]:w-3.5 [&>svg]:h-3.5", className)}
+ {...props}
+ >
+ {children ??
+)
+BreadcrumbSeparator.displayName = "BreadcrumbSeparator"
+
+const BreadcrumbEllipsis = ({
+ className,
+ ...props
+}: React.ComponentProps<"span">) => (
+
+ More
+
+)
+BreadcrumbEllipsis.displayName = "BreadcrumbElipssis"
+
+export {
+ Breadcrumb,
+ BreadcrumbList,
+ BreadcrumbItem,
+ BreadcrumbLink,
+ BreadcrumbPage,
+ BreadcrumbSeparator,
+ BreadcrumbEllipsis,
+}
diff --git a/frontend/spectrackr-main/components/ui/button.tsx b/frontend/spectrackr-main/components/ui/button.tsx
new file mode 100644
index 000000000..d5fbaac56
--- /dev/null
+++ b/frontend/spectrackr-main/components/ui/button.tsx
@@ -0,0 +1,47 @@
+import * as React from "react"
+import { Slot } from "@radix-ui/react-slot"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+
+const buttonVariants = cva(
+ "inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
+ {
+ variants: {
+ variant: {
+ default: "bg-primary text-primary-foreground hover:bg-primary/90",
+ destructive: "bg-destructive text-destructive-foreground hover:bg-destructive/90",
+ outline: "border border-input bg-background hover:bg-accent hover:text-accent-foreground",
+ secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80",
+ ghost: "hover:bg-accent hover:text-accent-foreground",
+ link: "text-primary underline-offset-4 hover:underline",
+ },
+ size: {
+ default: "h-10 px-4 py-2",
+ sm: "h-9 rounded-md px-3",
+ lg: "h-11 rounded-md px-8",
+ icon: "h-10 w-10",
+ },
+ },
+ defaultVariants: {
+ variant: "default",
+ size: "default",
+ },
+ },
+)
+
+export interface ButtonProps
+ extends React.ButtonHTMLAttributes,
+ VariantProps {
+ asChild?: boolean
+}
+
+const Button = React.forwardRef(
+ ({ className, variant, size, asChild = false, ...props }, ref) => {
+ const Comp = asChild ? Slot : "button"
+ return
+
+function Calendar({
+ className,
+ classNames,
+ showOutsideDays = true,
+ ...props
+}: CalendarProps) {
+ return (
+
+>(({ className, ...props }, ref) => (
+
+))
+Card.displayName = "Card"
+
+const CardHeader = React.forwardRef<
+ HTMLDivElement,
+ React.HTMLAttributes
+>(({ className, ...props }, ref) => (
+
+))
+CardHeader.displayName = "CardHeader"
+
+const CardTitle = React.forwardRef<
+ HTMLDivElement,
+ React.HTMLAttributes
+>(({ className, ...props }, ref) => (
+
+))
+CardTitle.displayName = "CardTitle"
+
+const CardDescription = React.forwardRef<
+ HTMLDivElement,
+ React.HTMLAttributes
+>(({ className, ...props }, ref) => (
+
+))
+CardDescription.displayName = "CardDescription"
+
+const CardContent = React.forwardRef<
+ HTMLDivElement,
+ React.HTMLAttributes
+>(({ className, ...props }, ref) => (
+
+))
+CardContent.displayName = "CardContent"
+
+const CardFooter = React.forwardRef<
+ HTMLDivElement,
+ React.HTMLAttributes
+>(({ className, ...props }, ref) => (
+
+))
+CardFooter.displayName = "CardFooter"
+
+export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent }
diff --git a/frontend/spectrackr-main/components/ui/carousel.tsx b/frontend/spectrackr-main/components/ui/carousel.tsx
new file mode 100644
index 000000000..ec505d00d
--- /dev/null
+++ b/frontend/spectrackr-main/components/ui/carousel.tsx
@@ -0,0 +1,262 @@
+"use client"
+
+import * as React from "react"
+import useEmblaCarousel, {
+ type UseEmblaCarouselType,
+} from "embla-carousel-react"
+import { ArrowLeft, ArrowRight } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+import { Button } from "@/components/ui/button"
+
+type CarouselApi = UseEmblaCarouselType[1]
+type UseCarouselParameters = Parameters
+type CarouselOptions = UseCarouselParameters[0]
+type CarouselPlugin = UseCarouselParameters[1]
+
+type CarouselProps = {
+ opts?: CarouselOptions
+ plugins?: CarouselPlugin
+ orientation?: "horizontal" | "vertical"
+ setApi?: (api: CarouselApi) => void
+}
+
+type CarouselContextProps = {
+ carouselRef: ReturnType[0]
+ api: ReturnType[1]
+ scrollPrev: () => void
+ scrollNext: () => void
+ canScrollPrev: boolean
+ canScrollNext: boolean
+} & CarouselProps
+
+const CarouselContext = React.createContext(null)
+
+function useCarousel() {
+ const context = React.useContext(CarouselContext)
+
+ if (!context) {
+ throw new Error("useCarousel must be used within a & CarouselProps
+>(
+ (
+ {
+ orientation = "horizontal",
+ opts,
+ setApi,
+ plugins,
+ className,
+ children,
+ ...props
+ },
+ ref
+ ) => {
+ const [carouselRef, api] = useEmblaCarousel(
+ {
+ ...opts,
+ axis: orientation === "horizontal" ? "x" : "y",
+ },
+ plugins
+ )
+ const [canScrollPrev, setCanScrollPrev] = React.useState(false)
+ const [canScrollNext, setCanScrollNext] = React.useState(false)
+
+ const onSelect = React.useCallback((api: CarouselApi) => {
+ if (!api) {
+ return
+ }
+
+ setCanScrollPrev(api.canScrollPrev())
+ setCanScrollNext(api.canScrollNext())
+ }, [])
+
+ const scrollPrev = React.useCallback(() => {
+ api?.scrollPrev()
+ }, [api])
+
+ const scrollNext = React.useCallback(() => {
+ api?.scrollNext()
+ }, [api])
+
+ const handleKeyDown = React.useCallback(
+ (event: React.KeyboardEvent) => {
+ if (event.key === "ArrowLeft") {
+ event.preventDefault()
+ scrollPrev()
+ } else if (event.key === "ArrowRight") {
+ event.preventDefault()
+ scrollNext()
+ }
+ },
+ [scrollPrev, scrollNext]
+ )
+
+ React.useEffect(() => {
+ if (!api || !setApi) {
+ return
+ }
+
+ setApi(api)
+ }, [api, setApi])
+
+ React.useEffect(() => {
+ if (!api) {
+ return
+ }
+
+ onSelect(api)
+ api.on("reInit", onSelect)
+ api.on("select", onSelect)
+
+ return () => {
+ api?.off("select", onSelect)
+ }
+ }, [api, onSelect])
+
+ return (
+
+
+ {children}
+
+
+ )
+ }
+)
+Carousel.displayName = "Carousel"
+
+const CarouselContent = React.forwardRef<
+ HTMLDivElement,
+ React.HTMLAttributes
+>(({ className, ...props }, ref) => {
+ const { carouselRef, orientation } = useCarousel()
+
+ return (
+
+ )
+})
+CarouselContent.displayName = "CarouselContent"
+
+const CarouselItem = React.forwardRef<
+ HTMLDivElement,
+ React.HTMLAttributes
+>(({ className, ...props }, ref) => {
+ const { orientation } = useCarousel()
+
+ return (
+
+ )
+})
+CarouselItem.displayName = "CarouselItem"
+
+const CarouselPrevious = React.forwardRef<
+ HTMLButtonElement,
+ React.ComponentProps
+>(({ className, variant = "outline", size = "icon", ...props }, ref) => {
+ const { orientation, scrollPrev, canScrollPrev } = useCarousel()
+
+ return (
+
+ Previous slide
+
+ )
+})
+CarouselPrevious.displayName = "CarouselPrevious"
+
+const CarouselNext = React.forwardRef<
+ HTMLButtonElement,
+ React.ComponentProps
+>(({ className, variant = "outline", size = "icon", ...props }, ref) => {
+ const { orientation, scrollNext, canScrollNext } = useCarousel()
+
+ return (
+
+ Next slide
+
+ )
+})
+CarouselNext.displayName = "CarouselNext"
+
+export {
+ type CarouselApi,
+ Carousel,
+ CarouselContent,
+ CarouselItem,
+ CarouselPrevious,
+ CarouselNext,
+}
diff --git a/frontend/spectrackr-main/components/ui/chart.tsx b/frontend/spectrackr-main/components/ui/chart.tsx
new file mode 100644
index 000000000..8620baa3b
--- /dev/null
+++ b/frontend/spectrackr-main/components/ui/chart.tsx
@@ -0,0 +1,365 @@
+"use client"
+
+import * as React from "react"
+import * as RechartsPrimitive from "recharts"
+
+import { cn } from "@/lib/utils"
+
+// Format: { THEME_NAME: CSS_SELECTOR }
+const THEMES = { light: "", dark: ".dark" } as const
+
+export type ChartConfig = {
+ [k in string]: {
+ label?: React.ReactNode
+ icon?: React.ComponentType
+ } & (
+ | { color?: string; theme?: never }
+ | { color?: never; theme: Record }
+ )
+}
+
+type ChartContextProps = {
+ config: ChartConfig
+}
+
+const ChartContext = React.createContext(null)
+
+function useChart() {
+ const context = React.useContext(ChartContext)
+
+ if (!context) {
+ throw new Error("useChart must be used within a
+
+
+ {children}
+
+
+
+ )
+})
+ChartContainer.displayName = "Chart"
+
+const ChartStyle = ({ id, config }: { id: string; config: ChartConfig }) => {
+ const colorConfig = Object.entries(config).filter(
+ ([_, config]) => config.theme || config.color
+ )
+
+ if (!colorConfig.length) {
+ return null
+ }
+
+ return (
+