+ {/* XP Title Bar */}
+
+
+
+
+ LIAR... CHEATER... FIRED.
+
+
+
+ {/*
+
+
+ {/* Dialogue Body */}
+
+
+ {/* Left: Dialogue Text */}
+
+
+ {displayedText}
+ β
+
+
+ {/* Continue Button β hidden when auto-advancing */}
+ {displayedText === message && autoAdvanceDelay === undefined && (
+
+ {altButton && (
+
+ )}
+
+
+ )}
+
+
+ {/* Right: Character */}
+
+
+
+
+
+ {/* Name Tag */}
+
+ Boss Baby
+
+
+
+
+
+
+ );
+};
diff --git a/src/components/game/DesktopIcons.tsx b/src/components/game/DesktopIcons.tsx
new file mode 100644
index 0000000..cfbc793
--- /dev/null
+++ b/src/components/game/DesktopIcons.tsx
@@ -0,0 +1,50 @@
+import React from "react";
+import {
+ Monitor,
+ Trash2,
+ FolderOpen,
+ FileSpreadsheet,
+ MessageSquare,
+ Calendar,
+} from "lucide-react";
+
+const icons = [
+ { icon:
, label: "My Computer", bg: "#1a6db5" },
+ { icon:
, label: "Recycle Bin", bg: "#6b7280" },
+ { icon:
, label: "My Documents", bg: "#d97706" },
+ {
+ icon:
,
+ label: "Sprint_FINAL_v3.xls",
+ bg: "#16a34a",
+ },
+ { icon:
, label: "Slack", bg: "#7c3aed" },
+ { icon:
, label: "Standup.exe", bg: "#dc2626" },
+];
+
+export const DesktopIcons: React.FC = () => {
+ const isMobile = typeof window !== "undefined" && window.innerWidth < 768;
+ if (isMobile) return null;
+ return (
+
+ {icons.map((item) => (
+
+
+ {item.icon}
+
+
+ {item.label}
+
+
+ ))}
+
+ );
+};
diff --git a/src/components/game/DraggableWindow.tsx b/src/components/game/DraggableWindow.tsx
new file mode 100644
index 0000000..1687c2d
--- /dev/null
+++ b/src/components/game/DraggableWindow.tsx
@@ -0,0 +1,107 @@
+import React, { useState, useRef, useCallback } from "react";
+import { X } from "lucide-react";
+
+interface DraggableWindowProps {
+ title: string;
+ icon?: React.ReactNode;
+ children: React.ReactNode;
+ onClose?: () => void;
+ width?: number;
+ height?: number;
+ initialX?: number;
+ initialY?: number;
+ active?: boolean;
+ closable?: boolean;
+ bodyStyle?: React.CSSProperties;
+}
+
+export const DraggableWindow: React.FC
= ({
+ title,
+ icon,
+ children,
+ onClose,
+ width = 400,
+ height,
+ initialX,
+ initialY,
+ active = true,
+ closable = true,
+ bodyStyle,
+}) => {
+ const isMobile = typeof window !== "undefined" && window.innerWidth < 768;
+ const effectiveWidth = isMobile
+ ? Math.min(width, window.innerWidth - 16)
+ : width;
+
+ const [pos, setPos] = useState({
+ x: isMobile
+ ? Math.max(8, (window.innerWidth - effectiveWidth) / 2)
+ : (initialX ??
+ Math.max(
+ 50,
+ (window.innerWidth - width) / 2 + Math.random() * 60 - 30,
+ )),
+ y: isMobile
+ ? 155
+ : (initialY ??
+ Math.max(30, window.innerHeight / 2 - 200 + Math.random() * 60 - 30)),
+ });
+ const dragging = useRef(false);
+ const offset = useRef({ x: 0, y: 0 });
+
+ const onMouseDown = useCallback(
+ (e: React.MouseEvent) => {
+ if (isMobile) return;
+ dragging.current = true;
+ offset.current = { x: e.clientX - pos.x, y: e.clientY - pos.y };
+
+ const onMove = (ev: MouseEvent) => {
+ if (dragging.current) {
+ setPos({
+ x: ev.clientX - offset.current.x,
+ y: ev.clientY - offset.current.y,
+ });
+ }
+ };
+ const onUp = () => {
+ dragging.current = false;
+ window.removeEventListener("mousemove", onMove);
+ window.removeEventListener("mouseup", onUp);
+ };
+ window.addEventListener("mousemove", onMove);
+ window.addEventListener("mouseup", onUp);
+ },
+ [pos, isMobile],
+ );
+
+ return (
+
+
+
+ {icon}
+ {title}
+
+
+ {closable && (
+
+ )}
+
+
+
+ {children}
+
+
+ {confetti.map((c) => (
+
0.5 ? "50%" : "0",
+ }}
+ />
+ ))}
+
+
+
Office Simulator.exe
+
Γ
+
+
+
+
+ YOU'RE FIRED!
+
+
+ Congratulations! You successfully avoided all productivity and
+ earned your freedom.
+
+
+
+
+
+ );
+ }
+
+ return (
+
+
+
+
+
+
+ WOW. CONGRATULATIONS.
+
+
+ You were way too competent at your job. As a
+ reward, you've been promoted to
+
+
+ Senior Vice President of Meetings
+
+
+
+ Dream big. Now spend forever in back-to-back status calls.
+
+
+
+
+
+ );
+};
diff --git a/src/components/game/FailMeter.tsx b/src/components/game/FailMeter.tsx
new file mode 100644
index 0000000..8074ab8
--- /dev/null
+++ b/src/components/game/FailMeter.tsx
@@ -0,0 +1,232 @@
+import React from "react";
+import { STAGE_METER_POINT_CUTOF } from "@/pages/index";
+
+interface FailMeterProps {
+ value: number; // -100 (FIRED) to +100 (PROMOTED)
+}
+
+export const FailMeter: React.FC
= ({ value }) => {
+ const angle = 90 - (value / 100) * 90;
+ const radians = (angle * Math.PI) / 180;
+
+ const cx = 130;
+ const cy = 115;
+ const r = 95;
+ const needleX = cx + r * 0.82 * Math.cos(radians);
+ const needleY = cy - r * 0.82 * Math.sin(radians);
+
+ const status =
+ value <= -STAGE_METER_POINT_CUTOF
+ ? "CRITICAL"
+ : value <= STAGE_METER_POINT_CUTOF
+ ? "NEUTRAL"
+ : "EXCELLENT";
+
+ const statusColor =
+ value <= -STAGE_METER_POINT_CUTOF
+ ? "hsl(0, 70%, 50%)"
+ : value <= STAGE_METER_POINT_CUTOF
+ ? "hsl(45, 90%, 50%)"
+ : "hsl(120, 60%, 40%)";
+
+ return (
+
+
+
+ π₯ Fire-O-Meterβ’
+
+
+
+ {/* Sunken panel */}
+
+ {/* Label bar */}
+
+ AM I GETTING FIRED?
+
+
+ {/* viewBox starts at y=-15 to give clearance above the arc top */}
+
+
+ {/* Status readout */}
+
+ Status:
+
+ {status}
+
+
+ [{value > 0 ? "+" : ""}
+ {value}]
+
+
+
+
+
+
+ π How to Play: {title}
+
+
+ {instructions.map((inst, i) => (
+ -
+ {i + 1}.
+ {inst}
+
+ ))}
+
+
+
+
+
+
+
+
+
+
+
Manager - Workstation Alert
+
+
+
+
+
+
+
+ LIAR...
+
+
+ CHEATER...
+
+
+ FIRED.
+
+
+
+
+
+
+
+
+
+ "I hate liars and cheaters. Why are you hired if you don't
+ do your job?{" "}
+ Focus on work!"
+
+
+
+
+
+
+
+
+
+
+ Boss Baby
+
+
+
+
+
+
+
+
+
+
+
+
+ (Disclaimer: This is not representative of us developers; we are
+ very, very, very good employees.)
+
+
+
+
+
+
+ Tutorials
+
+
+
+
+ Volume
+
+ setVolume(Number(event.target.value) / 100)
+ }
+ className="w-32 accent-primary"
+ />
+
+ {Math.round(volume * 100)}%
+
+
+
+
+
+
+
+
+
+
+ {/* Outlook toolbar */}
+
+ π₯ Inbox
+ |
+ New
+ Reply
+ Forward
+ Delete
+
+ 7 Unread
+
+
+
+ {/* Column headers */}
+
+ !
+ From
+ Subject
+ Time
+
+
+ {/* Email rows */}
+
+ {/* Unread emails */}
+ {unreadEmails.map((email, i) => (
+
+ β
+
+ {email.from}
+
+
+ {email.subject}
+
+
+ {email.time}
+
+
+ ))}
+
+ {/* Divider */}
+
+ Older β Read
+
+
+ {/* Read emails */}
+ {READ_EMAILS.map((email, i) => (
+
+ β
+
+ {email.from}
+
+
+ {email.subject}
+
+ {email.time}
+
+ ))}
+
+
+ {/* Status bar */}
+
+ 12 Items, 7 Unread
+
+ Connected to Exchange Server
+
+
+ {/* Info / Emails */}
+
+
+ Emails: {emailsLeft}
+
+
+
+ {/* Canvas */}
+
+
+
+
+ {/* Mobile D-pad */}
+ {isMobile && (
+
+
+
+
+
+
+
+
+ )}
+
+ {/* Status Bar */}
+
+ Avoid the 6 coworkers!
+
+
+ {/* Header: Player Avatar (Left) vs Marty Avatar (Right) */}
+
+ {playerAvatar ? (
+
+ ) : (
+
+ )}
+
+ {botAvatar && (
+
+ )}
+
+
+
+ {isMobile
+ ? "Touch the canvas to move your paddle."
+ : "W/S or β/β to move."}{" "}
+ First to 3 wins!
+
+
+
+
+
+
+
+ YOU: {scores.player} | MARTY SUPREME: {scores.ai}
+
+
+
+ {/* Title Bar β drag handle */}
+
+
+
+
+ Google Chrome - {browserFavicon} {browserTitle}
+
+
+
+
+ _
+
+
+ β‘
+
+
+ β
+
+
+
+
+ {/* Browser Toolbar */}
+
+
β
+
β
+
β³
+
+ {browserUrl}
+
+
+
+ {/* Tabs */}
+
+
+
+
+
+
+ {/* Content */}
+
+ {activeTab === "cricket" && (
+ <>
+
+ π IND vs AUS - LIVE
+
+
+
+
+
INDIA
+
+ {match.india.runs}/{match.india.wickets}
+
+
+ ({formatOvers(match.india.balls)} ov)
+
+
+
vs
+
+
AUSTRALIA
+
+ {match.australia.runs}/{match.australia.wickets}
+
+
+ ({formatOvers(match.australia.balls)} ov)
+
+
+
+
+
+
Current RR
+
{currentRate}
+
+
+
+
Req RR
+
{requiredRate}
+
+
+
Balls Left
+
{ballsRemaining}
+
+
+
+
Last Over Feed
+
+ {match.recentBalls.length > 0
+ ? match.recentBalls.join(" ")
+ : "No balls yet"}
+
+
+
+
+ {liveLine}
+
+
+ {match.lastBallCommentary}
+
+
+
+
+
+ Live Chat (2.4k)
+
+ Scorecard
+ Commentary
+
+
+
+ )}
+
+ {activeTab === "cat" && (
+
+
+ π± Cat Videos - LIVE
+
+
+
+ )}
+
+ {activeTab === "youtube" && (
+
+
βΆ YouTube
+
+
+
+
+
+ probably your office Wi-Fi.
+
+
+ )}
+
+
+
+ {/* Toolbar */}
+
+ Project Dashboard
+
+
+ {/* Board */}
+
+ {[
+ { title: "TO DO", items: ["Fix mobile", "Docs", "Dark mode"] },
+ { title: "IN PROGRESS", items: ["Auth flow", "Refactor API"] },
+ { title: "DONE", items: ["Update README"] },
+ ].map((col) => (
+
+
+ {col.title}
+
+
+
+ {col.items.map((i) => (
+
+ {i}
+
+ ))}
+
+
+ ))}
+
+
+ {/* Status */}
+
+ 47 issues remaining
+
+
+
+
+
+ {punishment.icon}
+ {punishment.title}
+
+
+
+ {punishmentType === "email" ? (
+
+ ) : (
+ <>{punishment.content}
+ )}
+
+
+
+
+
+
+ {/* Quick launch icons (Win7 style) */}
+
+ {[
+ { icon: , label: "Chrome" },
+ { icon: , label: "Teams" },
+ { icon: , label: "Explorer" },
+ ].map((item) => (
+
+ ))}
+
+
+
+ {showVolumeControl && (
+
+
+ VOL
+
+ setVolume(Number(event.target.value) / 100)
+ }
+ className="w-24 accent-primary"
+ />
+
+ {Math.round(volume * 100)}%
+
+
+
+ )}
+
+
+
+
+ {timeStr}
+
+
+ {dateStr}
+
+
+
+
+ {/* Sidebar */}
+
+
Channels
+
# General
+
# Engineering
+
# Incidents
+
+
+ {/* Chat */}
+
+
+ Engineering Chat
+
+
+
+
+ Sarah: Prod DB connections high.
+
+
+ Michael: API latency increasing.
+
+
+ You: Scaling pool?
+
+
+ Sarah: Rolling back deployment.
+
+
+
+
+ Type a message...
+
+
+
+
+ {/* XP Title Bar */}
+
+ π¬ Microsoft Teams
+
+
+
+ {/* Body */}
+
+
+
{
+ (e.target as HTMLImageElement).style.display = "none";
+ }}
+ />
+
+ Boss Baby
+
+ JOIN MY TEAMS. We need to discuss cross-functional alignment
+
+
+
+
+
+
+
+
+
+
+ Clear rows to reassign Jiras — let them stack and{" "}
+
+ they're all yours
+
+
+
+
+ β Crit
+ β High
+ β Med
+ β Low
+
+
+ {timeLeft}s
+
+
+
+
+ {flashMsg && (
+
+
+ {flashMsg}
+
+
+ )}
+
+ {isMobile ? (
+
+
+
+
+
+
+ ) : (
+
+ β rotate Β· β β move Β· β drop
+
+ )}
+
+
+ Decode the corporate buzzword!
+
+ {error && (
+
+ {error}
+
+ )}
+
+ {/* Word rows */}
+
+ {rows.map((row, ri) => (
+
+ {[0, 1, 2, 3, 4].map((ci) => {
+ const isCurrentRow = ri === guesses.length && !done;
+ const letter = isCurrentRow ? current[ci] || "" : row[ci] || "";
+ const colorClass = isCurrentRow
+ ? "bg-card border border-border"
+ : getColor(letter, ci, row);
+ return (
+
+ {letter}
+
+ );
+ })}
+
+ ))}
+
+
+ {/* On-screen keyboard */}
+ {!done && (
+
+ {KEYBOARD_ROWS.map((row, ri) => (
+
+ {row.map((key) => (
+
+ ))}
+
+ ))}
+
+ )}
+
+ {/* Show target if failed */}
+ {done && guesses[guesses.length - 1] !== target && (
+
+ The word was: {target}
+
+ )}
+
+ {/* Menu */}
+
+ Call
+ View
+ Tools
+ Help
+
+
+ {/* Main video */}
+
+
+
+
+
+ PM β Screen Sharing (Poor Connection)
+
+
+
+
+ {/* Participant strip */}
+
+ {PARTICIPANTS.map((p) => (
+
+
+ {p.initials}
+
+
{p.name}
+
+ ))}
+
+
+ {/* Status */}
+
+ Connected β’ 12 participants
+
+
{children}
+
+));
+
+AccordionContent.displayName = AccordionPrimitive.Content.displayName;
+
+export { Accordion, AccordionItem, AccordionTrigger, AccordionContent };
diff --git a/src/components/ui/alert-dialog.tsx b/src/components/ui/alert-dialog.tsx
new file mode 100644
index 0000000..72b0afe
--- /dev/null
+++ b/src/components/ui/alert-dialog.tsx
@@ -0,0 +1,139 @@
+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/src/components/ui/alert.tsx b/src/components/ui/alert.tsx
new file mode 100644
index 0000000..13219e7
--- /dev/null
+++ b/src/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/src/components/ui/aspect-ratio.tsx b/src/components/ui/aspect-ratio.tsx
new file mode 100644
index 0000000..c9e6f4b
--- /dev/null
+++ b/src/components/ui/aspect-ratio.tsx
@@ -0,0 +1,5 @@
+import * as AspectRatioPrimitive from "@radix-ui/react-aspect-ratio";
+
+const AspectRatio = AspectRatioPrimitive.Root;
+
+export { AspectRatio };
diff --git a/src/components/ui/avatar.tsx b/src/components/ui/avatar.tsx
new file mode 100644
index 0000000..444b1db
--- /dev/null
+++ b/src/components/ui/avatar.tsx
@@ -0,0 +1,48 @@
+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/src/components/ui/badge.tsx b/src/components/ui/badge.tsx
new file mode 100644
index 0000000..d3d5d60
--- /dev/null
+++ b/src/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/src/components/ui/breadcrumb.tsx b/src/components/ui/breadcrumb.tsx
new file mode 100644
index 0000000..6934f83
--- /dev/null
+++ b/src/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) => );
+Breadcrumb.displayName = "Breadcrumb";
+
+const BreadcrumbList = React.forwardRef<
+ HTMLOListElement,
+ React.ComponentPropsWithoutRef<"ol">
+>(({ className, ...props }, ref) => (
+
+));
+BreadcrumbList.displayName = "BreadcrumbList";
+
+const BreadcrumbItem = React.forwardRef<
+ HTMLLIElement,
+ React.ComponentPropsWithoutRef<"li">
+>(({ className, ...props }, ref) => (
+
+));
+BreadcrumbItem.displayName = "BreadcrumbItem";
+
+const BreadcrumbLink = React.forwardRef<
+ HTMLAnchorElement,
+ React.ComponentPropsWithoutRef<"a"> & {
+ asChild?: boolean;
+ }
+>(({ asChild, className, ...props }, ref) => {
+ const Comp = asChild ? Slot : "a";
+
+ return (
+
+ );
+});
+BreadcrumbLink.displayName = "BreadcrumbLink";
+
+const BreadcrumbPage = React.forwardRef<
+ HTMLSpanElement,
+ React.ComponentPropsWithoutRef<"span">
+>(({ className, ...props }, ref) => (
+
+));
+BreadcrumbPage.displayName = "BreadcrumbPage";
+
+const BreadcrumbSeparator = ({
+ children,
+ className,
+ ...props
+}: React.ComponentProps<"li">) => (
+ svg]:size-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/src/components/ui/button.tsx b/src/components/ui/button.tsx
new file mode 100644
index 0000000..d6c7bcb
--- /dev/null
+++ b/src/components/ui/button.tsx
@@ -0,0 +1,56 @@
+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 gap-2 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 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
+ {
+ 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 (
+
+ );
+ },
+);
+Button.displayName = "Button";
+
+export { Button, buttonVariants };
diff --git a/src/components/ui/calendar.tsx b/src/components/ui/calendar.tsx
new file mode 100644
index 0000000..d6c7bcb
--- /dev/null
+++ b/src/components/ui/calendar.tsx
@@ -0,0 +1,56 @@
+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 gap-2 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 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
+ {
+ 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 (
+
+ );
+ },
+);
+Button.displayName = "Button";
+
+export { Button, buttonVariants };
diff --git a/src/components/ui/card.tsx b/src/components/ui/card.tsx
new file mode 100644
index 0000000..dc3b01d
--- /dev/null
+++ b/src/components/ui/card.tsx
@@ -0,0 +1,86 @@
+import * as React from "react";
+
+import { cn } from "@/lib/utils";
+
+const Card = React.forwardRef<
+ HTMLDivElement,
+ React.HTMLAttributes
+>(({ className, ...props }, ref) => (
+
+));
+Card.displayName = "Card";
+
+const CardHeader = React.forwardRef<
+ HTMLDivElement,
+ React.HTMLAttributes
+>(({ className, ...props }, ref) => (
+
+));
+CardHeader.displayName = "CardHeader";
+
+const CardTitle = React.forwardRef<
+ HTMLParagraphElement,
+ React.HTMLAttributes
+>(({ className, ...props }, ref) => (
+
+));
+CardTitle.displayName = "CardTitle";
+
+const CardDescription = React.forwardRef<
+ HTMLParagraphElement,
+ 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/src/components/ui/carousel.tsx b/src/components/ui/carousel.tsx
new file mode 100644
index 0000000..c4111e3
--- /dev/null
+++ b/src/components/ui/carousel.tsx
@@ -0,0 +1,260 @@
+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 ");
+ }
+
+ return context;
+}
+
+const Carousel = React.forwardRef<
+ HTMLDivElement,
+ React.HTMLAttributes & 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 (
+
+ );
+});
+CarouselPrevious.displayName = "CarouselPrevious";
+
+const CarouselNext = React.forwardRef<
+ HTMLButtonElement,
+ React.ComponentProps
+>(({ className, variant = "outline", size = "icon", ...props }, ref) => {
+ const { orientation, scrollNext, canScrollNext } = useCarousel();
+
+ return (
+
+ );
+});
+CarouselNext.displayName = "CarouselNext";
+
+export {
+ type CarouselApi,
+ Carousel,
+ CarouselContent,
+ CarouselItem,
+ CarouselPrevious,
+ CarouselNext,
+};
diff --git a/src/components/ui/chart.tsx b/src/components/ui/chart.tsx
new file mode 100644
index 0000000..ba084ed
--- /dev/null
+++ b/src/components/ui/chart.tsx
@@ -0,0 +1,363 @@
+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 ");
+ }
+
+ return context;
+}
+
+const ChartContainer = React.forwardRef<
+ HTMLDivElement,
+ React.ComponentProps<"div"> & {
+ config: ChartConfig;
+ children: React.ComponentProps<
+ typeof RechartsPrimitive.ResponsiveContainer
+ >["children"];
+ }
+>(({ id, className, children, config, ...props }, ref) => {
+ const uniqueId = React.useId();
+ const chartId = `chart-${id || uniqueId.replace(/:/g, "")}`;
+
+ return (
+
+
+
+
+ {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 (
+ 
-
-
-
-
-
-
- 
-
+
+---
+
+## π₯ The "Magical Interns" (The Team)
-Click on a sponsor or checkout the [Challenges Folder](challenges/)
+We are a group of placement students currently being "wonderful" in the real world, but "terrible" in this repo:
-#### [Nao Documentation](http://doc.aldebaran.com/2-1/nao/nao-connecting.html#nao-connecting)
-#### [Nao Repo from SoCET](https://github.com/RGU-Computing/pepper)
+- **[Arman Shaikh]** - Chief Sabotage Officer
+- **[Charis Drain]** - Head of Corporate Yap
+- **[Himani Patney]** - Jira Ticket Architect
+- **[Vidhi Jalan]** - Boss Baby Handler
+- **[Lemar Tokham]** - Professional Email Ignorer
------
+---
-