[V0_FILE]typescriptreact:file="components/ui/progress.tsx" "use client" import * as React from "react" import * as ProgressPrimitive from "@radix-ui/react-progress" import { cn } from "@/lib/utils" const Progress = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, value, ...props }, ref) => ( )) Progress.displayName = ProgressPrimitive.Root.displayName export { Progress } [V0_FILE]typescriptreact:file="components/ui/avatar.tsx" "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 } [V0_FILE]typescriptreact:file="components/ui/button.tsx" 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 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", }, }, ) 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 } [V0_FILE]typescriptreact:file="lib/utils.ts" import { type ClassValue, clsx } from "clsx" import { twMerge } from "tailwind-merge" export function cn(...inputs: ClassValue[]) { return twMerge(clsx(inputs)) } [V0_FILE]typescriptreact:file="tailwind.config.js" /** @type {import('tailwindcss').Config} */ module.exports = { darkMode: ["class"], content: [ "./pages/**/*.{ts,tsx}", "./components/**/*.{ts,tsx}", "./app/**/*.{ts,tsx}", "./src/**/*.{ts,tsx}", "*.{js,ts,jsx,tsx,mdx}", ], theme: { container: { center: true, padding: "2rem", screens: { "2xl": "1400px", }, }, extend: { colors: { border: "hsl(var(--border))", input: "hsl(var(--input))", ring: "hsl(var(--ring))", background: "hsl(var(--background))", foreground: "hsl(var(--foreground))", primary: { DEFAULT: "hsl(var(--primary))", foreground: "hsl(var(--primary-foreground))", }, secondary: { DEFAULT: "hsl(var(--secondary))", foreground: "hsl(var(--secondary-foreground))", }, destructive: { DEFAULT: "hsl(var(--destructive))", foreground: "hsl(var(--destructive-foreground))", }, muted: { DEFAULT: "hsl(var(--muted))", foreground: "hsl(var(--muted-foreground))", }, accent: { DEFAULT: "hsl(var(--accent))", foreground: "hsl(var(--accent-foreground))", }, popover: { DEFAULT: "hsl(var(--popover))", foreground: "hsl(var(--popover-foreground))", }, card: { DEFAULT: "hsl(var(--card))", foreground: "hsl(var(--card-foreground))", }, }, borderRadius: { lg: "var(--radius)", md: "calc(var(--radius) - 2px)", sm: "calc(var(--radius) - 4px)", }, keyframes: { "accordion-down": { from: { height: 0 }, to: { height: "var(--radix-accordion-content-height)" }, }, "accordion-up": { from: { height: "var(--radix-accordion-content-height)" }, to: { height: 0 }, }, }, animation: { "accordion-down": "accordion-down 0.2s ease-out", "accordion-up": "accordion-up 0.2s ease-out", }, }, }, plugins: [require("tailwindcss-animate")], } [V0_FILE]css:file="app/globals.css" @tailwind base; @tailwind components; @tailwind utilities; @layer base { :root { --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 80% 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: 212.7 26.8% 83.9%; --radius: 0.5rem; } } @layer base { * { @apply border-border; } body { @apply bg-background text-foreground; } } [V0_FILE]typescriptreact:file="components/ui/tabs.tsx" "use client" import * as React from "react" import * as TabsPrimitive from "@radix-ui/react-tabs" import { cn } from "@/lib/utils" const Tabs = TabsPrimitive.Root const TabsList = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )) TabsList.displayName = TabsPrimitive.List.displayName const TabsTrigger = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )) TabsTrigger.displayName = TabsPrimitive.Trigger.displayName const TabsContent = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )) TabsContent.displayName = TabsPrimitive.Content.displayName export { Tabs, TabsList, TabsTrigger, TabsContent } [V0_FILE]typescriptreact:file="components/ui/toast.tsx" showLineNumbers="true" isFixed="true" isQuickEdit="true" import * as React from "react" import * as ToastPrimitives from "@radix-ui/react-toast" import { cva, type VariantProps } from "class-variance-authority" import { X } from "lucide-react" import { cn } from "@/lib/utils" const ToastProvider = ToastPrimitives.Provider const ToastViewport = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )) ToastViewport.displayName = ToastPrimitives.Viewport.displayName const toastVariants = cva( "group pointer-events-auto relative flex w-full items-center justify-between space-x-4 overflow-hidden rounded-md border p-6 pr-8 shadow-lg transition-all data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-[var(--radix-toast-swipe-end-x)] data-[swipe=move]:translate-x-[var(--radix-toast-swipe-move-x)] data-[swipe=move]:transition-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[swipe=end]:animate-out data-[state=closed]:fade-out-80 data-[state=closed]:slide-out-to-right-full data-[state=open]:slide-in-from-top-full data-[state=open]:sm:slide-in-from-bottom-full", { variants: { variant: { default: "border bg-background", destructive: "destructive group border-destructive bg-destructive text-destructive-foreground", success: "border-0 bg-emerald-800 text-white", }, }, defaultVariants: { variant: "default", }, }, ) const Toast = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef & VariantProps & { icon?: React.ReactNode } >(({ className, variant, icon, children, ...props }, ref) => { return (

{icon &&

{icon}

} {children}

) }) Toast.displayName = ToastPrimitives.Root.displayName const ToastAction = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )) ToastAction.displayName = ToastPrimitives.Action.displayName const ToastClose = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )) ToastClose.displayName = ToastPrimitives.Close.displayName const ToastTitle = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )) ToastTitle.displayName = ToastPrimitives.Title.displayName const ToastDescription = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )) ToastDescription.displayName = ToastPrimitives.Description.displayName type ToastProps = React.ComponentPropsWithoutRef type ToastActionElement = React.ReactElement export { type ToastProps, type ToastActionElement, ToastProvider, ToastViewport, Toast, ToastTitle, ToastDescription, ToastClose, ToastAction, } [V0_FILE]typescriptreact:file="components/ui/use-toast.ts" isFixed="true" isQuickEdit="true" "use client" import * as React from "react" import type { ToastActionElement, ToastProps } from "@/components/ui/toast" const TOAST_LIMIT = 1 const TOAST_REMOVE_DELAY = 1000000 type ToasterToast = ToastProps & { id: string title?: React.ReactNode description?: React.ReactNode action?: ToastActionElement } const actionTypes = { ADD_TOAST: "ADD_TOAST", UPDATE_TOAST: "UPDATE_TOAST", DISMISS_TOAST: "DISMISS_TOAST", REMOVE_TOAST: "REMOVE_TOAST", } as const let count = 0 function genId() { count = (count + 1) % Number.MAX_VALUE return count.toString() } type ActionType = typeof actionTypes type Action = | { type: ActionType["ADD_TOAST"] toast: ToasterToast } | { type: ActionType["UPDATE_TOAST"] toast: Partial } | { type: ActionType["DISMISS_TOAST"] toastId?: ToasterToast["id"] } | { type: ActionType["REMOVE_TOAST"] toastId?: ToasterToast["id"] } interface State { toasts: ToasterToast[] } const toastTimeouts = new Map>() const addToRemoveQueue = (toastId: string) => { if (toastTimeouts.has(toastId)) { return } const timeout = setTimeout(() => { toastTimeouts.delete(toastId) dispatch({ type: "REMOVE_TOAST", toastId: toastId, }) }, TOAST_REMOVE_DELAY) toastTimeouts.set(toastId, timeout) } export const reducer = (state: State, action: Action): State => { switch (action.type) { case "ADD_TOAST": return { ...state, toasts: [action.toast, ...state.toasts].slice(0, TOAST_LIMIT), } case "UPDATE_TOAST": return { ...state, toasts: state.toasts.map((t) => (t.id === action.toast.id ? { ...t, ...action.toast } : t)), } case "DISMISS_TOAST": { const { toastId } = action // ! Side effects ! - This could be extracted into a dismissToast() action, // but I'll keep it here for simplicity if (toastId) { addToRemoveQueue(toastId) } else { state.toasts.forEach((toast) => { addToRemoveQueue(toast.id) }) } return { ...state, toasts: state.toasts.map((t) => t.id === toastId || toastId === undefined ? { ...t, open: false, } : t, ), } } case "REMOVE_TOAST": if (action.toastId === undefined) { return { ...state, toasts: [], } } return { ...state, toasts: state.toasts.filter((t) => t.id !== action.toastId), } } } const listeners: Array<(state: State) => void> = [] let memoryState: State = { toasts: [] } function dispatch(action: Action) { memoryState = reducer(memoryState, action) listeners.forEach((listener) => { listener(memoryState) }) } type Toast = Omit function toast({ ...props }: Toast) { const id = genId() const update = (props: ToasterToast) => dispatch({ type: "UPDATE_TOAST", toast: { ...props, id }, }) const dismiss = () => dispatch({ type: "DISMISS_TOAST", toastId: id }) dispatch({ type: "ADD_TOAST", toast: { ...props, id, open: true, onOpenChange: (open) => { if (!open) dismiss() }, }, }) return { id: id, dismiss, update, } } function useToast() { const [state, setState] = React.useState(memoryState) React.useEffect(() => { listeners.push(setState) return () => { const index = listeners.indexOf(setState) if (index > -1) { listeners.splice(index, 1) } } }, []) // Removed unnecessary dependency: [state] return { ...state, toast, dismiss: (toastId?: string) => dispatch({ type: "DISMISS_TOAST", toastId }), } } export { useToast, toast } [V0_FILE]typescriptreact:file="components/ui/toaster.tsx" "use client" import { Toast, ToastClose, ToastDescription, ToastProvider, ToastTitle, ToastViewport } from "@/components/ui/toast" import { useToast } from "@/components/ui/use-toast" export function Toaster() { const { toasts } = useToast() return ( {toasts.map(({ id, title, description, action, ...props }) => (

{title && {title}} {description && {description}}

{action} ))} ) } [V0_FILE]typescriptreact:file="components/ui/alert-dialog.tsx" "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, } [V0_FILE]typescriptreact:file="components/challenge-banner.tsx" "use client" import { Sparkles, Users } from "lucide-react" import { Button } from "@/components/ui/button" import { useState } from "react" import { ChallengeDetailsDialog } from "./challenge-details-dialog" interface ChallengeBannerProps { onAcceptChallenge: () => void } export function ChallengeBanner({ onAcceptChallenge }: ChallengeBannerProps) { const [showDetails, setShowDetails] = useState(false) const isGroupChallenge = true // This challenge is a group challenge return ( <>

New Challenge: Clean Code Innovation!

{isGroupChallenge && ( Group Challenge )}

Team up with 2-4 randomly assigned members and showcase your programming skills to earn up to 5000 XP by implementing clean code best practices together.

) } [V0_FILE]typescriptreact:file="components/challenge-details-dialog.tsx" "use client" import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription, DialogFooter, } from "@/components/ui/dialog" import { Button } from "@/components/ui/button" import { useState, useEffect } from "react" import Image from "next/image" import { useToast } from "@/components/ui/use-toast" import { Check, Users } from "lucide-react" import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar" interface ChallengeDetailsProps { open: boolean onOpenChange: (open: boolean) => void onAcceptChallenge: () => void } // Mock data for available team members const availableMembers = [ { id: 1, nickname: "techmaster", name: "John Doe", avatar: "/placeholder.svg" }, { id: 2, nickname: "codewizard", name: "Jane Smith", avatar: "/placeholder.svg" }, { id: 3, nickname: "debugger", name: "Mike Johnson", avatar: "/placeholder.svg" }, { id: 4, nickname: "devninja", name: "Sarah Wilson", avatar: "/placeholder.svg" }, { id: 5, nickname: "bytecoder", name: "Chris Brown", avatar: "/placeholder.svg" }, { id: 6, nickname: "algoguru", name: "Emma Davis", avatar: "/placeholder.svg" }, ] export function ChallengeDetailsDialog({ open, onOpenChange, onAcceptChallenge }: ChallengeDetailsProps) { const { toast } = useToast() const endDate = new Date("2024-03-31T23:59:59") const [timeLeft, setTimeLeft] = useState<{ days: number hours: number minutes: number seconds: number }>({ days: 0, hours: 0, minutes: 0, seconds: 0 }) const [assignedTeam, setAssignedTeam] = useState([]) useEffect(() => { const timer = setInterval(() => { const now = new Date() const difference = endDate.getTime() - now.getTime() if (difference > 0) { setTimeLeft({ days: Math.floor(difference / (1000 * 60 * 60 * 24)), hours: Math.floor((difference / (1000 * 60 * 60)) % 24), minutes: Math.floor((difference / 1000 / 60) % 60), seconds: Math.floor((difference / 1000) % 60), }) } else { clearInterval(timer) } }, 1000) return () => clearInterval(timer) }, [endDate]) const assignRandomTeam = () => { // Randomly select 2-4 team members const teamSize = Math.floor(Math.random() * 3) + 2 // Random number between 2 and 4 const shuffled = [...availableMembers].sort(() => 0.5 - Math.random()) return shuffled.slice(0, teamSize) } const handleAcceptChallenge = () => { const team = assignRandomTeam() setAssignedTeam(team) if (onAcceptChallenge) { onAcceptChallenge() onOpenChange(false) // Show success toast with team information toast({ description: (

You've successfully joined the Clean Code Challenge!

Your assigned team:

{team.map((member) => ( {member.nickname.slice(0, 2).toUpperCase()} ))}

+You

), className: "bg-emerald-800 border-0 text-white", icon: , }) } } return ( ) } [V0_FILE]typescriptreact:file="components/ui/dialog.tsx" "use client" import * as React from "react" import * as DialogPrimitive from "@radix-ui/react-dialog" import { X } from "lucide-react" import { cn } from "@/lib/utils" const Dialog = DialogPrimitive.Root const DialogTrigger = DialogPrimitive.Trigger const DialogPortal = DialogPrimitive.Portal const DialogClose = DialogPrimitive.Close const DialogOverlay = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )) DialogOverlay.displayName = DialogPrimitive.Overlay.displayName const DialogContent = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, children, ...props }, ref) => ( {children} Close )) DialogContent.displayName = DialogPrimitive.Content.displayName const DialogHeader = ({ className, ...props }: React.HTMLAttributes) => (

) DialogHeader.displayName = "DialogHeader" const DialogFooter = ({ className, ...props }: React.HTMLAttributes) => (

) DialogFooter.displayName = "DialogFooter" const DialogTitle = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )) DialogTitle.displayName = DialogPrimitive.Title.displayName const DialogDescription = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )) DialogDescription.displayName = DialogPrimitive.Description.displayName export { Dialog, DialogPortal, DialogOverlay, DialogClose, DialogTrigger, DialogContent, DialogHeader, DialogFooter, DialogTitle, DialogDescription, } [V0_FILE]typescriptreact:file="components/current-challenge-section.tsx" "use client" import { Button } from "@/components/ui/button" import { useEffect, useState } from "react" import { Clock, AlertTriangle, Users } from "lucide-react" import { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle, } from "@/components/ui/alert-dialog" import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar" interface TeamMember { id: number nickname: string name: string avatar: string } interface CurrentChallengeProps { challengeName: string endDate: Date onLeaveChallenge: () => void teamMembers?: TeamMember[] } export function CurrentChallengeSection({ challengeName, endDate, onLeaveChallenge, teamMembers, }: CurrentChallengeProps) { const [timeLeft, setTimeLeft] = useState<{ days: number hours: number minutes: number seconds: number }>({ days: 0, hours: 0, minutes: 0, seconds: 0 }) const [showLeaveDialog, setShowLeaveDialog] = useState(false) useEffect(() => { const timer = setInterval(() => { const now = new Date() const difference = endDate.getTime() - now.getTime() if (difference > 0) { setTimeLeft({ days: Math.floor(difference / (1000 * 60 * 60 * 24)), hours: Math.floor((difference / (1000 * 60 * 60)) % 24), minutes: Math.floor((difference / 1000 / 60) % 60), seconds: Math.floor((difference / 1000) % 60), }) } else { clearInterval(timer) } }, 1000) return () => clearInterval(timer) }, [endDate]) const handleLeaveChallenge = () => { onLeaveChallenge() setShowLeaveDialog(false) } return ( <>

My Current Challenge

{challengeName}

{teamMembers && ( Group Challenge )}

Time Remaining

{timeLeft.days}

Days

{timeLeft.hours}

Hours

{timeLeft.minutes}

Minutes

{timeLeft.seconds}

Seconds

{/* Team Members Section */} {teamMembers && teamMembers.length > 0 && (

Your Team

{teamMembers.map((member) => ( {member.nickname.slice(0, 2).toUpperCase()} ))}

+You

{teamMembers.map((member) => ( {member.nickname} ))}

)}

Leave Challenge Are you sure you want to leave this challenge? All your progress will be lost {teamMembers && teamMembers.length > 0 && " and your team will be notified"}.

Cancel Yes, leave challenge ) } [V0_FILE]typescriptreact:file="components/team-selection-dialog.tsx" "use client" import { useState } from "react" import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription, DialogFooter, } from "@/components/ui/dialog" import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList } from "@/components/ui/command" import { Button } from "@/components/ui/button" import { ScrollArea } from "@/components/ui/scroll-area" import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar" import { X, AlertCircle, Users } from "lucide-react" import { Alert, AlertDescription } from "@/components/ui/alert" // Mock data for available team members const availableMembers = [ { id: 1, nickname: "techmaster", name: "John Doe", avatar: "/placeholder.svg" }, { id: 2, nickname: "codewizard", name: "Jane Smith", avatar: "/placeholder.svg" }, { id: 3, nickname: "debugger", name: "Mike Johnson", avatar: "/placeholder.svg" }, { id: 4, nickname: "devninja", name: "Sarah Wilson", avatar: "/placeholder.svg" }, { id: 5, nickname: "bytecoder", name: "Chris Brown", avatar: "/placeholder.svg" }, { id: 6, nickname: "algoguru", name: "Emma Davis", avatar: "/placeholder.svg" }, ] interface TeamMember { id: number nickname: string name: string avatar: string } interface TeamSelectionDialogProps { open: boolean onOpenChange: (open: boolean) => void minTeamSize: number maxTeamSize: number onConfirm: (members: TeamMember[]) => void } export function TeamSelectionDialog({ open, onOpenChange, minTeamSize, maxTeamSize, onConfirm, }: TeamSelectionDialogProps) { const [selectedMembers, setSelectedMembers] = useState([]) const [searchOpen, setSearchOpen] = useState(false) const [error, setError] = useState(null) const handleSelectMember = (member: TeamMember) => { if (selectedMembers.length >= maxTeamSize) { setError(`No puedes seleccionar más de ${maxTeamSize} miembros`) return } if (selectedMembers.find((m) => m.id === member.id)) return setSelectedMembers([...selectedMembers, member]) setError(null) } const handleRemoveMember = (memberId: number) => { setSelectedMembers(selectedMembers.filter((m) => m.id !== memberId)) setError(null) } const handleConfirm = () => { if (selectedMembers.length < minTeamSize) { setError(`Debes seleccionar al menos ${minTeamSize} compañeros para unirte a este evento.`) return } onConfirm(selectedMembers) setSelectedMembers([]) // Reset selection after confirming onOpenChange(false) } return ( ) } [V0_FILE]typescriptreact:file="components/ui/scroll-area.tsx" "use client" import * as React from "react" import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area" import { cn } from "@/lib/utils" const ScrollArea = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, children, ...props }, ref) => ( {children} )) ScrollArea.displayName = ScrollAreaPrimitive.Root.displayName const ScrollBar = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, orientation = "vertical", ...props }, ref) => ( )) ScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName export { ScrollArea, ScrollBar } [V0_FILE]typescriptreact:file="components/ui/alert.tsx" 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 px-4 py-3 text-sm [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground [&>svg~*]:pl-7", { 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>( ({ className, ...props }, ref) => (

), ) AlertTitle.displayName = "AlertTitle" const AlertDescription = React.forwardRef>( ({ className, ...props }, ref) => (
), ) AlertDescription.displayName = "AlertDescription" export { Alert, AlertTitle, AlertDescription } [V0_FILE]typescriptreact:file="components/ui/command.tsx" "use client" import * as React from "react" import type { DialogProps } from "@radix-ui/react-dialog" import { Command as CommandPrimitive } from "cmdk" import { Search } from "lucide-react" import { cn } from "@/lib/utils" import { Dialog, DialogContent } from "@/components/ui/dialog" const Command = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )) Command.displayName = CommandPrimitive.displayName interface CommandDialogProps extends DialogProps {} const CommandDialog = ({ children, ...props }: CommandDialogProps) => { return ( {children} ) } const CommandInput = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => (

)) CommandInput.displayName = CommandPrimitive.Input.displayName const CommandList = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )) CommandList.displayName = CommandPrimitive.List.displayName const CommandEmpty = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >((props, ref) => ) CommandEmpty.displayName = CommandPrimitive.Empty.displayName const CommandGroup = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )) CommandGroup.displayName = CommandPrimitive.Group.displayName const CommandSeparator = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )) CommandSeparator.displayName = CommandPrimitive.Separator.displayName const CommandItem = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )) CommandItem.displayName = CommandPrimitive.Item.displayName const CommandShortcut = ({ className, ...props }: React.HTMLAttributes) => { return } CommandShortcut.displayName = "CommandShortcut" export { Command, CommandDialog, CommandInput, CommandList, CommandEmpty, CommandGroup, CommandItem, CommandShortcut, CommandSeparator, } [V0_FILE]typescriptreact:file="app/page.tsx" isQuickEdit="true" "use client" import Image from "next/image" import { Bell, Camera, Settings, Heart, Crown, X, AlertTriangle, Code, Users, Lightbulb, Handshake, Check, } from "lucide-react" import { Progress } from "@/components/ui/progress" import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar" import { Button } from "@/components/ui/button" import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs" import { useToast } from "@/components/ui/use-toast" import { Toaster } from "@/components/ui/toaster" import { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle, } from "@/components/ui/alert-dialog" import { useState } from "react" import { CalendarDays, Clock, MapPin } from "lucide-react" import { ChallengeBanner } from "@/components/challenge-banner" import { CurrentChallengeSection } from "@/components/current-challenge-section" import { TeamSelectionDialog } from "@/components/team-selection-dialog" type TeamMember = { id: number nickname: string name: string avatar: string } type Event = { id: number title: string description: string date: string time: string location: string image: string teamMembers?: TeamMember[] // Add team members to event type } type RegisteredEvent = { eventId: number teamMembers?: TeamMember[] } const teamStats = { technology: [ { month: "Jan", value: 65 }, { month: "Feb", value: 75 }, { month: "Mar", value: 85 }, ], wellBeing: [ { month: "Jan", value: 70 }, { month: "Feb", value: 80 }, { month: "Mar", value: 90 }, ], connections: [ { month: "Jan", value: 60 }, { month: "Feb", value: 85 }, { month: "Mar", value: 95 }, ], innovation: [ { month: "Jan", value: 55 }, { month: "Feb", value: 70 }, { month: "Mar", value: 80 }, ], teamwork: [ { month: "Jan", value: 75 }, { month: "Feb", value: 85 }, { month: "Mar", value: 95 }, ], } export default function RewardsPage() { const { toast } = useToast() const [registeredEvents, setRegisteredEvents] = useState([ // Add a pre-registered event here { eventId: 2, // This corresponds to the "Workshop: Clean Code Practices" event teamMembers: [ { id: 1, nickname: "JohnDoe", name: "John Doe", avatar: "/placeholder.svg" }, { id: 2, nickname: "JaneDoe", name: "Jane Doe", avatar: "/placeholder.svg" }, ], }, ]) const [eventToLeave, setEventToLeave] = useState(null) const [currentChallenge, setCurrentChallenge] = useState<{ name: string endDate: Date teamMembers?: TeamMember[] } | null>(null) const [isOpen, onOpenChange] = useState(false) const [showTeamSelection, setShowTeamSelection] = useState(false) const [currentEventId, setCurrentEventId] = useState(null) const availableMembers: TeamMember[] = [ { id: 1, nickname: "JohnDoe", name: "John Doe", avatar: "/placeholder.svg" }, { id: 2, nickname: "JaneDoe", name: "Jane Doe", avatar: "/placeholder.svg" }, { id: 3, nickname: "PeterPan", name: "Peter Pan", avatar: "/placeholder.svg" }, { id: 4, nickname: "WendyDarling", name: "Wendy Darling", avatar: "/placeholder.svg" }, ] const upcomingEvents: Event[] = [ { id: 1, title: "Tech Talk: Future of AI", description: "Join us for an exciting discussion about the future of AI and its impact on software development.", date: "March 15, 2024", time: "3:00 PM", location: "Virtual", image: "/placeholder.svg?height=160&width=320&text=AI+Technology", }, { id: 2, title: "Workshop: Clean Code Practices", description: "Learn best practices for writing clean, maintainable code from industry experts.", date: "March 20, 2024", time: "2:00 PM", location: "Main Office", image: "/placeholder.svg?height=160&width=320&text=Clean+Code", }, { id: 3, title: "Team Building Event", description: "Join us for a fun afternoon of team building activities and networking.", date: "March 25, 2024", time: "4:00 PM", location: "City Park", image: "/placeholder.svg?height=160&width=320&text=Team+Building", }, { id: 4, title: "Collaborative Problem Solving Challenge", description: "Form a team of 3-5 members and work together to solve complex technical challenges. Experience the power of teamwork while tackling real-world programming problems.", date: "March 28, 2024", time: "2:00 PM", location: "Innovation Lab", image: "/placeholder.svg?height=160&width=320&text=Team+Challenge", }, ] const isEventStarted = (eventDate: string, eventTime: string) => { const [month, day, year] = eventDate.split(" ")[0].split(",")[0].split("/").map(Number) const [hours, minutes] = eventTime.split(":").map(Number) const [ampm] = eventTime.split(" ")[1] const eventDateTime = new Date(2024, month - 1, day) eventDateTime.setHours(ampm === "PM" ? hours + 12 : hours, minutes) return new Date() >= eventDateTime } // Filter registered events with team members const myRegisteredEvents = upcomingEvents .filter((event) => registeredEvents.find((reg) => reg.eventId === event.id)) .map((event) => ({ ...event, teamMembers: registeredEvents.find((reg) => reg.eventId === event.id)?.teamMembers || [], })) const handleRegistration = (eventId: number) => { const event = upcomingEvents.find((e) => e.id === eventId) if (event?.title.toLowerCase().includes("collaborative") || event?.description.toLowerCase().includes("team")) { setCurrentEventId(eventId) setShowTeamSelection(true) return } if (registeredEvents.some((reg) => reg.eventId === eventId)) { toast({ title: "Already Registered", description: "You are already registered for this event.", variant: "default", }) return } setRegisteredEvents([...registeredEvents, { eventId }]) toast({ description: "You have successfully registered for the event!", className: "bg-emerald-800 border-0 text-white", icon: , }) } const handleLeaveEvent = (eventId: number) => { setEventToLeave(eventId) } const handleEventComplete = (eventId: number) => { // Implement check-in logic here const pointsEarned = 1000 // You can adjust this or make it dynamic based on the event toast({ description: (

¡Evento completado con éxito!

+{pointsEarned} XP

), className: "bg-emerald-800 border-0 text-white", icon: , }) } const confirmLeaveEvent = () => { if (eventToLeave !== null) { setRegisteredEvents(registeredEvents.filter((reg) => reg.eventId !== eventToLeave)) setEventToLeave(null) toast({ title: "Event Left", description: "You have been removed from this event.", variant: "default", }) } } const handleTeamConfirmation = (members: TeamMember[]) => { if (currentEventId) { setRegisteredEvents([ ...registeredEvents, { eventId: currentEventId, teamMembers: members, }, ]) toast({ description: "¡Te has registrado exitosamente con tu equipo!", className: "bg-emerald-800 border-0 text-white", icon: , }) setCurrentEventId(null) } } // Event Card Component to avoid repetition const EventCard = ({ event, showRegisterButton = false, showLeaveButton = false, }: { event: Event showRegisterButton?: boolean showLeaveButton?: boolean }) => (

{event.title}

1000 XP

{event.description}

{event.date}

{event.time}

{event.location}

{/* Show team members if they exist /} {event.teamMembers && event.teamMembers.length > 0 && (

Team Members

{event.teamMembers.map((member, index) => ( {member.nickname.slice(0, 2).toUpperCase()} ))}
+You

{event.teamMembers.map((member) => ( {member.nickname} ))}

)} {showRegisterButton && ( )} {showLeaveButton && (isEventStarted(event.date, event.time) ? ( ) : ( ))}

) const currentEvent = eventToLeave !== null ? upcomingEvents.find((event) => event.id === eventToLeave) : null const handleAcceptChallenge = () => { // Randomly select 2-4 team members const teamSize = Math.floor(Math.random() 3) + 2 // Random number between 2 and 4 const shuffled = [...availableMembers].sort(() => 0.5 - Math.random()) const selectedTeam = shuffled.slice(0, teamSize) setCurrentChallenge({ name: "Clean Code Innovation Challenge", endDate: new Date("2024-03-31T23:59:59"), teamMembers: selectedTeam, }) onOpenChange(false) toast({ description: (

You've successfully joined the Clean Code Challenge!

Your assigned team:

{selectedTeam.map((member) => ( {member.nickname.slice(0, 2).toUpperCase()} ))}
+You

), className: "bg-emerald-800 border-0 text-white", icon: , }) } const handleLeaveChallenge = () => { setCurrentChallenge(null) toast({ title: "Challenge Left", description: "You have been removed from this challenge.", variant: "default", }) } return (
{/* Sidebar /}

AM

Alvaro Muñoz

amunoz@arkusnexus.com

Level 1

{/ Main content /}

Arkusnexus

AM

{/ Add Challenge Banner here /} {!currentChallenge && (

)}

Rewards Store

Redeem your points for exclusive rewards

{/ Points/Stats Section /}

Available Points

4000 XP

Keep earning points to unlock more rewards!

{/ Current Challenge Section /} {currentChallenge && ( )}

How you doing

0%

`Technology`
`100% Well-Being 0% Connections 0% Innovation 25% Teamwork`
Recent Achievements Achievements My Missions What's Next? Team Power-Up Your latest unlocked achievements 4000 XP Manejo del tiempo Descubre como administrar tu tiempo about 5 hours ago Your current active missions {myRegisteredEvents.length > 0 ? ( {myRegisteredEvents.map((event) => ( ))} ) : ( No active missions at the moment Register for events in the "What's Next?" tab to see them here )} Upcoming events and opportunities {upcomingEvents.map((event) => ( ))} Team Performance Analytics Track your team's progress across different categories {/ Technology Chart /} Technology 85% Growth {teamStats.technology.map((stat, index) => ( {stat.month} ))} {/ Well-Being Chart /} Well-Being 90% Growth {teamStats.wellBeing.map((stat, index) => ( {stat.month} ))} {/ Connections Chart /} Connections 95% Growth {teamStats.connections.map((stat, index) => ( {stat.month} ))} {/ Innovation Chart /} Innovation 80% Growth {teamStats.innovation.map((stat, index) => ( {stat.month} ))} {/ Teamwork Chart /} Teamwork 95% Growth {teamStats.teamwork.map((stat, index) => ( {stat.month} ))} Available Team Challenges {upcomingEvents .filter( (event) => event.title.toLowerCase().includes("collaborative") || event.description.toLowerCase().includes("team"), ) .map((event) => ( ))} {/ Alert Dialog for Leave Event confirmation */} Leave Event Are you sure you want to leave {currentEvent?.title}? This action cannot be undone. Cancel Leave Event ) }

New Challenge: Clean Code Innovation!

Challenge Description

Team Structure

Objectives

Rewards

Time Remaining

My Current Challenge

{challengeName}

Your Team

Equipo seleccionado

{event.title}

Team Members

Alvaro Muñoz

Arkusnexus

Rewards Store

4000 XP

How you doing

Recent Achievements

Manejo del tiempo

Team Performance Analytics

Technology

Well-Being

Connections

Innovation

Teamwork

Available Team Challenges