Skip to content

Mihai-Valeriu Ginghina / WBT2425_6

Go to a project
Commit 89139adc by mvginghina
Options

Added TicketApp

parents
Expand all
Inline Side-by-side
Showing with 4849 additions and 0 deletions
.gitignore 0 → 100644
# 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
app/account/page.tsx 0 → 100644
"use client"
import { useState } from "react"
import Link from "next/link"
import Image from "next/image"
import { ArrowLeft } from "lucide-react"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Textarea } from "@/components/ui/textarea"
import { Checkbox } from "@/components/ui/checkbox"
import { Label } from "@/components/ui/label"
export default function AccountPage() {
const [interests, setInterests] = useState({
festivals: false,
gamingEvents: true,
hikes: false,
boardgames: true,
dances: false,
beerpong: true,
bowling: false,
concerts: false,
})
const handleInterestChange = (interest: keyof typeof interests) => {
setInterests((prev) => ({
...prev,
[interest]: !prev[interest],
}))
}
return (
<div className="flex min-h-screen flex-col">
{/* Header */}
<header className="sticky top-0 z-50 w-full bg-black text-white">
<div className="flex h-16 items-center justify-between px-4">
<Link href="/" className="flex items-center gap-2">
<ArrowLeft className="h-5 w-5" />
</Link>
<div className="flex items-center gap-4">
<h1 className="text-xl font-bold">TickMeIn</h1>
</div>
<div className="w-10"></div> {/* Spacer for centering */}
</div>
</header>
<main className="flex-1 p-6">
<div className="max-w-3xl mx-auto">
<div className="flex flex-col md:flex-row gap-8">
{/* Left column - Profile picture and interests */}
<div className="md:w-1/3">
<div className="flex flex-col items-center mb-6">
<div className="w-32 h-32 rounded-full bg-gray-300 overflow-hidden relative mb-4">
<Image
src="/placeholder.svg?height=128&width=128"
alt="Profile picture"
fill
className="object-cover"
/>
</div>
<Button variant="outline" size="sm">
Upload New Photo
</Button>
</div>
<div className="mb-6">
<h2 className="text-lg font-semibold mb-3">My interests</h2>
<div className="space-y-2">
<div className="flex items-center space-x-2">
<Checkbox
id="festivals"
checked={interests.festivals}
onCheckedChange={() => handleInterestChange("festivals")}
/>
<Label htmlFor="festivals">Festivals</Label>
</div>
<div className="flex items-center space-x-2">
<Checkbox
id="gamingEvents"
checked={interests.gamingEvents}
onCheckedChange={() => handleInterestChange("gamingEvents")}
/>
<Label htmlFor="gamingEvents">Gaming Events</Label>
</div>
<div className="flex items-center space-x-2">
<Checkbox
id="hikes"
checked={interests.hikes}
onCheckedChange={() => handleInterestChange("hikes")}
/>
<Label htmlFor="hikes">Hikes</Label>
</div>
<div className="flex items-center space-x-2">
<Checkbox
id="boardgames"
checked={interests.boardgames}
onCheckedChange={() => handleInterestChange("boardgames")}
/>
<Label htmlFor="boardgames">Boardgames</Label>
</div>
<div className="flex items-center space-x-2">
<Checkbox
id="dances"
checked={interests.dances}
onCheckedChange={() => handleInterestChange("dances")}
/>
<Label htmlFor="dances">Dances</Label>
</div>
<div className="flex items-center space-x-2">
<Checkbox
id="beerpong"
checked={interests.beerpong}
onCheckedChange={() => handleInterestChange("beerpong")}
/>
<Label htmlFor="beerpong">Beerpong</Label>
</div>
<div className="flex items-center space-x-2">
<Checkbox
id="bowling"
checked={interests.bowling}
onCheckedChange={() => handleInterestChange("bowling")}
/>
<Label htmlFor="bowling">Bowling</Label>
</div>
<div className="flex items-center space-x-2">
<Checkbox
id="concerts"
checked={interests.concerts}
onCheckedChange={() => handleInterestChange("concerts")}
/>
<Label htmlFor="concerts">Concerts</Label>
</div>
</div>
</div>
</div>
{/* Right column - Account details */}
<div className="md:w-2/3">
<div className="flex justify-end mb-4">
<Button variant="destructive" size="sm">
Delete account
</Button>
</div>
<div className="space-y-4">
<div>
<Label htmlFor="username">Username</Label>
<Input id="username" defaultValue="callmenoob77" />
</div>
<div>
<Label htmlFor="email">Email</Label>
<Input id="email" type="email" defaultValue="sm@sher.es" />
</div>
<div>
<Label htmlFor="fullname">Full Name</Label>
<Input id="fullname" defaultValue="Mohamed Ali" />
</div>
<div>
<Label htmlFor="details">The rest of the details</Label>
<Textarea id="details" defaultValue="bla bla bla" />
</div>
<div className="flex justify-end mt-6">
<Button className="bg-black hover:bg-gray-800">Update</Button>
</div>
</div>
</div>
</div>
</div>
</main>
</div>
)
}
app/admin/events/[id]/page.tsx 0 → 100644
import Link from "next/link"
import { ArrowLeft, Save } from "lucide-react"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Textarea } from "@/components/ui/textarea"
import { Label } from "@/components/ui/label"
import { Card, CardContent } from "@/components/ui/card"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
// This would normally come from a database or API
const getEventById = (id: string) => {
return {
id,
title: "Tickets to Untold Festival 2025",
description:
"The biggest music festival in Romania returns for its 2025 edition with an amazing lineup of international artists.",
priceRange: "70€ - 300€",
standardPrice: "70",
vipPrice: "150",
premiumPrice: "300",
location: "Cluj Napoca, Romania",
venue: "Central Park",
startDate: "2025-08-07",
endDate: "2025-08-10",
startTime: "12:00",
endTime: "23:00",
capacity: "5000",
organizer: "Untold Festival SRL",
image: "/placeholder.svg?height=400&width=800",
}
}
export default function EditEventPage({ params }: { params: { id: string } }) {
const event = getEventById(params.id)
return (
<div className="flex min-h-screen flex-col">
<header className="sticky top-0 z-50 w-full bg-black text-white">
<div className="container flex h-14 items-center">
<Link href="/admin" className="flex items-center gap-2">
<ArrowLeft className="h-5 w-5" />
<span>Back to Admin</span>
</Link>
<div className="mx-auto font-bold text-xl">TickMeIn Admin</div>
</div>
</header>
<div className="bg-yellow-300 py-2">
<div className="container flex justify-between items-center">
<div className="font-semibold">Edit Event</div>
<Button size="sm" className="bg-black hover:bg-gray-800">
<Save className="h-4 w-4 mr-2" />
Save Changes
</Button>
</div>
</div>
<main className="flex-1 py-6">
<div className="container">
<Card>
<CardContent className="p-6">
<Tabs defaultValue="details">
<TabsList className="mb-6">
<TabsTrigger value="details">Event Details</TabsTrigger>
<TabsTrigger value="tickets">Tickets</TabsTrigger>
<TabsTrigger value="location">Location</TabsTrigger>
<TabsTrigger value="settings">Settings</TabsTrigger>
</TabsList>
<TabsContent value="details" className="space-y-6">
<div className="grid gap-4">
<div className="grid gap-2">
<Label htmlFor="event-title" className="required">
Event Title
</Label>
<Input id="event-title" defaultValue={event.title} />
</div>
<div className="grid gap-2">
<Label htmlFor="event-description">Description</Label>
<Textarea id="event-description" rows={5} defaultValue={event.description} />
</div>
<div className="grid gap-2">
<Label htmlFor="event-organizer">Organizer</Label>
<Input id="event-organizer" defaultValue={event.organizer} />
</div>
<div className="grid gap-2">
<Label htmlFor="event-capacity">Capacity</Label>
<Input id="event-capacity" type="number" defaultValue={event.capacity} />
</div>
<div className="grid grid-cols-2 gap-4">
<div className="grid gap-2">
<Label htmlFor="event-start-date">Start Date</Label>
<Input id="event-start-date" type="date" defaultValue={event.startDate} />
</div>
<div className="grid gap-2">
<Label htmlFor="event-end-date">End Date</Label>
<Input id="event-end-date" type="date" defaultValue={event.endDate} />
</div>
</div>
<div className="grid grid-cols-2 gap-4">
<div className="grid gap-2">
<Label htmlFor="event-start-time">Start Time</Label>
<Input id="event-start-time" type="time" defaultValue={event.startTime} />
</div>
<div className="grid gap-2">
<Label htmlFor="event-end-time">End Time</Label>
<Input id="event-end-time" type="time" defaultValue={event.endTime} />
</div>
</div>
</div>
</TabsContent>
<TabsContent value="tickets" className="space-y-6">
<div className="grid gap-4">
<div className="grid gap-2">
<Label htmlFor="standard-price">Standard Ticket Price (€)</Label>
<Input id="standard-price" type="number" defaultValue={event.standardPrice} />
</div>
<div className="grid gap-2">
<Label htmlFor="vip-price">VIP Ticket Price (€)</Label>
<Input id="vip-price" type="number" defaultValue={event.vipPrice} />
</div>
<div className="grid gap-2">
<Label htmlFor="premium-price">Premium Ticket Price (€)</Label>
<Input id="premium-price" type="number" defaultValue={event.premiumPrice} />
</div>
<div className="grid gap-2">
<Label htmlFor="discount">Discount (%)</Label>
<Input id="discount" type="number" defaultValue="0" min="0" max="100" />
</div>
</div>
</TabsContent>
<TabsContent value="location" className="space-y-6">
<div className="grid gap-4">
<div className="grid gap-2">
<Label htmlFor="event-location">City, Country</Label>
<Input id="event-location" defaultValue={event.location} />
</div>
<div className="grid gap-2">
<Label htmlFor="event-venue">Venue</Label>
<Input id="event-venue" defaultValue={event.venue} />
</div>
<div className="grid gap-2">
<Label htmlFor="event-address">Address</Label>
<Input id="event-address" placeholder="Enter venue address" />
</div>
<div className="aspect-[2/1] bg-gray-100 rounded-md flex items-center justify-center">
<p className="text-gray-500">Map will be displayed here</p>
</div>
</div>
</TabsContent>
<TabsContent value="settings" className="space-y-6">
<div className="grid gap-4">
<div className="flex items-center gap-2">
<input type="checkbox" id="publish-event" className="rounded" defaultChecked />
<Label htmlFor="publish-event">Publish event</Label>
</div>
<div className="flex items-center gap-2">
<input type="checkbox" id="featured-event" className="rounded" />
<Label htmlFor="featured-event">Feature on homepage</Label>
</div>
<div className="flex items-center gap-2">
<input type="checkbox" id="require-approval" className="rounded" />
<Label htmlFor="require-approval">Require approval for ticket purchases</Label>
</div>
<div className="grid gap-2">
<Label htmlFor="event-tags">Tags (comma separated)</Label>
<Input id="event-tags" placeholder="music, festival, electronic" />
</div>
<div className="grid gap-2">
<Label htmlFor="event-category">Category</Label>
<select
id="event-category"
className="flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50"
>
<option value="music">Music</option>
<option value="sports">Sports</option>
<option value="arts">Arts & Theater</option>
<option value="food">Food & Drink</option>
<option value="business">Business & Networking</option>
</select>
</div>
</div>
</TabsContent>
</Tabs>
</CardContent>
</Card>
</div>
</main>
</div>
)
}
app/admin/events/new/page.tsx 0 → 100644
import Link from "next/link"
import { ArrowLeft, Save } from "lucide-react"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Textarea } from "@/components/ui/textarea"
import { Label } from "@/components/ui/label"
import { Card, CardContent } from "@/components/ui/card"
export default function NewEventPage() {
return (
<div className="flex min-h-screen flex-col">
<header className="sticky top-0 z-50 w-full bg-black text-white">
<div className="container flex h-14 items-center">
<Link href="/admin" className="flex items-center gap-2">
<ArrowLeft className="h-5 w-5" />
<span>Back to Admin</span>
</Link>
<div className="mx-auto font-bold text-xl">TickMeIn Admin</div>
</div>
</header>
<div className="bg-yellow-300 py-2">
<div className="container flex justify-between items-center">
<div className="font-semibold">Create New Event</div>
<Button size="sm" className="bg-black hover:bg-gray-800">
<Save className="h-4 w-4 mr-2" />
Create Event
</Button>
</div>
</div>
<main className="flex-1 py-6">
<div className="container">
<Card>
<CardContent className="p-6">
<div className="space-y-6">
<div className="grid gap-4">
<div className="grid gap-2">
<Label htmlFor="event-title" className="after:content-['*'] after:ml-0.5 after:text-red-500">
Event Title
</Label>
<Input id="event-title" placeholder="Enter event title" />
</div>
<div className="grid gap-2">
<Label htmlFor="event-description">Description</Label>
<Textarea id="event-description" rows={5} placeholder="Describe your event" />
</div>
<div className="grid gap-2">
<Label htmlFor="event-organizer">Organizer</Label>
<Input id="event-organizer" placeholder="Who is organizing this event?" />
</div>
<div className="grid gap-2">
<Label htmlFor="event-capacity">Capacity</Label>
<Input id="event-capacity" type="number" placeholder="Maximum number of attendees" />
</div>
<div className="grid grid-cols-2 gap-4">
<div className="grid gap-2">
<Label htmlFor="event-start-date">Start Date</Label>
<Input id="event-start-date" type="date" />
</div>
<div className="grid gap-2">
<Label htmlFor="event-end-date">End Date</Label>
<Input id="event-end-date" type="date" />
</div>
</div>
<div className="grid grid-cols-2 gap-4">
<div className="grid gap-2">
<Label htmlFor="event-start-time">Start Time</Label>
<Input id="event-start-time" type="time" />
</div>
<div className="grid gap-2">
<Label htmlFor="event-end-time">End Time</Label>
<Input id="event-end-time" type="time" />
</div>
</div>
<div className="grid gap-2">
<Label htmlFor="standard-price">Standard Ticket Price (€)</Label>
<Input id="standard-price" type="number" placeholder="0" />
</div>
<div className="grid gap-2">
<Label htmlFor="event-location">City, Country</Label>
<Input id="event-location" placeholder="Where will this event take place?" />
</div>
<div className="grid gap-2">
<Label htmlFor="event-venue">Venue</Label>
<Input id="event-venue" placeholder="Name of the venue" />
</div>
<div className="grid gap-2">
<Label htmlFor="event-image">Event Image</Label>
<div className="flex items-center gap-2">
<Input id="event-image" type="file" className="flex-1" />
<Button variant="outline" size="sm">
Upload
</Button>
</div>
<p className="text-xs text-gray-500">Recommended size: 1200x600px. Max file size: 5MB.</p>
</div>
</div>
</div>
</CardContent>
</Card>
</div>
</main>
</div>
)
}
app/admin/loading.tsx 0 → 100644
export default function Loading() {
return null
}
app/admin/page.tsx 0 → 100644
import Link from "next/link"
import { Search, Plus, Filter, User, Bell } from "lucide-react"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import AdminEventList from "@/components/admin-event-list"
export default function AdminPage() {
return (
<div className="flex min-h-screen flex-col">
<header className="sticky top-0 z-50 w-full bg-black text-white">
<div className="container flex h-14 items-center">
<div className="mr-4 flex items-center gap-2 font-bold text-xl">
<span>TickMeIn Admin</span>
</div>
<div className="flex-1 flex items-center gap-2 md:gap-4">
<div className="relative flex-1 max-w-md">
<Search className="absolute left-2.5 top-2.5 h-4 w-4 text-muted-foreground" />
<Input
type="search"
placeholder="Search events..."
className="pl-8 bg-gray-800 border-gray-700 text-white"
/>
</div>
</div>
<nav className="ml-auto flex items-center gap-4">
<Link href="/" className="text-sm font-medium text-white hover:text-gray-300">
View Site
</Link>
<Button variant="outline" size="icon" className="text-white border-gray-700">
<Bell className="h-4 w-4" />
<span className="sr-only">Notifications</span>
</Button>
<Button variant="outline" size="icon" className="text-white border-gray-700">
<User className="h-4 w-4" />
<span className="sr-only">Account</span>
</Button>
</nav>
</div>
</header>
<main className="flex-1 flex">
<aside className="hidden md:flex w-64 flex-col bg-gray-900 text-white">
<div className="p-4 font-medium">
<Link href="/admin/my-events" className="flex items-center py-2 px-3 bg-cyan-600 rounded">
My events
</Link>
</div>
<div className="p-4">
<h3 className="mb-2 text-xs uppercase text-gray-400">Filter by</h3>
<div className="space-y-2">
<div className="relative">
<Input placeholder="Type of event" className="bg-gray-800 border-gray-700 text-white" />
</div>
<div>
<h4 className="mb-1 text-xs text-gray-400">Price range</h4>
<div className="flex items-center gap-2">
<Input type="range" className="w-full" min="0" max="500" defaultValue="250" />
</div>
</div>
<div className="space-y-1">
<label className="flex items-center gap-2 text-sm">
<input type="checkbox" className="rounded text-cyan-600" />
<span>Accessible venues</span>
</label>
<label className="flex items-center gap-2 text-sm">
<input type="checkbox" className="rounded text-cyan-600" />
<span>Parking spaces for disabilities</span>
</label>
<label className="flex items-center gap-2 text-sm">
<input type="checkbox" className="rounded text-cyan-600" />
<span>Age restriction</span>
</label>
</div>
</div>
</div>
</aside>
<div className="flex-1 overflow-auto">
<div className="container py-6">
<div className="flex justify-between items-center mb-6">
<h1 className="text-2xl font-bold">Manage Events</h1>
<div className="flex gap-2">
<Button variant="outline" size="sm">
<Filter className="h-4 w-4 mr-2" />
Filter
</Button>
<Link href="/admin/events/new">
<Button size="sm">
<Plus className="h-4 w-4 mr-2" />
Create Event
</Button>
</Link>
</div>
</div>
<div className="grid grid-cols-1 md:grid-cols-3 gap-4 mb-6">
<div className="bg-gray-100 p-4 rounded-lg">
<div className="text-2xl font-bold">24</div>
<div className="text-sm text-gray-500">Active Events</div>
</div>
<div className="bg-gray-100 p-4 rounded-lg">
<div className="text-2xl font-bold">1,245</div>
<div className="text-sm text-gray-500">Tickets Sold</div>
</div>
<div className="bg-gray-100 p-4 rounded-lg">
<div className="text-2xl font-bold">€12,450</div>
<div className="text-sm text-gray-500">Revenue</div>
</div>
</div>
<div className="mb-6">
<h2 className="text-lg font-semibold mb-4">Here are the most popular events of the day:</h2>
<AdminEventList />
</div>
</div>
</div>
</main>
</div>
)
}
app/auth/signin/page.tsx 0 → 100644
"use client"
import type React from "react"
import { useState } from "react"
import Link from "next/link"
import { useRouter } from "next/navigation"
import { Eye, EyeOff } from "lucide-react"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Checkbox } from "@/components/ui/checkbox"
import { Label } from "@/components/ui/label"
export default function SignInPage() {
const router = useRouter()
const [email, setEmail] = useState("")
const [password, setPassword] = useState("")
const [rememberMe, setRememberMe] = useState(false)
const [showPassword, setShowPassword] = useState(false)
const [error, setError] = useState("")
const handleSignIn = (e: React.FormEvent) => {
e.preventDefault()
// Simple validation
if (!email || !password) {
setError("Please fill in all fields")
return
}
try {
// In a real app, you would validate credentials against a backend
// For demo purposes, we'll just simulate a successful login
localStorage.setItem("isLoggedIn", "true")
router.push("/events")
} catch (err) {
console.error("Error setting localStorage:", err)
// Fallback for environments where localStorage is not available
router.push("/events")
}
}
return (
<div className="min-h-screen flex flex-col">
<header className="bg-black text-white py-4">
<div className="container mx-auto text-center">
<h1 className="text-xl font-bold">TickMeIn</h1>
</div>
</header>
<main className="flex-1 flex items-center justify-center p-6">
<div className="w-full max-w-md">
<div className="border rounded-md p-6">
<h2 className="text-2xl font-bold mb-6">Sign In</h2>
{error && (
<div className="bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded mb-4">{error}</div>
)}
<form onSubmit={handleSignIn} className="space-y-4">
<div className="space-y-2">
<Label htmlFor="email">Email address or username</Label>
<Input
id="email"
type="text"
value={email}
onChange={(e) => setEmail(e.target.value)}
placeholder="Enter your email or username"
/>
</div>
<div className="space-y-2">
<Label htmlFor="password">Password</Label>
<div className="relative">
<Input
id="password"
type={showPassword ? "text" : "password"}
value={password}
onChange={(e) => setPassword(e.target.value)}
placeholder="Enter your password"
/>
<button
type="button"
className="absolute right-3 top-1/2 transform -translate-y-1/2"
onClick={() => setShowPassword(!showPassword)}
>
{showPassword ? (
<EyeOff className="h-4 w-4 text-gray-500" />
) : (
<Eye className="h-4 w-4 text-gray-500" />
)}
</button>
</div>
</div>
<div className="flex items-center space-x-2">
<Checkbox
id="remember"
checked={rememberMe}
onCheckedChange={(checked) => setRememberMe(checked as boolean)}
/>
<Label htmlFor="remember" className="text-sm">
Remember me
</Label>
</div>
<Button type="submit" className="w-full bg-gray-800 hover:bg-black">
Log In
</Button>
</form>
<div className="mt-4 text-center text-sm">
<p>
Don't have an account?{" "}
<Link href="/auth/signup" className="text-blue-600 hover:underline">
Sign up
</Link>
</p>
</div>
</div>
</div>
</main>
</div>
)
}
app/auth/signup/page.tsx 0 → 100644
"use client"
import type React from "react"
import { useState, useRef } from "react"
import Link from "next/link"
import Image from "next/image"
import { useRouter } from "next/navigation"
import { Eye, EyeOff, Upload } from "lucide-react"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
export default function SignUpPage() {
const router = useRouter()
const fileInputRef = useRef<HTMLInputElement>(null)
const [formData, setFormData] = useState({
name: "",
email: "",
password: "",
confirmPassword: "",
city: "",
preferences: "",
})
const [profileImage, setProfileImage] = useState<string | null>(null)
const [showPassword, setShowPassword] = useState(false)
const [error, setError] = useState("")
const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
const { name, value } = e.target
setFormData((prev) => ({ ...prev, [name]: value }))
}
const handleImageUpload = (e: React.ChangeEvent<HTMLInputElement>) => {
const file = e.target.files?.[0]
if (file) {
const reader = new FileReader()
reader.onload = (e) => {
if (e.target?.result) {
setProfileImage(e.target.result as string)
}
}
reader.readAsDataURL(file)
}
}
const handleSignUp = (e: React.FormEvent) => {
e.preventDefault()
// Simple validation
if (!formData.name || !formData.email || !formData.password) {
setError("Please fill in all required fields")
return
}
if (formData.password !== formData.confirmPassword) {
setError("Passwords do not match")
return
}
// In a real app, you would send this data to a backend
// For demo purposes, we'll just simulate a successful registration
localStorage.setItem("isLoggedIn", "true")
router.push("/events")
}
return (
<div className="min-h-screen flex flex-col">
<header className="bg-black text-white py-4">
<div className="container mx-auto text-center">
<h1 className="text-xl font-bold">TickMeIn</h1>
</div>
</header>
<main className="flex-1 flex items-center justify-center p-6">
<div className="w-full max-w-md">
<div className="border rounded-md p-6">
<h2 className="text-2xl font-bold mb-6">Sign Up</h2>
{error && (
<div className="bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded mb-4">{error}</div>
)}
<form onSubmit={handleSignUp} className="space-y-4">
<div className="space-y-2">
<Label htmlFor="name">Name</Label>
<Input
id="name"
name="name"
value={formData.name}
onChange={handleChange}
placeholder="Enter your full name"
/>
</div>
<div className="space-y-2">
<Label htmlFor="email">Email address</Label>
<Input
id="email"
name="email"
type="email"
value={formData.email}
onChange={handleChange}
placeholder="Enter your email"
/>
</div>
<div className="space-y-2">
<Label htmlFor="password">Password</Label>
<div className="relative">
<Input
id="password"
name="password"
type={showPassword ? "text" : "password"}
value={formData.password}
onChange={handleChange}
placeholder="Create a password"
/>
<button
type="button"
className="absolute right-3 top-1/2 transform -translate-y-1/2"
onClick={() => setShowPassword(!showPassword)}
>
{showPassword ? (
<EyeOff className="h-4 w-4 text-gray-500" />
) : (
<Eye className="h-4 w-4 text-gray-500" />
)}
</button>
</div>
</div>
<div className="space-y-2">
<Label htmlFor="confirmPassword">Confirm Password</Label>
<Input
id="confirmPassword"
name="confirmPassword"
type="password"
value={formData.confirmPassword}
onChange={handleChange}
placeholder="Confirm your password"
/>
</div>
<div className="space-y-2">
<Label htmlFor="city">City/Location</Label>
<Select>
<SelectTrigger id="city">
<SelectValue placeholder="Select your city" />
</SelectTrigger>
<SelectContent>
<SelectItem value="bucharest">Bucharest</SelectItem>
<SelectItem value="cluj">Cluj-Napoca</SelectItem>
<SelectItem value="timisoara">Timisoara</SelectItem>
<SelectItem value="iasi">Iasi</SelectItem>
<SelectItem value="other">Other</SelectItem>
</SelectContent>
</Select>
</div>
<div className="space-y-2">
<div className="flex justify-between">
<Label htmlFor="preferences">Preferences</Label>
<span className="text-xs text-blue-600 cursor-pointer">optional</span>
</div>
<Input
id="preferences"
name="preferences"
value={formData.preferences}
onChange={handleChange}
placeholder="Music, Sports, Theater, etc."
/>
</div>
<div className="space-y-2">
<div className="flex justify-between">
<Label>Profile Picture</Label>
<span className="text-xs text-blue-600 cursor-pointer">optional</span>
</div>
<div className="flex flex-col items-center space-y-4">
<div className="w-24 h-24 rounded-full bg-gray-200 overflow-hidden relative">
{profileImage ? (
<Image
src={profileImage || "/placeholder.svg"}
alt="Profile preview"
fill
className="object-cover"
/>
) : (
<div className="flex items-center justify-center h-full">
<Upload className="h-8 w-8 text-gray-400" />
</div>
)}
</div>
<input
type="file"
ref={fileInputRef}
onChange={handleImageUpload}
className="hidden"
accept="image/*"
/>
<Button type="button" variant="outline" size="sm" onClick={() => fileInputRef.current?.click()}>
Upload ID
</Button>
</div>
</div>
<div className="pt-4">
<Button type="submit" className="w-full bg-gray-800 hover:bg-black">
Sign Up
</Button>
</div>
<div className="text-xs text-center text-gray-500 mt-4">
By creating an account, you agree to our{" "}
<Link href="#" className="text-blue-600 hover:underline">
Terms of Service
</Link>{" "}
and{" "}
<Link href="#" className="text-blue-600 hover:underline">
Privacy Policy
</Link>
.
</div>
</form>
<div className="mt-4 text-center text-sm border-t pt-4">
<p>
Already have an account?{" "}
<Link href="/auth/signin" className="text-blue-600 hover:underline">
Log in here
</Link>
</p>
</div>
</div>
</div>
</main>
</div>
)
}
app/events/loading.tsx 0 → 100644
export default function Loading() {
return null
}
app/globals.css 0 → 100644
@tailwind base;
@tailwind components;
@tailwind utilities;
body {
font-family: Arial, Helvetica, sans-serif;
}
@layer utilities {
.text-balance {
text-wrap: balance;
}
}
@layer base {
:root {
--background: 0 0% 100%;
--foreground: 0 0% 3.9%;
--card: 0 0% 100%;
--card-foreground: 0 0% 3.9%;
--popover: 0 0% 100%;
--popover-foreground: 0 0% 3.9%;
--primary: 0 0% 9%;
--primary-foreground: 0 0% 98%;
--secondary: 0 0% 96.1%;
--secondary-foreground: 0 0% 9%;
--muted: 0 0% 96.1%;
--muted-foreground: 0 0% 45.1%;
--accent: 0 0% 96.1%;
--accent-foreground: 0 0% 9%;
--destructive: 0 84.2% 60.2%;
--destructive-foreground: 0 0% 98%;
--border: 0 0% 89.8%;
--input: 0 0% 89.8%;
--ring: 0 0% 3.9%;
--chart-1: 12 76% 61%;
--chart-2: 173 58% 39%;
--chart-3: 197 37% 24%;
--chart-4: 43 74% 66%;
--chart-5: 27 87% 67%;
--radius: 0.5rem;
--sidebar-background: 0 0% 98%;
--sidebar-foreground: 240 5.3% 26.1%;
--sidebar-primary: 240 5.9% 10%;
--sidebar-primary-foreground: 0 0% 98%;
--sidebar-accent: 240 4.8% 95.9%;
--sidebar-accent-foreground: 240 5.9% 10%;
--sidebar-border: 220 13% 91%;
--sidebar-ring: 217.2 91.2% 59.8%;
}
.dark {
--background: 0 0% 3.9%;
--foreground: 0 0% 98%;
--card: 0 0% 3.9%;
--card-foreground: 0 0% 98%;
--popover: 0 0% 3.9%;
--popover-foreground: 0 0% 98%;
--primary: 0 0% 98%;
--primary-foreground: 0 0% 9%;
--secondary: 0 0% 14.9%;
--secondary-foreground: 0 0% 98%;
--muted: 0 0% 14.9%;
--muted-foreground: 0 0% 63.9%;
--accent: 0 0% 14.9%;
--accent-foreground: 0 0% 98%;
--destructive: 0 62.8% 30.6%;
--destructive-foreground: 0 0% 98%;
--border: 0 0% 14.9%;
--input: 0 0% 14.9%;
--ring: 0 0% 83.1%;
--chart-1: 220 70% 50%;
--chart-2: 160 60% 45%;
--chart-3: 30 80% 55%;
--chart-4: 280 65% 60%;
--chart-5: 340 75% 55%;
--sidebar-background: 240 5.9% 10%;
--sidebar-foreground: 240 4.8% 95.9%;
--sidebar-primary: 224.3 76.3% 48%;
--sidebar-primary-foreground: 0 0% 100%;
--sidebar-accent: 240 3.7% 15.9%;
--sidebar-accent-foreground: 240 4.8% 95.9%;
--sidebar-border: 240 3.7% 15.9%;
--sidebar-ring: 217.2 91.2% 59.8%;
}
}
@layer base {
* {
@apply border-border;
}
body {
@apply bg-background text-foreground;
}
}
app/layout.tsx 0 → 100644
import type React from "react"
import type { Metadata } from "next"
import "./globals.css"
import { ThemeProvider } from "@/components/theme-provider"
import { TrackedEventsProvider } from "@/context/tracked-events-context"
import { Toaster } from "@/components/toaster"
import { PurchasedTicketsProvider } from "@/context/purchased-tickets-context"
import { NavigationProvider } from "@/context/navigation-context"
export const metadata: Metadata = {
title: "EventTicket App",
description: "Book tickets for your favorite events",
generator: "v0.dev",
}
export default function RootLayout({
children,
}: Readonly<{
children: React.ReactNode
}>) {
return (
<html lang="en" suppressHydrationWarning>
<body suppressHydrationWarning>
<ThemeProvider attribute="class" defaultTheme="light" enableSystem>
<NavigationProvider>
<TrackedEventsProvider>
<PurchasedTicketsProvider>
{children}
<Toaster />
</PurchasedTicketsProvider>
</TrackedEventsProvider>
</NavigationProvider>
</ThemeProvider>
</body>
</html>
)
}
import './globals.css'
\ No newline at end of file
app/loading.tsx 0 → 100644
export default function Loading() {
return null
}
app/logout/page.tsx 0 → 100644
"use client"
import { useEffect } from "react"
import { useRouter } from "next/navigation"
export default function LogoutPage() {
const router = useRouter()
useEffect(() => {
// In a real app, you would handle logout logic here
// For now, we'll just redirect to the home page
setTimeout(() => {
router.push("/")
}, 1000)
}, [router])
return (
<div className="flex min-h-screen flex-col items-center justify-center">
<h1 className="text-2xl font-bold mb-4">Logging out...</h1>
<p>You will be redirected shortly.</p>
</div>
)
}
app/my-tickets/page.tsx 0 → 100644
"use client"
import { useEffect, useState } from "react"
import Link from "next/link"
import { useRouter } from "next/navigation"
import { usePurchasedTickets } from "@/context/purchased-tickets-context"
import EventCard from "@/components/event-card"
import { Button } from "@/components/ui/button"
import { BackButton } from "@/components/back-button"
export default function MyTicketsPage() {
const { purchasedTickets } = usePurchasedTickets()
const router = useRouter()
const [isLoading, setIsLoading] = useState(true)
useEffect(() => {
// Check authentication
try {
const isLoggedIn = localStorage.getItem("isLoggedIn")
if (isLoggedIn !== "true") {
router.push("/auth/signin")
} else {
setIsLoading(false)
}
} catch (err) {
console.error("Error checking authentication:", err)
setIsLoading(false)
}
}, [router])
const handleViewTicket = (eventId: string) => {
router.push(`/tickets/${eventId}`)
}
if (isLoading) {
return <div className="flex items-center justify-center min-h-screen">Loading...</div>
}
return (
<div className="flex min-h-screen flex-col">
{/* Header */}
<header className="sticky top-0 z-50 w-full bg-black text-white">
<div className="flex h-16 items-center justify-between px-4">
<BackButton />
<div className="flex items-center gap-4">
<h1 className="text-xl font-bold">TickMeIn</h1>
</div>
<div className="w-10"></div> {/* Spacer for centering */}
</div>
</header>
<main className="flex-1 p-6">
<h1 className="text-2xl font-bold mb-6">My Tickets</h1>
{purchasedTickets.length === 0 ? (
<div className="text-center py-10">
<p className="text-gray-500 mb-4">You haven't purchased any tickets yet.</p>
<Link href="/events">
<span className="text-blue-600 hover:underline">Browse events</span>
</Link>
</div>
) : (
<div className="space-y-4">
{purchasedTickets.map((ticket) => (
<div key={ticket.id} className="relative">
<EventCard
title={ticket.eventName}
priceRange={ticket.price}
location={ticket.location}
date={`Time: ${ticket.eventDate}`}
image={ticket.image}
id={ticket.eventId}
/>
<div className="absolute bottom-4 right-4">
<Button size="sm" className="bg-black hover:bg-gray-800" onClick={() => handleViewTicket(ticket.id)}>
View Ticket
</Button>
</div>
</div>
))}
</div>
)}
</main>
</div>
)
}
app/page.tsx 0 → 100644
"use client"
import { useEffect, useState } from "react"
import { useRouter } from "next/navigation"
export default function Home() {
const router = useRouter()
const [isLoading, setIsLoading] = useState(true)
useEffect(() => {
try {
// Check if user is logged in
const isLoggedIn = localStorage.getItem("isLoggedIn")
if (isLoggedIn === "true") {
// If logged in, go to events page
router.push("/events")
} else {
// If not logged in, redirect to sign in page
router.push("/auth/signin")
}
} catch (err) {
console.error("Error accessing localStorage:", err)
// Fallback for environments where localStorage is not available
router.push("/auth/signin")
} finally {
setIsLoading(false)
}
}, [router])
// Show a simple loading state
if (isLoading) {
return <div className="flex items-center justify-center min-h-screen">Loading...</div>
}
return null // This page just redirects
}
app/past-events/[slug]/page.tsx 0 → 100644
"use client"
import { useState } from "react"
import Image from "next/image"
import { MapPin, Star } from "lucide-react"
import { Button } from "@/components/ui/button"
import { Card, CardContent } from "@/components/ui/card"
import { Textarea } from "@/components/ui/textarea"
import { BackButton } from "@/components/back-button"
export default function PastEventPage({ params }: { params: { slug: string } }) {
const [rating, setRating] = useState(0)
const [review, setReview] = useState("")
// This would normally come from a database or API
const event = {
title: "Untold Festival 2025",
description:
"The UNTOLD Festival, Romania's largest electronic music event, is gearing up for its monumental 10th anniversary edition, dubbed UNTOLD X, scheduled from August 7 to 10, 2025, in Cluj-Napoca, Transylvania. UNTOLD X promises an extraordinary celebration of music, love, friendship, and unity. Attendees can anticipate an impressive lineup of top DJs and live acts spanning genres like EDM, house, techno, hip-hop, and pop. The festival is renowned for its breathtaking stage designs, immersive experiences, and a variety of activities beyond music, including VR games, fashion showcases, and diverse culinary offerings.",
location: "Cluj-Napoca, Romania",
date: "August 7-10, 2025",
mapImage: "/placeholder.svg?height=200&width=400",
galleryImages: ["/placeholder.svg?height=200&width=400"],
reviews: [
{
name: "Adrian Ioaniche",
rating: 4,
comment: "Had fun I guess. I'll be back next year if the artists are nice and all.",
},
{
name: "Smeker Becher",
rating: 5,
comment: "The event was amazing. 5 out of 5.",
},
],
}
const handleSubmitReview = () => {
alert("Review submitted!")
setRating(0)
setReview("")
}
return (
<div className="flex min-h-screen flex-col">
<header className="sticky top-0 z-50 w-full bg-black text-white">
<div className="flex h-16 items-center justify-between px-4">
<BackButton />
<div className="flex items-center gap-4">
<h1 className="text-xl font-bold">TickMeIn</h1>
</div>
<div className="w-10"></div> {/* Spacer for centering */}
</div>
</header>
<main className="flex-1 p-6">
<div className="max-w-5xl mx-auto">
<h1 className="text-3xl font-bold mb-6">{event.title}</h1>
<div className="grid grid-cols-1 md:grid-cols-3 gap-8 mb-8">
<div className="md:col-span-2">
{/* Map View */}
<div className="relative aspect-[2/1] mb-6 rounded-lg overflow-hidden">
<Image
src={event.mapImage || "/placeholder.svg"}
alt="Event location map"
fill
className="object-cover"
/>
<div className="absolute bottom-2 left-2 bg-black text-white p-1 rounded-full">
<MapPin className="h-5 w-5" />
</div>
</div>
{/* Gallery */}
<div className="relative aspect-[2/1] mb-6 rounded-lg overflow-hidden">
<Image
src={event.galleryImages[0] || "/placeholder.svg"}
alt="Event gallery"
fill
className="object-cover"
/>
</div>
{/* Description */}
<div className="mb-6">
<p className="text-sm leading-relaxed">{event.description}</p>
</div>
{/* Reviews Section */}
<div className="mb-6">
<h2 className="text-xl font-bold mb-4">Reviews ({event.reviews.length}):</h2>
<div className="space-y-4 mb-6">
{event.reviews.map((review, index) => (
<Card key={index}>
<CardContent className="p-4">
<div className="flex justify-between items-start mb-2">
<h3 className="font-semibold">{review.name}</h3>
<div className="flex">
{[...Array(5)].map((_, i) => (
<Star
key={i}
className={`h-4 w-4 ${i < review.rating ? "fill-yellow-400 text-yellow-400" : "text-gray-300"}`}
/>
))}
</div>
</div>
<p className="text-sm">{review.comment}</p>
</CardContent>
</Card>
))}
</div>
{/* Leave a Review */}
<div>
<h3 className="text-lg font-semibold mb-3">Leave a review:</h3>
<div className="flex justify-center mb-4">
{[...Array(5)].map((_, i) => (
<Star
key={i}
className={`h-8 w-8 cursor-pointer ${i < rating ? "fill-yellow-400 text-yellow-400" : "text-gray-300"}`}
onClick={() => setRating(i + 1)}
/>
))}
</div>
<Textarea
placeholder="Type a comment..."
className="mb-4"
value={review}
onChange={(e) => setReview(e.target.value)}
/>
<div className="flex justify-end">
<Button className="bg-black hover:bg-gray-800" onClick={handleSubmitReview}>
Post
</Button>
</div>
</div>
</div>
</div>
<div>
<Card className="mb-4">
<CardContent className="p-4">
<div className="mb-4">
<div className="font-semibold mb-2">Date:</div>
<div className="mb-4">
<div className="bg-gray-100 p-2 rounded">
<div className="text-center border-b pb-1 mb-2">February 11, 2025</div>
<div className="grid grid-cols-7 text-center text-xs">
<div>Su</div>
<div>Mo</div>
<div>Tu</div>
<div>We</div>
<div>Th</div>
<div>Fr</div>
<div>Sa</div>
</div>
<div className="grid grid-cols-7 text-center text-xs gap-1 mt-1">
{[...Array(28)].map((_, i) => (
<div key={i} className={`p-1 ${i + 1 === 11 ? "bg-black text-white rounded-full" : ""}`}>
{i + 1}
</div>
))}
</div>
</div>
</div>
<div className="font-semibold mb-2">Timetable:</div>
<div className="flex gap-2 mb-4">
<div className="flex-1 border rounded p-2 text-center text-sm">02/11/2025</div>
<div className="flex-1 border rounded p-2 text-center text-sm">02/11/2025</div>
</div>
</div>
</CardContent>
</Card>
</div>
</div>
</div>
</main>
</div>
)
}
app/past-events/page.tsx 0 → 100644
"use client"
import { EventCard } from "@/components/event-card"
import { BackButton } from "@/components/back-button"
export default function PastEventsPage() {
const events = [
{
title: "Summer Music Festival",
priceRange: "40€ - 120€",
location: "Barcelona, Spain",
date: "Time: 20-22 June 2023",
image: "/placeholder.svg?height=200&width=200",
slug: "summer-music-festival",
},
{
title: "International Food Fair",
priceRange: "10€",
location: "Paris, France",
date: "Time: 5-7 April 2023",
image: "/placeholder.svg?height=200&width=200",
slug: "international-food-fair",
},
{
title: "Untold Festival 2023",
priceRange: "50€ - 300€",
location: "Cluj-Napoca, Romania",
date: "Time: 3-6 August 2023",
image: "/placeholder.svg?height=200&width=200",
slug: "untold-festival-2023",
},
]
return (
<div className="flex min-h-screen flex-col">
{/* Header */}
<header className="sticky top-0 z-50 w-full bg-black text-white">
<div className="flex h-16 items-center justify-between px-4">
<BackButton />
<div className="flex items-center gap-4">
<h1 className="text-xl font-bold">TickMeIn</h1>
</div>
<div className="w-10"></div> {/* Spacer for centering */}
</div>
</header>
<main className="flex-1 p-6">
<h1 className="text-2xl font-bold mb-6">Past Events</h1>
<div className="space-y-4">
{events.map((event, index) => (
<div
key={index}
onClick={() => (window.location.href = `/past-events/${event.slug}`)}
className="cursor-pointer"
>
<EventCard
title={event.title}
priceRange={event.priceRange}
location={event.location}
date={event.date}
image={event.image}
/>
</div>
))}
</div>
</main>
</div>
)
}
app/tickets/[id]/page.tsx 0 → 100644
"use client"
import { useEffect, useState, useCallback } from "react"
import { Download, Share, RefreshCcw } from "lucide-react"
import { useRouter } from "next/navigation"
import { Button } from "@/components/ui/button"
import { Card, CardContent } from "@/components/ui/card"
import { usePurchasedTickets } from "@/context/purchased-tickets-context"
import { BackButton } from "@/components/back-button"
// Define ticket data outside the component
const ticketDataMap: Record<string, any> = {
"untold-2025": {
eventName: "Untold Festival 2025",
description:
"The UNTOLD Festival, Romania's largest electronic music event, is gearing up for its monumental 10th anniversary edition.",
ticketType: "General Admission",
price: "50€",
eventDate: "August 7-10, 2025",
location: "Cluj-Napoca, Romania",
},
"mario-casa": {
eventName: "Meet & Greet feat. Mario Casa",
description: "Join us for an exclusive meet and greet with the famous actor Mario Casa.",
ticketType: "VIP Access",
price: "15€",
eventDate: "February 25, 2025",
location: "Jaen, Spain",
},
beerpong: {
eventName: "Beerpong Party",
description: "Get ready for the ultimate Beerpong Party at Comedy Club in London!",
ticketType: "Standard Entry",
price: "5€",
eventDate: "May 1, 2025",
location: "Comedy Club, London",
},
"gaming-con": {
eventName: "Gaming Convention 2025",
description: "The biggest gaming event of the year is coming to Berlin!",
ticketType: "Weekend Pass",
price: "25€",
eventDate: "March 15-17, 2025",
location: "Berlin, Germany",
},
"summer-music": {
eventName: "Summer Music Festival",
description: "Celebrate summer with the hottest music festival in Barcelona!",
ticketType: "Day Pass",
price: "40€",
eventDate: "June 20-22, 2025",
location: "Barcelona, Spain",
},
}
export default function TicketPage({ params }: { params: { id: string } }) {
const router = useRouter()
const [isLoading, setIsLoading] = useState(true)
const { addPurchasedTicket, removePurchasedTicket } = usePurchasedTickets()
const [ticketId, setTicketId] = useState("")
const [eventName, setEventName] = useState("Event Not Found")
const [description, setDescription] = useState("The ticket you're looking for could not be found.")
const [ticketType, setTicketType] = useState("Unknown")
const [price, setPrice] = useState("N/A")
const [purchaseDate, setPurchaseDate] = useState("")
const [showQR, setShowQR] = useState(false)
const [ticketAdded, setTicketAdded] = useState(false)
// Load ticket data only once on mount and when params.id changes
useEffect(() => {
// Check authentication
try {
const isLoggedIn = localStorage.getItem("isLoggedIn")
if (isLoggedIn !== "true") {
router.push("/auth/signin")
return
}
// Set ticket ID
setTicketId(params.id)
// Set purchase date - use a fixed date to avoid hydration issues
setPurchaseDate("April 6, 2025")
// Get ticket data
const eventData = ticketDataMap[params.id as keyof typeof ticketDataMap]
if (eventData) {
setEventName(eventData.eventName)
setDescription(eventData.description)
setTicketType(eventData.ticketType)
setPrice(eventData.price)
}
setIsLoading(false)
// Set showQR to true after initial render to avoid hydration issues
setTimeout(() => {
setShowQR(true)
}, 100)
} catch (err) {
console.error("Error loading ticket:", err)
setIsLoading(false)
}
}, [params.id, router])
// Add ticket to purchased tickets - only run once
useEffect(() => {
if (!isLoading && !ticketAdded) {
const eventData = ticketDataMap[params.id as keyof typeof ticketDataMap]
if (eventData) {
addPurchasedTicket({
id: params.id,
eventId: params.id,
eventName: eventData.eventName,
description: eventData.description,
ticketType: eventData.ticketType,
price: eventData.price,
purchaseDate: "April 6, 2025",
eventDate: eventData.eventDate || "Upcoming",
location: eventData.location || "TBD",
image: "/placeholder.svg?height=200&width=200",
})
setTicketAdded(true)
}
}
}, [isLoading, ticketAdded, params.id, addPurchasedTicket])
const handleDownloadTicket = useCallback(() => {
alert("Ticket download functionality would be implemented here")
}, [])
const handleShareTicket = useCallback(() => {
alert("Ticket sharing functionality would be implemented here")
}, [])
const handleRefundTicket = useCallback(() => {
const confirmRefund = confirm("Are you sure you want to refund this ticket?")
if (confirmRefund) {
removePurchasedTicket(ticketId)
alert("Ticket has been refunded successfully")
router.push("/events")
}
}, [removePurchasedTicket, ticketId, router])
if (isLoading) {
return <div className="flex items-center justify-center min-h-screen">Loading...</div>
}
return (
<div className="min-h-screen flex flex-col">
<header className="sticky top-0 z-50 w-full bg-black text-white">
<div className="flex h-16 items-center justify-between px-4">
<BackButton />
<div className="flex items-center gap-4">
<h1 className="text-xl font-bold">TickMeIn</h1>
</div>
<div className="w-10"></div>
</div>
</header>
<main className="flex-1 p-6">
<div className="max-w-2xl mx-auto">
<Card className="overflow-hidden">
<CardContent className="p-6">
<h2 className="text-2xl font-bold mb-4">Ticket for {eventName}</h2>
<p className="text-sm mb-6">{description}</p>
<div className="flex justify-center mb-6">
<div className="p-4 bg-white rounded-lg">
{showQR && (
<div className="w-[150px] h-[150px] bg-gray-200 flex items-center justify-center">
<p className="text-sm text-center">
QR Code for
<br />
Ticket: {ticketId}
</p>
</div>
)}
</div>
</div>
<div className="grid grid-cols-2 gap-4 mb-6">
<div>
<p className="text-sm text-gray-500">Ticket ID</p>
<p className="font-medium">{ticketId}</p>
</div>
<div>
<p className="text-sm text-gray-500">Purchase Date</p>
<p className="font-medium">{purchaseDate}</p>
</div>
<div>
<p className="text-sm text-gray-500">Ticket Type</p>
<p className="font-medium">{ticketType}</p>
</div>
<div>
<p className="text-sm text-gray-500">Price</p>
<p className="font-medium">{price}</p>
</div>
</div>
<div className="flex gap-4">
<Button variant="outline" className="flex-1" onClick={handleDownloadTicket}>
<Download className="h-4 w-4 mr-2" />
Download
</Button>
<Button variant="outline" className="flex-1" onClick={handleShareTicket}>
<Share className="h-4 w-4 mr-2" />
Share
</Button>
<Button variant="destructive" className="flex-1" onClick={handleRefundTicket}>
<RefreshCcw className="h-4 w-4 mr-2" />
Refund
</Button>
</div>
</CardContent>
</Card>
</div>
</main>
</div>
)
}
app/tracked-events/page.tsx 0 → 100644
"use client"
import { useEffect, useState } from "react"
import Link from "next/link"
import { EventCard } from "@/components/event-card"
import { useTrackedEvents } from "@/context/tracked-events-context"
import { useRouter } from "next/navigation"
import { BackButton } from "@/components/back-button"
export default function TrackedEventsPage() {
const { trackedEvents } = useTrackedEvents()
const router = useRouter()
const [isLoading, setIsLoading] = useState(true)
useEffect(() => {
// Check authentication
try {
const isLoggedIn = localStorage.getItem("isLoggedIn")
if (isLoggedIn !== "true") {
router.push("/auth/signin")
} else {
setIsLoading(false)
}
} catch (err) {
console.error("Error checking authentication:", err)
setIsLoading(false)
}
}, [router])
if (isLoading) {
return <div className="flex items-center justify-center min-h-screen">Loading...</div>
}
return (
<div className="flex min-h-screen flex-col">
{/* Header */}
<header className="sticky top-0 z-50 w-full bg-black text-white">
<div className="flex h-16 items-center justify-between px-4">
<BackButton />
<div className="flex items-center gap-4">
<h1 className="text-xl font-bold">TickMeIn</h1>
</div>
<div className="w-10"></div> {/* Spacer for centering */}
</div>
</header>
<main className="flex-1 p-6">
<h1 className="text-2xl font-bold mb-6">Tracked Events</h1>
{trackedEvents.length === 0 ? (
<div className="text-center py-10">
<p className="text-gray-500 mb-4">You haven't tracked any events yet.</p>
<Link href="/events">
<span className="text-blue-600 hover:underline">Browse events</span>
</Link>
</div>
) : (
<div className="space-y-4">
{trackedEvents.map((event) => (
<EventCard
key={event.id}
id={event.id}
title={event.title}
priceRange={event.priceRange}
location={event.location}
date={event.date}
image={event.image}
/>
))}
</div>
)}
</main>
</div>
)
}
components.json 0 → 100644
{
"$schema": "https://ui.shadcn.com/schema.json",
"style": "default",
"rsc": true,
"tsx": true,
"tailwind": {
"config": "tailwind.config.ts",
"css": "app/globals.css",
"baseColor": "neutral",
"cssVariables": true,
"prefix": ""
},
"aliases": {
"components": "@/components",
"utils": "@/lib/utils",
"ui": "@/components/ui",
"lib": "@/lib",
"hooks": "@/hooks"
},
"iconLibrary": "lucide"
}
\ No newline at end of file
components/admin-event-list.tsx 0 → 100644
import Image from "next/image"
import Link from "next/link"
import { Edit, Trash2, MoreHorizontal } from "lucide-react"
import { Card, CardContent } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@/components/ui/dropdown-menu"
export default function AdminEventList() {
const events = [
{
id: "1",
title: "Tickets to Untold Romania 2025",
priceRange: "70€ - 300€",
location: "Cluj Napoca, Romania",
timePeriod: "7 - 10 August",
ticketsSold: 450,
revenue: "€45,000",
image: "/placeholder.svg?height=100&width=100",
},
{
id: "2",
title: "Meet & Greet feat. Mario Casa",
priceRange: "15€ - 100€",
location: "Jaen, Spain",
timePeriod: "25th of February",
ticketsSold: 120,
revenue: "€8,400",
image: "/placeholder.svg?height=100&width=100",
},
{
id: "3",
title: "Beerpong Party",
priceRange: "5€",
location: "Comedy Club, London",
timePeriod: "1st of May",
ticketsSold: 75,
revenue: "€375",
image: "/placeholder.svg?height=100&width=100",
},
]
return (
<div className="space-y-4">
{events.map((event) => (
<Card key={event.id} className="overflow-hidden">
<CardContent className="p-0">
<div className="flex">
<div className="w-24 h-24 relative bg-gray-200">
<Image src={event.image || "/placeholder.svg"} alt={event.title} fill className="object-cover" />
</div>
<div className="flex-1 p-4">
<div className="flex justify-between">
<h3 className="font-semibold text-lg">{event.title}</h3>
<DropdownMenu>
<DropdownMenuTrigger asChild>
<Button variant="ghost" size="icon">
<MoreHorizontal className="h-4 w-4" />
<span className="sr-only">Actions</span>
</Button>
</DropdownMenuTrigger>
<DropdownMenuContent align="end">
<DropdownMenuItem>
<Link href={`/admin/events/${event.id}`} className="flex items-center w-full">
<Edit className="mr-2 h-4 w-4" />
Edit
</Link>
</DropdownMenuItem>
<DropdownMenuItem className="text-red-600">
<Trash2 className="mr-2 h-4 w-4" />
Delete
</DropdownMenuItem>
</DropdownMenuContent>
</DropdownMenu>
</div>
<div className="mt-1 text-sm">
<div className="flex flex-col sm:flex-row sm:gap-4">
<div>
<span className="font-medium">Ticket prices:</span> {event.priceRange}
</div>
<div>
<span className="font-medium">Tickets sold:</span> {event.ticketsSold}
</div>
<div>
<span className="font-medium">Revenue:</span> {event.revenue}
</div>
</div>
<div>
<span className="font-medium">Location:</span> {event.location}
</div>
<div>
<span className="font-medium">Time Period:</span> {event.timePeriod}
</div>
</div>
</div>
</div>
</CardContent>
</Card>
))}
</div>
)
}
components/back-button.tsx 0 → 100644
"use client"
import { ArrowLeft } from "lucide-react"
import { useRouter } from "next/navigation"
import { Button } from "@/components/ui/button"
export function BackButton() {
const router = useRouter()
const handleBack = () => {
// Use browser history to go back if possible
if (typeof window !== "undefined" && window.history.length > 1) {
router.back()
} else {
// Fallback to events page if no history
router.push("/events")
}
}
return (
<Button variant="ghost" size="icon" className="text-white" onClick={handleBack} aria-label="Go back">
<ArrowLeft className="h-5 w-5" />
</Button>
)
}
components/category-filter.tsx 0 → 100644
import Link from "next/link"
import { Music, Utensils, Trophy, Ticket, Palette, Mic, Landmark, Tent } from "lucide-react"
export function CategoryFilter() {
const categories = [
{
name: "Concerts",
icon: <Music className="h-6 w-6" />,
color: "bg-pink-100 text-pink-700",
href: "/events/category/concerts",
},
{
name: "Food & Drink",
icon: <Utensils className="h-6 w-6" />,
color: "bg-orange-100 text-orange-700",
href: "/events/category/food-drink",
},
{
name: "Sports",
icon: <Trophy className="h-6 w-6" />,
color: "bg-blue-100 text-blue-700",
href: "/events/category/sports",
},
{
name: "Theater",
icon: <Ticket className="h-6 w-6" />,
color: "bg-purple-100 text-purple-700",
href: "/events/category/theater",
},
{
name: "Art",
icon: <Palette className="h-6 w-6" />,
color: "bg-green-100 text-green-700",
href: "/events/category/art",
},
{
name: "Comedy",
icon: <Mic className="h-6 w-6" />,
color: "bg-yellow-100 text-yellow-700",
href: "/events/category/comedy",
},
{
name: "Conferences",
icon: <Landmark className="h-6 w-6" />,
color: "bg-red-100 text-red-700",
href: "/events/category/conferences",
},
{
name: "Festivals",
icon: <Tent className="h-6 w-6" />,
color: "bg-indigo-100 text-indigo-700",
href: "/events/category/festivals",
},
]
return (
<div className="grid grid-cols-2 sm:grid-cols-4 md:grid-cols-8 gap-4">
{categories.map((category) => (
<Link
key={category.name}
href={category.href}
className="flex flex-col items-center justify-center p-4 rounded-lg hover:bg-muted transition-colors"
>
<div className={`p-3 rounded-full ${category.color} mb-2`}>{category.icon}</div>
<span className="text-sm font-medium text-center">{category.name}</span>
</Link>
))}
</div>
)
}
components/event-card.tsx 0 → 100644
"use client"
import Image from "next/image"
import { usePathname } from "next/navigation"
import Link from "next/link"
import { Card, CardContent } from "@/components/ui/card"
interface EventCardProps {
title: string
priceRange: string
location: string
date: string
image: string
id?: string
}
export function EventCard({ title, priceRange, location, date, image, id }: EventCardProps) {
const pathname = usePathname()
const isPastEventsPage = pathname.includes("/past-events")
return (
<Card className="overflow-hidden">
<CardContent className="p-0">
<div className="flex flex-col md:flex-row">
<div className="w-full md:w-[150px] bg-gray-200 relative aspect-square md:aspect-auto">
<Image src={image || "/placeholder.svg"} alt={title} fill className="object-cover" />
</div>
<div className="p-4 flex-1">
{isPastEventsPage ? (
<h3 className="font-bold text-lg">{title}</h3>
) : (
<Link href={`/events/${id || "unknown"}`} className="hover:underline">
<h3 className="font-bold text-lg">{title}</h3>
</Link>
)}
<div className="mt-2 space-y-1 text-sm">
<p>
<span className="font-semibold">Ticket prices may vary:</span> {priceRange}
</p>
<p>
<span className="font-semibold">Location:</span> {location}
</p>
<p>
<span className="font-semibold">{date}</span>
</p>
</div>
</div>
</div>
</CardContent>
</Card>
)
}
export default EventCard
components/event-list.tsx 0 → 100644
import Image from "next/image"
import Link from "next/link"
import { Card, CardContent } from "@/components/ui/card"
export default function EventList() {
const events = [
{
id: "1",
title: "Tickets to Untold Romania 2025",
priceRange: "70€ - 300€",
location: "Cluj Napoca, Romania",
timePeriod: "7 - 10 August",
image: "/placeholder.svg?height=100&width=100",
},
{
id: "2",
title: "Meet & Greet feat. Mario Casa",
priceRange: "15€ - 100€",
location: "Jaen, Spain",
timePeriod: "25th of February",
image: "/placeholder.svg?height=100&width=100",
},
{
id: "3",
title: "Beerpong Party",
priceRange: "5€",
location: "Comedy Club, London",
timePeriod: "1st of May",
image: "/placeholder.svg?height=100&width=100",
},
]
return (
<div className="space-y-4">
{events.map((event) => (
<Link key={event.id} href={`/events/${event.id}`}>
<Card className="overflow-hidden hover:shadow-md transition-shadow">
<CardContent className="p-0">
<div className="flex">
<div className="w-24 h-24 relative bg-gray-200">
<Image src={event.image || "/placeholder.svg"} alt={event.title} fill className="object-cover" />
</div>
<div className="flex-1 p-4">
<h3 className="font-semibold text-lg">{event.title}</h3>
<div className="mt-1 text-sm">
<div className="flex flex-col sm:flex-row sm:gap-4">
<div>
<span className="font-medium">Ticket prices:</span> {event.priceRange}
</div>
</div>
<div>
<span className="font-medium">Location:</span> {event.location}
</div>
<div>
<span className="font-medium">Time Period:</span> {event.timePeriod}
</div>
</div>
</div>
</div>
</CardContent>
</Card>
</Link>
))}
</div>
)
}
components/featured-events.tsx 0 → 100644
"use client"
import { useState, useEffect } from "react"
import Image from "next/image"
import Link from "next/link"
import { ChevronLeft, ChevronRight } from "lucide-react"
import { Button } from "@/components/ui/button"
import { Card, CardContent } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import { useMobile } from "@/hooks/use-mobile"
export function FeaturedEvents() {
const [current, setCurrent] = useState(0)
const isMobile = useMobile()
const featuredEvents = [
{
id: "1",
title: "Summer Music Festival",
description: "The biggest music festival of the year with top artists from around the world.",
date: "Aug 15-17, 2023",
location: "Central Park, New York",
price: 89.99,
image: "/placeholder.svg?height=600&width=1200",
category: "Music",
},
{
id: "2",
title: "International Food Festival",
description: "Taste cuisines from over 50 countries in one amazing weekend event.",
date: "Aug 20-22, 2023",
location: "Pier 39, San Francisco",
price: 39.99,
image: "/placeholder.svg?height=600&width=1200",
category: "Food",
},
{
id: "3",
title: "Tech Conference 2023",
description: "Join industry leaders and innovators at the premier tech event of the year.",
date: "Sep 5-7, 2023",
location: "Convention Center, San Francisco",
price: 199.99,
image: "/placeholder.svg?height=600&width=1200",
category: "Conference",
},
]
const next = () => {
setCurrent((current + 1) % featuredEvents.length)
}
const previous = () => {
setCurrent((current - 1 + featuredEvents.length) % featuredEvents.length)
}
// Auto-advance carousel
useEffect(() => {
const timer = setTimeout(() => {
next()
}, 5000)
return () => clearTimeout(timer)
}, [current])
return (
<div className="relative">
<div className="overflow-hidden rounded-xl">
{featuredEvents.map((event, index) => (
<div
key={event.id}
className={`transition-all duration-500 ease-in-out ${index === current ? "block" : "hidden"}`}
>
<div className="relative">
<div className="relative aspect-[21/9] w-full overflow-hidden rounded-xl">
<Image src={event.image || "/placeholder.svg"} alt={event.title} fill className="object-cover" />
<div className="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent" />
</div>
<Card className="absolute bottom-4 left-4 right-4 md:bottom-8 md:left-8 md:right-auto md:max-w-md bg-background/80 backdrop-blur">
<CardContent className="p-4 md:p-6">
<div className="space-y-2">
<Badge>{event.category}</Badge>
<h3 className="text-xl font-bold md:text-2xl">{event.title}</h3>
<p className="text-sm text-muted-foreground line-clamp-2 md:line-clamp-3">{event.description}</p>
<div className="flex flex-wrap gap-2 text-sm">
<div className="text-muted-foreground">{event.date}</div>
<div className="text-muted-foreground">•</div>
<div className="text-muted-foreground">{event.location}</div>
</div>
<div className="flex items-center justify-between pt-2">
<div className="font-semibold">${event.price.toFixed(2)}</div>
<Link href={`/events/${event.id}`}>
<Button size="sm">View Details</Button>
</Link>
</div>
</div>
</CardContent>
</Card>
</div>
</div>
))}
</div>
<div className="absolute right-4 bottom-4 md:right-8 md:bottom-8 flex gap-2">
<Button
variant="secondary"
size="icon"
className="h-8 w-8 rounded-full bg-background/80 backdrop-blur"
onClick={previous}
>
<ChevronLeft className="h-4 w-4" />
<span className="sr-only">Previous slide</span>
</Button>
<Button
variant="secondary"
size="icon"
className="h-8 w-8 rounded-full bg-background/80 backdrop-blur"
onClick={next}
>
<ChevronRight className="h-4 w-4" />
<span className="sr-only">Next slide</span>
</Button>
</div>
<div className="absolute bottom-4 left-1/2 -translate-x-1/2 flex gap-1">
{featuredEvents.map((_, index) => (
<Button
key={index}
variant="ghost"
size="icon"
className={`h-2 w-2 rounded-full ${index === current ? "bg-primary" : "bg-muted"}`}
onClick={() => setCurrent(index)}
>
<span className="sr-only">Go to slide {index + 1}</span>
</Button>
))}
</div>
</div>
)
}
components/menu-popup.tsx 0 → 100644
"use client"
import Link from "next/link"
interface MenuPopupProps {
onClose: () => void
onLogout?: () => void
}
export function MenuPopup({ onClose, onLogout }: MenuPopupProps) {
return (
<div className="absolute top-16 right-0 z-50 w-48 bg-gray-700 text-white shadow-lg rounded-bl-md overflow-hidden">
<div className="py-1">
<Link href="/tracked-events" className="block px-4 py-2 hover:bg-gray-600" onClick={onClose}>
Tracked events
</Link>
<Link href="/my-tickets" className="block px-4 py-2 hover:bg-gray-600" onClick={onClose}>
My tickets
</Link>
<Link href="/past-events" className="block px-4 py-2 hover:bg-gray-600" onClick={onClose}>
Past events
</Link>
<button
className="block w-full text-left px-4 py-2 hover:bg-gray-600"
onClick={() => {
if (onLogout) onLogout()
onClose()
}}
>
Log out
</button>
</div>
</div>
)
}
components/theme-provider.tsx 0 → 100644
"use client"
import { ThemeProvider as NextThemesProvider, type ThemeProviderProps } from "next-themes"
export function ThemeProvider({ children, ...props }: ThemeProviderProps) {
return <NextThemesProvider {...props}>{children}</NextThemesProvider>
}
components/toaster.tsx 0 → 100644
"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 (
<ToastProvider>
{toasts.map(({ id, title, description, action, ...props }) => (
<Toast key={id} {...props}>
<div className="grid gap-1">
{title && <ToastTitle>{title}</ToastTitle>}
{description && <ToastDescription>{description}</ToastDescription>}
</div>
{action}
<ToastClose />
</Toast>
))}
<ToastViewport />
</ToastProvider>
)
}
components/ui/accordion.tsx 0 → 100644
"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<typeof AccordionPrimitive.Item>,
React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Item>
>(({ className, ...props }, ref) => (
<AccordionPrimitive.Item
ref={ref}
className={cn("border-b", className)}
{...props}
/>
))
AccordionItem.displayName = "AccordionItem"
const AccordionTrigger = React.forwardRef<
React.ElementRef<typeof AccordionPrimitive.Trigger>,
React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Trigger>
>(({ className, children, ...props }, ref) => (
<AccordionPrimitive.Header className="flex">
<AccordionPrimitive.Trigger
ref={ref}
className={cn(
"flex flex-1 items-center justify-between py-4 font-medium transition-all hover:underline [&[data-state=open]>svg]:rotate-180",
className
)}
{...props}
>
{children}
<ChevronDown className="h-4 w-4 shrink-0 transition-transform duration-200" />
</AccordionPrimitive.Trigger>
</AccordionPrimitive.Header>
))
AccordionTrigger.displayName = AccordionPrimitive.Trigger.displayName
const AccordionContent = React.forwardRef<
React.ElementRef<typeof AccordionPrimitive.Content>,
React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Content>
>(({ className, children, ...props }, ref) => (
<AccordionPrimitive.Content
ref={ref}
className="overflow-hidden text-sm transition-all data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down"
{...props}
>
<div className={cn("pb-4 pt-0", className)}>{children}</div>
</AccordionPrimitive.Content>
))
AccordionContent.displayName = AccordionPrimitive.Content.displayName
export { Accordion, AccordionItem, AccordionTrigger, AccordionContent }
components/ui/alert-dialog.tsx 0 → 100644
"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<typeof AlertDialogPrimitive.Overlay>,
React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Overlay>
>(({ className, ...props }, ref) => (
<AlertDialogPrimitive.Overlay
className={cn(
"fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
className
)}
{...props}
ref={ref}
/>
))
AlertDialogOverlay.displayName = AlertDialogPrimitive.Overlay.displayName
const AlertDialogContent = React.forwardRef<
React.ElementRef<typeof AlertDialogPrimitive.Content>,
React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Content>
>(({ className, ...props }, ref) => (
<AlertDialogPortal>
<AlertDialogOverlay />
<AlertDialogPrimitive.Content
ref={ref}
className={cn(
"fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg",
className
)}
{...props}
/>
</AlertDialogPortal>
))
AlertDialogContent.displayName = AlertDialogPrimitive.Content.displayName
const AlertDialogHeader = ({
className,
...props
}: React.HTMLAttributes<HTMLDivElement>) => (
<div
className={cn(
"flex flex-col space-y-2 text-center sm:text-left",
className
)}
{...props}
/>
)
AlertDialogHeader.displayName = "AlertDialogHeader"
const AlertDialogFooter = ({
className,
...props
}: React.HTMLAttributes<HTMLDivElement>) => (
<div
className={cn(
"flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
className
)}
{...props}
/>
)
AlertDialogFooter.displayName = "AlertDialogFooter"
const AlertDialogTitle = React.forwardRef<
React.ElementRef<typeof AlertDialogPrimitive.Title>,
React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Title>
>(({ className, ...props }, ref) => (
<AlertDialogPrimitive.Title
ref={ref}
className={cn("text-lg font-semibold", className)}
{...props}
/>
))
AlertDialogTitle.displayName = AlertDialogPrimitive.Title.displayName
const AlertDialogDescription = React.forwardRef<
React.ElementRef<typeof AlertDialogPrimitive.Description>,
React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Description>
>(({ className, ...props }, ref) => (
<AlertDialogPrimitive.Description
ref={ref}
className={cn("text-sm text-muted-foreground", className)}
{...props}
/>
))
AlertDialogDescription.displayName =
AlertDialogPrimitive.Description.displayName
const AlertDialogAction = React.forwardRef<
React.ElementRef<typeof AlertDialogPrimitive.Action>,
React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Action>
>(({ className, ...props }, ref) => (
<AlertDialogPrimitive.Action
ref={ref}
className={cn(buttonVariants(), className)}
{...props}
/>
))
AlertDialogAction.displayName = AlertDialogPrimitive.Action.displayName
const AlertDialogCancel = React.forwardRef<
React.ElementRef<typeof AlertDialogPrimitive.Cancel>,
React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Cancel>
>(({ className, ...props }, ref) => (
<AlertDialogPrimitive.Cancel
ref={ref}
className={cn(
buttonVariants({ variant: "outline" }),
"mt-2 sm:mt-0",
className
)}
{...props}
/>
))
AlertDialogCancel.displayName = AlertDialogPrimitive.Cancel.displayName
export {
AlertDialog,
AlertDialogPortal,
AlertDialogOverlay,
AlertDialogTrigger,
AlertDialogContent,
AlertDialogHeader,
AlertDialogFooter,
AlertDialogTitle,
AlertDialogDescription,
AlertDialogAction,
AlertDialogCancel,
}
components/ui/alert.tsx 0 → 100644
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<HTMLDivElement> & VariantProps<typeof alertVariants>
>(({ className, variant, ...props }, ref) => (
<div
ref={ref}
role="alert"
className={cn(alertVariants({ variant }), className)}
{...props}
/>
))
Alert.displayName = "Alert"
const AlertTitle = React.forwardRef<
HTMLParagraphElement,
React.HTMLAttributes<HTMLHeadingElement>
>(({ className, ...props }, ref) => (
<h5
ref={ref}
className={cn("mb-1 font-medium leading-none tracking-tight", className)}
{...props}
/>
))
AlertTitle.displayName = "AlertTitle"
const AlertDescription = React.forwardRef<
HTMLParagraphElement,
React.HTMLAttributes<HTMLParagraphElement>
>(({ className, ...props }, ref) => (
<div
ref={ref}
className={cn("text-sm [&_p]:leading-relaxed", className)}
{...props}
/>
))
AlertDescription.displayName = "AlertDescription"
export { Alert, AlertTitle, AlertDescription }
components/ui/aspect-ratio.tsx 0 → 100644
"use client"
import * as AspectRatioPrimitive from "@radix-ui/react-aspect-ratio"
const AspectRatio = AspectRatioPrimitive.Root
export { AspectRatio }
components/ui/avatar.tsx 0 → 100644
"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<typeof AvatarPrimitive.Root>,
React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Root>
>(({ className, ...props }, ref) => (
<AvatarPrimitive.Root
ref={ref}
className={cn(
"relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full",
className
)}
{...props}
/>
))
Avatar.displayName = AvatarPrimitive.Root.displayName
const AvatarImage = React.forwardRef<
React.ElementRef<typeof AvatarPrimitive.Image>,
React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Image>
>(({ className, ...props }, ref) => (
<AvatarPrimitive.Image
ref={ref}
className={cn("aspect-square h-full w-full", className)}
{...props}
/>
))
AvatarImage.displayName = AvatarPrimitive.Image.displayName
const AvatarFallback = React.forwardRef<
React.ElementRef<typeof AvatarPrimitive.Fallback>,
React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Fallback>
>(({ className, ...props }, ref) => (
<AvatarPrimitive.Fallback
ref={ref}
className={cn(
"flex h-full w-full items-center justify-center rounded-full bg-muted",
className
)}
{...props}
/>
))
AvatarFallback.displayName = AvatarPrimitive.Fallback.displayName
export { Avatar, AvatarImage, AvatarFallback }
components/ui/badge.tsx 0 → 100644
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<HTMLDivElement>,
VariantProps<typeof badgeVariants> {}
function Badge({ className, variant, ...props }: BadgeProps) {
return (
<div className={cn(badgeVariants({ variant }), className)} {...props} />
)
}
export { Badge, badgeVariants }
components/ui/breadcrumb.tsx 0 → 100644
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) => <nav ref={ref} aria-label="breadcrumb" {...props} />)
Breadcrumb.displayName = "Breadcrumb"
const BreadcrumbList = React.forwardRef<
HTMLOListElement,
React.ComponentPropsWithoutRef<"ol">
>(({ className, ...props }, ref) => (
<ol
ref={ref}
className={cn(
"flex flex-wrap items-center gap-1.5 break-words text-sm text-muted-foreground sm:gap-2.5",
className
)}
{...props}
/>
))
BreadcrumbList.displayName = "BreadcrumbList"
const BreadcrumbItem = React.forwardRef<
HTMLLIElement,
React.ComponentPropsWithoutRef<"li">
>(({ className, ...props }, ref) => (
<li
ref={ref}
className={cn("inline-flex items-center gap-1.5", className)}
{...props}
/>
))
BreadcrumbItem.displayName = "BreadcrumbItem"
const BreadcrumbLink = React.forwardRef<
HTMLAnchorElement,
React.ComponentPropsWithoutRef<"a"> & {
asChild?: boolean
}
>(({ asChild, className, ...props }, ref) => {
const Comp = asChild ? Slot : "a"
return (
<Comp
ref={ref}
className={cn("transition-colors hover:text-foreground", className)}
{...props}
/>
)
})
BreadcrumbLink.displayName = "BreadcrumbLink"
const BreadcrumbPage = React.forwardRef<
HTMLSpanElement,
React.ComponentPropsWithoutRef<"span">
>(({ className, ...props }, ref) => (
<span
ref={ref}
role="link"
aria-disabled="true"
aria-current="page"
className={cn("font-normal text-foreground", className)}
{...props}
/>
))
BreadcrumbPage.displayName = "BreadcrumbPage"
const BreadcrumbSeparator = ({
children,
className,
...props
}: React.ComponentProps<"li">) => (
<li
role="presentation"
aria-hidden="true"
className={cn("[&>svg]:w-3.5 [&>svg]:h-3.5", className)}
{...props}
>
{children ?? <ChevronRight />}
</li>
)
BreadcrumbSeparator.displayName = "BreadcrumbSeparator"
const BreadcrumbEllipsis = ({
className,
...props
}: React.ComponentProps<"span">) => (
<span
role="presentation"
aria-hidden="true"
className={cn("flex h-9 w-9 items-center justify-center", className)}
{...props}
>
<MoreHorizontal className="h-4 w-4" />
<span className="sr-only">More</span>
</span>
)
BreadcrumbEllipsis.displayName = "BreadcrumbElipssis"
export {
Breadcrumb,
BreadcrumbList,
BreadcrumbItem,
BreadcrumbLink,
BreadcrumbPage,
BreadcrumbSeparator,
BreadcrumbEllipsis,
}
components/ui/button.tsx 0 → 100644
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<HTMLButtonElement>,
VariantProps<typeof buttonVariants> {
asChild?: boolean
}
const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
({ className, variant, size, asChild = false, ...props }, ref) => {
const Comp = asChild ? Slot : "button"
return (
<Comp
className={cn(buttonVariants({ variant, size, className }))}
ref={ref}
{...props}
/>
)
}
)
Button.displayName = "Button"
export { Button, buttonVariants }
components/ui/calendar.tsx 0 → 100644
"use client"
import * as React from "react"
import { ChevronLeft, ChevronRight } from "lucide-react"
import { DayPicker } from "react-day-picker"
import { cn } from "@/lib/utils"
import { buttonVariants } from "@/components/ui/button"
export type CalendarProps = React.ComponentProps<typeof DayPicker>
function Calendar({
className,
classNames,
showOutsideDays = true,
...props
}: CalendarProps) {
return (
<DayPicker
showOutsideDays={showOutsideDays}
className={cn("p-3", className)}
classNames={{
months: "flex flex-col sm:flex-row space-y-4 sm:space-x-4 sm:space-y-0",
month: "space-y-4",
caption: "flex justify-center pt-1 relative items-center",
caption_label: "text-sm font-medium",
nav: "space-x-1 flex items-center",
nav_button: cn(
buttonVariants({ variant: "outline" }),
"h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100"
),
nav_button_previous: "absolute left-1",
nav_button_next: "absolute right-1",
table: "w-full border-collapse space-y-1",
head_row: "flex",
head_cell:
"text-muted-foreground rounded-md w-9 font-normal text-[0.8rem]",
row: "flex w-full mt-2",
cell: "h-9 w-9 text-center text-sm p-0 relative [&:has([aria-selected].day-range-end)]:rounded-r-md [&:has([aria-selected].day-outside)]:bg-accent/50 [&:has([aria-selected])]:bg-accent first:[&:has([aria-selected])]:rounded-l-md last:[&:has([aria-selected])]:rounded-r-md focus-within:relative focus-within:z-20",
day: cn(
buttonVariants({ variant: "ghost" }),
"h-9 w-9 p-0 font-normal aria-selected:opacity-100"
),
day_range_end: "day-range-end",
day_selected:
"bg-primary text-primary-foreground hover:bg-primary hover:text-primary-foreground focus:bg-primary focus:text-primary-foreground",
day_today: "bg-accent text-accent-foreground",
day_outside:
"day-outside text-muted-foreground aria-selected:bg-accent/50 aria-selected:text-muted-foreground",
day_disabled: "text-muted-foreground opacity-50",
day_range_middle:
"aria-selected:bg-accent aria-selected:text-accent-foreground",
day_hidden: "invisible",
...classNames,
}}
components={{
IconLeft: ({ ...props }) => <ChevronLeft className="h-4 w-4" />,
IconRight: ({ ...props }) => <ChevronRight className="h-4 w-4" />,
}}
{...props}
/>
)
}
Calendar.displayName = "Calendar"
export { Calendar }
components/ui/card.tsx 0 → 100644
import * as React from "react"
import { cn } from "@/lib/utils"
const Card = React.forwardRef<
HTMLDivElement,
React.HTMLAttributes<HTMLDivElement>
>(({ className, ...props }, ref) => (
<div
ref={ref}
className={cn(
"rounded-lg border bg-card text-card-foreground shadow-sm",
className
)}
{...props}
/>
))
Card.displayName = "Card"
const CardHeader = React.forwardRef<
HTMLDivElement,
React.HTMLAttributes<HTMLDivElement>
>(({ className, ...props }, ref) => (
<div
ref={ref}
className={cn("flex flex-col space-y-1.5 p-6", className)}
{...props}
/>
))
CardHeader.displayName = "CardHeader"
const CardTitle = React.forwardRef<
HTMLDivElement,
React.HTMLAttributes<HTMLDivElement>
>(({ className, ...props }, ref) => (
<div
ref={ref}
className={cn(
"text-2xl font-semibold leading-none tracking-tight",
className
)}
{...props}
/>
))
CardTitle.displayName = "CardTitle"
const CardDescription = React.forwardRef<
HTMLDivElement,
React.HTMLAttributes<HTMLDivElement>
>(({ className, ...props }, ref) => (
<div
ref={ref}
className={cn("text-sm text-muted-foreground", className)}
{...props}
/>
))
CardDescription.displayName = "CardDescription"
const CardContent = React.forwardRef<
HTMLDivElement,
React.HTMLAttributes<HTMLDivElement>
>(({ className, ...props }, ref) => (
<div ref={ref} className={cn("p-6 pt-0", className)} {...props} />
))
CardContent.displayName = "CardContent"
const CardFooter = React.forwardRef<
HTMLDivElement,
React.HTMLAttributes<HTMLDivElement>
>(({ className, ...props }, ref) => (
<div
ref={ref}
className={cn("flex items-center p-6 pt-0", className)}
{...props}
/>
))
CardFooter.displayName = "CardFooter"
export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent }
components/ui/carousel.tsx 0 → 100644
"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<typeof useEmblaCarousel>
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<typeof useEmblaCarousel>[0]
api: ReturnType<typeof useEmblaCarousel>[1]
scrollPrev: () => void
scrollNext: () => void
canScrollPrev: boolean
canScrollNext: boolean
} & CarouselProps
const CarouselContext = React.createContext<CarouselContextProps | null>(null)
function useCarousel() {
const context = React.useContext(CarouselContext)
if (!context) {
throw new Error("useCarousel must be used within a <Carousel />")
}
return context
}
const Carousel = React.forwardRef<
HTMLDivElement,
React.HTMLAttributes<HTMLDivElement> & 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<HTMLDivElement>) => {
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 (
<CarouselContext.Provider
value={{
carouselRef,
api: api,
opts,
orientation:
orientation || (opts?.axis === "y" ? "vertical" : "horizontal"),
scrollPrev,
scrollNext,
canScrollPrev,
canScrollNext,
}}
>
<div
ref={ref}
onKeyDownCapture={handleKeyDown}
className={cn("relative", className)}
role="region"
aria-roledescription="carousel"
{...props}
>
{children}
</div>
</CarouselContext.Provider>
)
}
)
Carousel.displayName = "Carousel"
const CarouselContent = React.forwardRef<
HTMLDivElement,
React.HTMLAttributes<HTMLDivElement>
>(({ className, ...props }, ref) => {
const { carouselRef, orientation } = useCarousel()
return (
<div ref={carouselRef} className="overflow-hidden">
<div
ref={ref}
className={cn(
"flex",
orientation === "horizontal" ? "-ml-4" : "-mt-4 flex-col",
className
)}
{...props}
/>
</div>
)
})
CarouselContent.displayName = "CarouselContent"
const CarouselItem = React.forwardRef<
HTMLDivElement,
React.HTMLAttributes<HTMLDivElement>
>(({ className, ...props }, ref) => {
const { orientation } = useCarousel()
return (
<div
ref={ref}
role="group"
aria-roledescription="slide"
className={cn(
"min-w-0 shrink-0 grow-0 basis-full",
orientation === "horizontal" ? "pl-4" : "pt-4",
className
)}
{...props}
/>
)
})
CarouselItem.displayName = "CarouselItem"
const CarouselPrevious = React.forwardRef<
HTMLButtonElement,
React.ComponentProps<typeof Button>
>(({ className, variant = "outline", size = "icon", ...props }, ref) => {
const { orientation, scrollPrev, canScrollPrev } = useCarousel()
return (
<Button
ref={ref}
variant={variant}
size={size}
className={cn(
"absolute h-8 w-8 rounded-full",
orientation === "horizontal"
? "-left-12 top-1/2 -translate-y-1/2"
: "-top-12 left-1/2 -translate-x-1/2 rotate-90",
className
)}
disabled={!canScrollPrev}
onClick={scrollPrev}
{...props}
>
<ArrowLeft className="h-4 w-4" />
<span className="sr-only">Previous slide</span>
</Button>
)
})
CarouselPrevious.displayName = "CarouselPrevious"
const CarouselNext = React.forwardRef<
HTMLButtonElement,
React.ComponentProps<typeof Button>
>(({ className, variant = "outline", size = "icon", ...props }, ref) => {
const { orientation, scrollNext, canScrollNext } = useCarousel()
return (
<Button
ref={ref}
variant={variant}
size={size}
className={cn(
"absolute h-8 w-8 rounded-full",
orientation === "horizontal"
? "-right-12 top-1/2 -translate-y-1/2"
: "-bottom-12 left-1/2 -translate-x-1/2 rotate-90",
className
)}
disabled={!canScrollNext}
onClick={scrollNext}
{...props}
>
<ArrowRight className="h-4 w-4" />
<span className="sr-only">Next slide</span>
</Button>
)
})
CarouselNext.displayName = "CarouselNext"
export {
type CarouselApi,
Carousel,
CarouselContent,
CarouselItem,
CarouselPrevious,
CarouselNext,
}
components/ui/checkbox.tsx 0 → 100644
"use client"
import * as React from "react"
import * as CheckboxPrimitive from "@radix-ui/react-checkbox"
import { Check } from "lucide-react"
import { cn } from "@/lib/utils"
const Checkbox = React.forwardRef<
React.ElementRef<typeof CheckboxPrimitive.Root>,
React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>
>(({ className, ...props }, ref) => (
<CheckboxPrimitive.Root
ref={ref}
className={cn(
"peer h-4 w-4 shrink-0 rounded-sm border border-primary ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground",
className
)}
{...props}
>
<CheckboxPrimitive.Indicator
className={cn("flex items-center justify-center text-current")}
>
<Check className="h-4 w-4" />
</CheckboxPrimitive.Indicator>
</CheckboxPrimitive.Root>
))
Checkbox.displayName = CheckboxPrimitive.Root.displayName
export { Checkbox }
components/ui/collapsible.tsx 0 → 100644
"use client"
import * as CollapsiblePrimitive from "@radix-ui/react-collapsible"
const Collapsible = CollapsiblePrimitive.Root
const CollapsibleTrigger = CollapsiblePrimitive.CollapsibleTrigger
const CollapsibleContent = CollapsiblePrimitive.CollapsibleContent
export { Collapsible, CollapsibleTrigger, CollapsibleContent }
components/ui/command.tsx 0 → 100644
"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<typeof CommandPrimitive>,
React.ComponentPropsWithoutRef<typeof CommandPrimitive>
>(({ className, ...props }, ref) => (
<CommandPrimitive
ref={ref}
className={cn(
"flex h-full w-full flex-col overflow-hidden rounded-md bg-popover text-popover-foreground",
className
)}
{...props}
/>
))
Command.displayName = CommandPrimitive.displayName
const CommandDialog = ({ children, ...props }: DialogProps) => {
return (
<Dialog {...props}>
<DialogContent className="overflow-hidden p-0 shadow-lg">
<Command className="[&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-group]]:px-2 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5">
{children}
</Command>
</DialogContent>
</Dialog>
)
}
const CommandInput = React.forwardRef<
React.ElementRef<typeof CommandPrimitive.Input>,
React.ComponentPropsWithoutRef<typeof CommandPrimitive.Input>
>(({ className, ...props }, ref) => (
<div className="flex items-center border-b px-3" cmdk-input-wrapper="">
<Search className="mr-2 h-4 w-4 shrink-0 opacity-50" />
<CommandPrimitive.Input
ref={ref}
className={cn(
"flex h-11 w-full rounded-md bg-transparent py-3 text-sm outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50",
className
)}
{...props}
/>
</div>
))
CommandInput.displayName = CommandPrimitive.Input.displayName
const CommandList = React.forwardRef<
React.ElementRef<typeof CommandPrimitive.List>,
React.ComponentPropsWithoutRef<typeof CommandPrimitive.List>
>(({ className, ...props }, ref) => (
<CommandPrimitive.List
ref={ref}
className={cn("max-h-[300px] overflow-y-auto overflow-x-hidden", className)}
{...props}
/>
))
CommandList.displayName = CommandPrimitive.List.displayName
const CommandEmpty = React.forwardRef<
React.ElementRef<typeof CommandPrimitive.Empty>,
React.ComponentPropsWithoutRef<typeof CommandPrimitive.Empty>
>((props, ref) => (
<CommandPrimitive.Empty
ref={ref}
className="py-6 text-center text-sm"
{...props}
/>
))
CommandEmpty.displayName = CommandPrimitive.Empty.displayName
const CommandGroup = React.forwardRef<
React.ElementRef<typeof CommandPrimitive.Group>,
React.ComponentPropsWithoutRef<typeof CommandPrimitive.Group>
>(({ className, ...props }, ref) => (
<CommandPrimitive.Group
ref={ref}
className={cn(
"overflow-hidden p-1 text-foreground [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground",
className
)}
{...props}
/>
))
CommandGroup.displayName = CommandPrimitive.Group.displayName
const CommandSeparator = React.forwardRef<
React.ElementRef<typeof CommandPrimitive.Separator>,
React.ComponentPropsWithoutRef<typeof CommandPrimitive.Separator>
>(({ className, ...props }, ref) => (
<CommandPrimitive.Separator
ref={ref}
className={cn("-mx-1 h-px bg-border", className)}
{...props}
/>
))
CommandSeparator.displayName = CommandPrimitive.Separator.displayName
const CommandItem = React.forwardRef<
React.ElementRef<typeof CommandPrimitive.Item>,
React.ComponentPropsWithoutRef<typeof CommandPrimitive.Item>
>(({ className, ...props }, ref) => (
<CommandPrimitive.Item
ref={ref}
className={cn(
"relative flex cursor-default gap-2 select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[disabled=true]:pointer-events-none data-[selected='true']:bg-accent data-[selected=true]:text-accent-foreground data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
className
)}
{...props}
/>
))
CommandItem.displayName = CommandPrimitive.Item.displayName
const CommandShortcut = ({
className,
...props
}: React.HTMLAttributes<HTMLSpanElement>) => {
return (
<span
className={cn(
"ml-auto text-xs tracking-widest text-muted-foreground",
className
)}
{...props}
/>
)
}
CommandShortcut.displayName = "CommandShortcut"
export {
Command,
CommandDialog,
CommandInput,
CommandList,
CommandEmpty,
CommandGroup,
CommandItem,
CommandShortcut,
CommandSeparator,
}
components/ui/context-menu.tsx 0 → 100644
"use client"
import * as React from "react"
import * as ContextMenuPrimitive from "@radix-ui/react-context-menu"
import { Check, ChevronRight, Circle } from "lucide-react"
import { cn } from "@/lib/utils"
const ContextMenu = ContextMenuPrimitive.Root
const ContextMenuTrigger = ContextMenuPrimitive.Trigger
const ContextMenuGroup = ContextMenuPrimitive.Group
const ContextMenuPortal = ContextMenuPrimitive.Portal
const ContextMenuSub = ContextMenuPrimitive.Sub
const ContextMenuRadioGroup = ContextMenuPrimitive.RadioGroup
const ContextMenuSubTrigger = React.forwardRef<
React.ElementRef<typeof ContextMenuPrimitive.SubTrigger>,
React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.SubTrigger> & {
inset?: boolean
}
>(({ className, inset, children, ...props }, ref) => (
<ContextMenuPrimitive.SubTrigger
ref={ref}
className={cn(
"flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground",
inset && "pl-8",
className
)}
{...props}
>
{children}
<ChevronRight className="ml-auto h-4 w-4" />
</ContextMenuPrimitive.SubTrigger>
))
ContextMenuSubTrigger.displayName = ContextMenuPrimitive.SubTrigger.displayName
const ContextMenuSubContent = React.forwardRef<
React.ElementRef<typeof ContextMenuPrimitive.SubContent>,
React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.SubContent>
>(({ className, ...props }, ref) => (
<ContextMenuPrimitive.SubContent
ref={ref}
className={cn(
"z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
className
)}
{...props}
/>
))
ContextMenuSubContent.displayName = ContextMenuPrimitive.SubContent.displayName
const ContextMenuContent = React.forwardRef<
React.ElementRef<typeof ContextMenuPrimitive.Content>,
React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Content>
>(({ className, ...props }, ref) => (
<ContextMenuPrimitive.Portal>
<ContextMenuPrimitive.Content
ref={ref}
className={cn(
"z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md animate-in fade-in-80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
className
)}
{...props}
/>
</ContextMenuPrimitive.Portal>
))
ContextMenuContent.displayName = ContextMenuPrimitive.Content.displayName
const ContextMenuItem = React.forwardRef<
React.ElementRef<typeof ContextMenuPrimitive.Item>,
React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Item> & {
inset?: boolean
}
>(({ className, inset, ...props }, ref) => (
<ContextMenuPrimitive.Item
ref={ref}
className={cn(
"relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
inset && "pl-8",
className
)}
{...props}
/>
))
ContextMenuItem.displayName = ContextMenuPrimitive.Item.displayName
const ContextMenuCheckboxItem = React.forwardRef<
React.ElementRef<typeof ContextMenuPrimitive.CheckboxItem>,
React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.CheckboxItem>
>(({ className, children, checked, ...props }, ref) => (
<ContextMenuPrimitive.CheckboxItem
ref={ref}
className={cn(
"relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
className
)}
checked={checked}
{...props}
>
<span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
<ContextMenuPrimitive.ItemIndicator>
<Check className="h-4 w-4" />
</ContextMenuPrimitive.ItemIndicator>
</span>
{children}
</ContextMenuPrimitive.CheckboxItem>
))
ContextMenuCheckboxItem.displayName =
ContextMenuPrimitive.CheckboxItem.displayName
const ContextMenuRadioItem = React.forwardRef<
React.ElementRef<typeof ContextMenuPrimitive.RadioItem>,
React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.RadioItem>
>(({ className, children, ...props }, ref) => (
<ContextMenuPrimitive.RadioItem
ref={ref}
className={cn(
"relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
className
)}
{...props}
>
<span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
<ContextMenuPrimitive.ItemIndicator>
<Circle className="h-2 w-2 fill-current" />
</ContextMenuPrimitive.ItemIndicator>
</span>
{children}
</ContextMenuPrimitive.RadioItem>
))
ContextMenuRadioItem.displayName = ContextMenuPrimitive.RadioItem.displayName
const ContextMenuLabel = React.forwardRef<
React.ElementRef<typeof ContextMenuPrimitive.Label>,
React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Label> & {
inset?: boolean
}
>(({ className, inset, ...props }, ref) => (
<ContextMenuPrimitive.Label
ref={ref}
className={cn(
"px-2 py-1.5 text-sm font-semibold text-foreground",
inset && "pl-8",
className
)}
{...props}
/>
))
ContextMenuLabel.displayName = ContextMenuPrimitive.Label.displayName
const ContextMenuSeparator = React.forwardRef<
React.ElementRef<typeof ContextMenuPrimitive.Separator>,
React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Separator>
>(({ className, ...props }, ref) => (
<ContextMenuPrimitive.Separator
ref={ref}
className={cn("-mx-1 my-1 h-px bg-border", className)}
{...props}
/>
))
ContextMenuSeparator.displayName = ContextMenuPrimitive.Separator.displayName
const ContextMenuShortcut = ({
className,
...props
}: React.HTMLAttributes<HTMLSpanElement>) => {
return (
<span
className={cn(
"ml-auto text-xs tracking-widest text-muted-foreground",
className
)}
{...props}
/>
)
}
ContextMenuShortcut.displayName = "ContextMenuShortcut"
export {
ContextMenu,
ContextMenuTrigger,
ContextMenuContent,
ContextMenuItem,
ContextMenuCheckboxItem,
ContextMenuRadioItem,
ContextMenuLabel,
ContextMenuSeparator,
ContextMenuShortcut,
ContextMenuGroup,
ContextMenuPortal,
ContextMenuSub,
ContextMenuSubContent,
ContextMenuSubTrigger,
ContextMenuRadioGroup,
}
components/ui/dialog.tsx 0 → 100644
"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<typeof DialogPrimitive.Overlay>,
React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>
>(({ className, ...props }, ref) => (
<DialogPrimitive.Overlay
ref={ref}
className={cn(
"fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
className
)}
{...props}
/>
))
DialogOverlay.displayName = DialogPrimitive.Overlay.displayName
const DialogContent = React.forwardRef<
React.ElementRef<typeof DialogPrimitive.Content>,
React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>
>(({ className, children, ...props }, ref) => (
<DialogPortal>
<DialogOverlay />
<DialogPrimitive.Content
ref={ref}
className={cn(
"fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg",
className
)}
{...props}
>
{children}
<DialogPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground">
<X className="h-4 w-4" />
<span className="sr-only">Close</span>
</DialogPrimitive.Close>
</DialogPrimitive.Content>
</DialogPortal>
))
DialogContent.displayName = DialogPrimitive.Content.displayName
const DialogHeader = ({
className,
...props
}: React.HTMLAttributes<HTMLDivElement>) => (
<div
className={cn(
"flex flex-col space-y-1.5 text-center sm:text-left",
className
)}
{...props}
/>
)
DialogHeader.displayName = "DialogHeader"
const DialogFooter = ({
className,
...props
}: React.HTMLAttributes<HTMLDivElement>) => (
<div
className={cn(
"flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
className
)}
{...props}
/>
)
DialogFooter.displayName = "DialogFooter"
const DialogTitle = React.forwardRef<
React.ElementRef<typeof DialogPrimitive.Title>,
React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>
>(({ className, ...props }, ref) => (
<DialogPrimitive.Title
ref={ref}
className={cn(
"text-lg font-semibold leading-none tracking-tight",
className
)}
{...props}
/>
))
DialogTitle.displayName = DialogPrimitive.Title.displayName
const DialogDescription = React.forwardRef<
React.ElementRef<typeof DialogPrimitive.Description>,
React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description>
>(({ className, ...props }, ref) => (
<DialogPrimitive.Description
ref={ref}
className={cn("text-sm text-muted-foreground", className)}
{...props}
/>
))
DialogDescription.displayName = DialogPrimitive.Description.displayName
export {
Dialog,
DialogPortal,
DialogOverlay,
DialogClose,
DialogTrigger,
DialogContent,
DialogHeader,
DialogFooter,
DialogTitle,
DialogDescription,
}
components/ui/drawer.tsx 0 → 100644
"use client"
import * as React from "react"
import { Drawer as DrawerPrimitive } from "vaul"
import { cn } from "@/lib/utils"
const Drawer = ({
shouldScaleBackground = true,
...props
}: React.ComponentProps<typeof DrawerPrimitive.Root>) => (
<DrawerPrimitive.Root
shouldScaleBackground={shouldScaleBackground}
{...props}
/>
)
Drawer.displayName = "Drawer"
const DrawerTrigger = DrawerPrimitive.Trigger
const DrawerPortal = DrawerPrimitive.Portal
const DrawerClose = DrawerPrimitive.Close
const DrawerOverlay = React.forwardRef<
React.ElementRef<typeof DrawerPrimitive.Overlay>,
React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Overlay>
>(({ className, ...props }, ref) => (
<DrawerPrimitive.Overlay
ref={ref}
className={cn("fixed inset-0 z-50 bg-black/80", className)}
{...props}
/>
))
DrawerOverlay.displayName = DrawerPrimitive.Overlay.displayName
const DrawerContent = React.forwardRef<
React.ElementRef<typeof DrawerPrimitive.Content>,
React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Content>
>(({ className, children, ...props }, ref) => (
<DrawerPortal>
<DrawerOverlay />
<DrawerPrimitive.Content
ref={ref}
className={cn(
"fixed inset-x-0 bottom-0 z-50 mt-24 flex h-auto flex-col rounded-t-[10px] border bg-background",
className
)}
{...props}
>
<div className="mx-auto mt-4 h-2 w-[100px] rounded-full bg-muted" />
{children}
</DrawerPrimitive.Content>
</DrawerPortal>
))
DrawerContent.displayName = "DrawerContent"
const DrawerHeader = ({
className,
...props
}: React.HTMLAttributes<HTMLDivElement>) => (
<div
className={cn("grid gap-1.5 p-4 text-center sm:text-left", className)}
{...props}
/>
)
DrawerHeader.displayName = "DrawerHeader"
const DrawerFooter = ({
className,
...props
}: React.HTMLAttributes<HTMLDivElement>) => (
<div
className={cn("mt-auto flex flex-col gap-2 p-4", className)}
{...props}
/>
)
DrawerFooter.displayName = "DrawerFooter"
const DrawerTitle = React.forwardRef<
React.ElementRef<typeof DrawerPrimitive.Title>,
React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Title>
>(({ className, ...props }, ref) => (
<DrawerPrimitive.Title
ref={ref}
className={cn(
"text-lg font-semibold leading-none tracking-tight",
className
)}
{...props}
/>
))
DrawerTitle.displayName = DrawerPrimitive.Title.displayName
const DrawerDescription = React.forwardRef<
React.ElementRef<typeof DrawerPrimitive.Description>,
React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Description>
>(({ className, ...props }, ref) => (
<DrawerPrimitive.Description
ref={ref}
className={cn("text-sm text-muted-foreground", className)}
{...props}
/>
))
DrawerDescription.displayName = DrawerPrimitive.Description.displayName
export {
Drawer,
DrawerPortal,
DrawerOverlay,
DrawerTrigger,
DrawerClose,
DrawerContent,
DrawerHeader,
DrawerFooter,
DrawerTitle,
DrawerDescription,
}
components/ui/dropdown-menu.tsx 0 → 100644
"use client"
import * as React from "react"
import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu"
import { Check, ChevronRight, Circle } from "lucide-react"
import { cn } from "@/lib/utils"
const DropdownMenu = DropdownMenuPrimitive.Root
const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger
const DropdownMenuGroup = DropdownMenuPrimitive.Group
const DropdownMenuPortal = DropdownMenuPrimitive.Portal
const DropdownMenuSub = DropdownMenuPrimitive.Sub
const DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup
const DropdownMenuSubTrigger = React.forwardRef<
React.ElementRef<typeof DropdownMenuPrimitive.SubTrigger>,
React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubTrigger> & {
inset?: boolean
}
>(({ className, inset, children, ...props }, ref) => (
<DropdownMenuPrimitive.SubTrigger
ref={ref}
className={cn(
"flex cursor-default gap-2 select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent data-[state=open]:bg-accent [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
inset && "pl-8",
className
)}
{...props}
>
{children}
<ChevronRight className="ml-auto" />
</DropdownMenuPrimitive.SubTrigger>
))
DropdownMenuSubTrigger.displayName =
DropdownMenuPrimitive.SubTrigger.displayName
const DropdownMenuSubContent = React.forwardRef<
React.ElementRef<typeof DropdownMenuPrimitive.SubContent>,
React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubContent>
>(({ className, ...props }, ref) => (
<DropdownMenuPrimitive.SubContent
ref={ref}
className={cn(
"z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
className
)}
{...props}
/>
))
DropdownMenuSubContent.displayName =
DropdownMenuPrimitive.SubContent.displayName
const DropdownMenuContent = React.forwardRef<
React.ElementRef<typeof DropdownMenuPrimitive.Content>,
React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Content>
>(({ className, sideOffset = 4, ...props }, ref) => (
<DropdownMenuPrimitive.Portal>
<DropdownMenuPrimitive.Content
ref={ref}
sideOffset={sideOffset}
className={cn(
"z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
className
)}
{...props}
/>
</DropdownMenuPrimitive.Portal>
))
DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName
const DropdownMenuItem = React.forwardRef<
React.ElementRef<typeof DropdownMenuPrimitive.Item>,
React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Item> & {
inset?: boolean
}
>(({ className, inset, ...props }, ref) => (
<DropdownMenuPrimitive.Item
ref={ref}
className={cn(
"relative flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
inset && "pl-8",
className
)}
{...props}
/>
))
DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName
const DropdownMenuCheckboxItem = React.forwardRef<
React.ElementRef<typeof DropdownMenuPrimitive.CheckboxItem>,
React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.CheckboxItem>
>(({ className, children, checked, ...props }, ref) => (
<DropdownMenuPrimitive.CheckboxItem
ref={ref}
className={cn(
"relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
className
)}
checked={checked}
{...props}
>
<span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
<DropdownMenuPrimitive.ItemIndicator>
<Check className="h-4 w-4" />
</DropdownMenuPrimitive.ItemIndicator>
</span>
{children}
</DropdownMenuPrimitive.CheckboxItem>
))
DropdownMenuCheckboxItem.displayName =
DropdownMenuPrimitive.CheckboxItem.displayName
const DropdownMenuRadioItem = React.forwardRef<
React.ElementRef<typeof DropdownMenuPrimitive.RadioItem>,
React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.RadioItem>
>(({ className, children, ...props }, ref) => (
<DropdownMenuPrimitive.RadioItem
ref={ref}
className={cn(
"relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
className
)}
{...props}
>
<span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
<DropdownMenuPrimitive.ItemIndicator>
<Circle className="h-2 w-2 fill-current" />
</DropdownMenuPrimitive.ItemIndicator>
</span>
{children}
</DropdownMenuPrimitive.RadioItem>
))
DropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName
const DropdownMenuLabel = React.forwardRef<
React.ElementRef<typeof DropdownMenuPrimitive.Label>,
React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Label> & {
inset?: boolean
}
>(({ className, inset, ...props }, ref) => (
<DropdownMenuPrimitive.Label
ref={ref}
className={cn(
"px-2 py-1.5 text-sm font-semibold",
inset && "pl-8",
className
)}
{...props}
/>
))
DropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName
const DropdownMenuSeparator = React.forwardRef<
React.ElementRef<typeof DropdownMenuPrimitive.Separator>,
React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Separator>
>(({ className, ...props }, ref) => (
<DropdownMenuPrimitive.Separator
ref={ref}
className={cn("-mx-1 my-1 h-px bg-muted", className)}
{...props}
/>
))
DropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName
const DropdownMenuShortcut = ({
className,
...props
}: React.HTMLAttributes<HTMLSpanElement>) => {
return (
<span
className={cn("ml-auto text-xs tracking-widest opacity-60", className)}
{...props}
/>
)
}
DropdownMenuShortcut.displayName = "DropdownMenuShortcut"
export {
DropdownMenu,
DropdownMenuTrigger,
DropdownMenuContent,
DropdownMenuItem,
DropdownMenuCheckboxItem,
DropdownMenuRadioItem,
DropdownMenuLabel,
DropdownMenuSeparator,
DropdownMenuShortcut,
DropdownMenuGroup,
DropdownMenuPortal,
DropdownMenuSub,
DropdownMenuSubContent,
DropdownMenuSubTrigger,
DropdownMenuRadioGroup,
}
components/ui/form.tsx 0 → 100644
"use client"
import * as React from "react"
import * as LabelPrimitive from "@radix-ui/react-label"
import { Slot } from "@radix-ui/react-slot"
import {
Controller,
ControllerProps,
FieldPath,
FieldValues,
FormProvider,
useFormContext,
} from "react-hook-form"
import { cn } from "@/lib/utils"
import { Label } from "@/components/ui/label"
const Form = FormProvider
type FormFieldContextValue<
TFieldValues extends FieldValues = FieldValues,
TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>
> = {
name: TName
}
const FormFieldContext = React.createContext<FormFieldContextValue>(
{} as FormFieldContextValue
)
const FormField = <
TFieldValues extends FieldValues = FieldValues,
TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>
>({
...props
}: ControllerProps<TFieldValues, TName>) => {
return (
<FormFieldContext.Provider value={{ name: props.name }}>
<Controller {...props} />
</FormFieldContext.Provider>
)
}
const useFormField = () => {
const fieldContext = React.useContext(FormFieldContext)
const itemContext = React.useContext(FormItemContext)
const { getFieldState, formState } = useFormContext()
const fieldState = getFieldState(fieldContext.name, formState)
if (!fieldContext) {
throw new Error("useFormField should be used within <FormField>")
}
const { id } = itemContext
return {
id,
name: fieldContext.name,
formItemId: `${id}-form-item`,
formDescriptionId: `${id}-form-item-description`,
formMessageId: `${id}-form-item-message`,
...fieldState,
}
}
type FormItemContextValue = {
id: string
}
const FormItemContext = React.createContext<FormItemContextValue>(
{} as FormItemContextValue
)
const FormItem = React.forwardRef<
HTMLDivElement,
React.HTMLAttributes<HTMLDivElement>
>(({ className, ...props }, ref) => {
const id = React.useId()
return (
<FormItemContext.Provider value={{ id }}>
<div ref={ref} className={cn("space-y-2", className)} {...props} />
</FormItemContext.Provider>
)
})
FormItem.displayName = "FormItem"
const FormLabel = React.forwardRef<
React.ElementRef<typeof LabelPrimitive.Root>,
React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root>
>(({ className, ...props }, ref) => {
const { error, formItemId } = useFormField()
return (
<Label
ref={ref}
className={cn(error && "text-destructive", className)}
htmlFor={formItemId}
{...props}
/>
)
})
FormLabel.displayName = "FormLabel"
const FormControl = React.forwardRef<
React.ElementRef<typeof Slot>,
React.ComponentPropsWithoutRef<typeof Slot>
>(({ ...props }, ref) => {
const { error, formItemId, formDescriptionId, formMessageId } = useFormField()
return (
<Slot
ref={ref}
id={formItemId}
aria-describedby={
!error
? `${formDescriptionId}`
: `${formDescriptionId} ${formMessageId}`
}
aria-invalid={!!error}
{...props}
/>
)
})
FormControl.displayName = "FormControl"
const FormDescription = React.forwardRef<
HTMLParagraphElement,
React.HTMLAttributes<HTMLParagraphElement>
>(({ className, ...props }, ref) => {
const { formDescriptionId } = useFormField()
return (
<p
ref={ref}
id={formDescriptionId}
className={cn("text-sm text-muted-foreground", className)}
{...props}
/>
)
})
FormDescription.displayName = "FormDescription"
const FormMessage = React.forwardRef<
HTMLParagraphElement,
React.HTMLAttributes<HTMLParagraphElement>
>(({ className, children, ...props }, ref) => {
const { error, formMessageId } = useFormField()
const body = error ? String(error?.message) : children
if (!body) {
return null
}
return (
<p
ref={ref}
id={formMessageId}
className={cn("text-sm font-medium text-destructive", className)}
{...props}
>
{body}
</p>
)
})
FormMessage.displayName = "FormMessage"
export {
useFormField,
Form,
FormItem,
FormLabel,
FormControl,
FormDescription,
FormMessage,
FormField,
}
components/ui/hover-card.tsx 0 → 100644
"use client"
import * as React from "react"
import * as HoverCardPrimitive from "@radix-ui/react-hover-card"
import { cn } from "@/lib/utils"
const HoverCard = HoverCardPrimitive.Root
const HoverCardTrigger = HoverCardPrimitive.Trigger
const HoverCardContent = React.forwardRef<
React.ElementRef<typeof HoverCardPrimitive.Content>,
React.ComponentPropsWithoutRef<typeof HoverCardPrimitive.Content>
>(({ className, align = "center", sideOffset = 4, ...props }, ref) => (
<HoverCardPrimitive.Content
ref={ref}
align={align}
sideOffset={sideOffset}
className={cn(
"z-50 w-64 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
className
)}
{...props}
/>
))
HoverCardContent.displayName = HoverCardPrimitive.Content.displayName
export { HoverCard, HoverCardTrigger, HoverCardContent }
components/ui/input-otp.tsx 0 → 100644
"use client"
import * as React from "react"
import { OTPInput, OTPInputContext } from "input-otp"
import { Dot } from "lucide-react"
import { cn } from "@/lib/utils"
const InputOTP = React.forwardRef<
React.ElementRef<typeof OTPInput>,
React.ComponentPropsWithoutRef<typeof OTPInput>
>(({ className, containerClassName, ...props }, ref) => (
<OTPInput
ref={ref}
containerClassName={cn(
"flex items-center gap-2 has-[:disabled]:opacity-50",
containerClassName
)}
className={cn("disabled:cursor-not-allowed", className)}
{...props}
/>
))
InputOTP.displayName = "InputOTP"
const InputOTPGroup = React.forwardRef<
React.ElementRef<"div">,
React.ComponentPropsWithoutRef<"div">
>(({ className, ...props }, ref) => (
<div ref={ref} className={cn("flex items-center", className)} {...props} />
))
InputOTPGroup.displayName = "InputOTPGroup"
const InputOTPSlot = React.forwardRef<
React.ElementRef<"div">,
React.ComponentPropsWithoutRef<"div"> & { index: number }
>(({ index, className, ...props }, ref) => {
const inputOTPContext = React.useContext(OTPInputContext)
const { char, hasFakeCaret, isActive } = inputOTPContext.slots[index]
return (
<div
ref={ref}
className={cn(
"relative flex h-10 w-10 items-center justify-center border-y border-r border-input text-sm transition-all first:rounded-l-md first:border-l last:rounded-r-md",
isActive && "z-10 ring-2 ring-ring ring-offset-background",
className
)}
{...props}
>
{char}
{hasFakeCaret && (
<div className="pointer-events-none absolute inset-0 flex items-center justify-center">
<div className="h-4 w-px animate-caret-blink bg-foreground duration-1000" />
</div>
)}
</div>
)
})
InputOTPSlot.displayName = "InputOTPSlot"
const InputOTPSeparator = React.forwardRef<
React.ElementRef<"div">,
React.ComponentPropsWithoutRef<"div">
>(({ ...props }, ref) => (
<div ref={ref} role="separator" {...props}>
<Dot />
</div>
))
InputOTPSeparator.displayName = "InputOTPSeparator"
export { InputOTP, InputOTPGroup, InputOTPSlot, InputOTPSeparator }
components/ui/input.tsx 0 → 100644
import * as React from "react"
import { cn } from "@/lib/utils"
const Input = React.forwardRef<HTMLInputElement, React.ComponentProps<"input">>(
({ className, type, ...props }, ref) => {
return (
<input
type={type}
className={cn(
"flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-base ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
className
)}
ref={ref}
{...props}
/>
)
}
)
Input.displayName = "Input"
export { Input }
components/ui/label.tsx 0 → 100644
"use client"
import * as React from "react"
import * as LabelPrimitive from "@radix-ui/react-label"
import { cva, type VariantProps } from "class-variance-authority"
import { cn } from "@/lib/utils"
const labelVariants = cva(
"text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
)
const Label = React.forwardRef<
React.ElementRef<typeof LabelPrimitive.Root>,
React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root> &
VariantProps<typeof labelVariants>
>(({ className, ...props }, ref) => (
<LabelPrimitive.Root
ref={ref}
className={cn(labelVariants(), className)}
{...props}
/>
))
Label.displayName = LabelPrimitive.Root.displayName
export { Label }
components/ui/menubar.tsx 0 → 100644
"use client"
import * as React from "react"
import * as MenubarPrimitive from "@radix-ui/react-menubar"
import { Check, ChevronRight, Circle } from "lucide-react"
import { cn } from "@/lib/utils"
const MenubarMenu = MenubarPrimitive.Menu
const MenubarGroup = MenubarPrimitive.Group
const MenubarPortal = MenubarPrimitive.Portal
const MenubarSub = MenubarPrimitive.Sub
const MenubarRadioGroup = MenubarPrimitive.RadioGroup
const Menubar = React.forwardRef<
React.ElementRef<typeof MenubarPrimitive.Root>,
React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Root>
>(({ className, ...props }, ref) => (
<MenubarPrimitive.Root
ref={ref}
className={cn(
"flex h-10 items-center space-x-1 rounded-md border bg-background p-1",
className
)}
{...props}
/>
))
Menubar.displayName = MenubarPrimitive.Root.displayName
const MenubarTrigger = React.forwardRef<
React.ElementRef<typeof MenubarPrimitive.Trigger>,
React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Trigger>
>(({ className, ...props }, ref) => (
<MenubarPrimitive.Trigger
ref={ref}
className={cn(
"flex cursor-default select-none items-center rounded-sm px-3 py-1.5 text-sm font-medium outline-none focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground",
className
)}
{...props}
/>
))
MenubarTrigger.displayName = MenubarPrimitive.Trigger.displayName
const MenubarSubTrigger = React.forwardRef<
React.ElementRef<typeof MenubarPrimitive.SubTrigger>,
React.ComponentPropsWithoutRef<typeof MenubarPrimitive.SubTrigger> & {
inset?: boolean
}
>(({ className, inset, children, ...props }, ref) => (
<MenubarPrimitive.SubTrigger
ref={ref}
className={cn(
"flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground",
inset && "pl-8",
className
)}
{...props}
>
{children}
<ChevronRight className="ml-auto h-4 w-4" />
</MenubarPrimitive.SubTrigger>
))
MenubarSubTrigger.displayName = MenubarPrimitive.SubTrigger.displayName
const MenubarSubContent = React.forwardRef<
React.ElementRef<typeof MenubarPrimitive.SubContent>,
React.ComponentPropsWithoutRef<typeof MenubarPrimitive.SubContent>
>(({ className, ...props }, ref) => (
<MenubarPrimitive.SubContent
ref={ref}
className={cn(
"z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
className
)}
{...props}
/>
))
MenubarSubContent.displayName = MenubarPrimitive.SubContent.displayName
const MenubarContent = React.forwardRef<
React.ElementRef<typeof MenubarPrimitive.Content>,
React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Content>
>(
(
{ className, align = "start", alignOffset = -4, sideOffset = 8, ...props },
ref
) => (
<MenubarPrimitive.Portal>
<MenubarPrimitive.Content
ref={ref}
align={align}
alignOffset={alignOffset}
sideOffset={sideOffset}
className={cn(
"z-50 min-w-[12rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
className
)}
{...props}
/>
</MenubarPrimitive.Portal>
)
)
MenubarContent.displayName = MenubarPrimitive.Content.displayName
const MenubarItem = React.forwardRef<
React.ElementRef<typeof MenubarPrimitive.Item>,
React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Item> & {
inset?: boolean
}
>(({ className, inset, ...props }, ref) => (
<MenubarPrimitive.Item
ref={ref}
className={cn(
"relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
inset && "pl-8",
className
)}
{...props}
/>
))
MenubarItem.displayName = MenubarPrimitive.Item.displayName
const MenubarCheckboxItem = React.forwardRef<
React.ElementRef<typeof MenubarPrimitive.CheckboxItem>,
React.ComponentPropsWithoutRef<typeof MenubarPrimitive.CheckboxItem>
>(({ className, children, checked, ...props }, ref) => (
<MenubarPrimitive.CheckboxItem
ref={ref}
className={cn(
"relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
className
)}
checked={checked}
{...props}
>
<span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
<MenubarPrimitive.ItemIndicator>
<Check className="h-4 w-4" />
</MenubarPrimitive.ItemIndicator>
</span>
{children}
</MenubarPrimitive.CheckboxItem>
))
MenubarCheckboxItem.displayName = MenubarPrimitive.CheckboxItem.displayName
const MenubarRadioItem = React.forwardRef<
React.ElementRef<typeof MenubarPrimitive.RadioItem>,
React.ComponentPropsWithoutRef<typeof MenubarPrimitive.RadioItem>
>(({ className, children, ...props }, ref) => (
<MenubarPrimitive.RadioItem
ref={ref}
className={cn(
"relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
className
)}
{...props}
>
<span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
<MenubarPrimitive.ItemIndicator>
<Circle className="h-2 w-2 fill-current" />
</MenubarPrimitive.ItemIndicator>
</span>
{children}
</MenubarPrimitive.RadioItem>
))
MenubarRadioItem.displayName = MenubarPrimitive.RadioItem.displayName
const MenubarLabel = React.forwardRef<
React.ElementRef<typeof MenubarPrimitive.Label>,
React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Label> & {
inset?: boolean
}
>(({ className, inset, ...props }, ref) => (
<MenubarPrimitive.Label
ref={ref}
className={cn(
"px-2 py-1.5 text-sm font-semibold",
inset && "pl-8",
className
)}
{...props}
/>
))
MenubarLabel.displayName = MenubarPrimitive.Label.displayName
const MenubarSeparator = React.forwardRef<
React.ElementRef<typeof MenubarPrimitive.Separator>,
React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Separator>
>(({ className, ...props }, ref) => (
<MenubarPrimitive.Separator
ref={ref}
className={cn("-mx-1 my-1 h-px bg-muted", className)}
{...props}
/>
))
MenubarSeparator.displayName = MenubarPrimitive.Separator.displayName
const MenubarShortcut = ({
className,
...props
}: React.HTMLAttributes<HTMLSpanElement>) => {
return (
<span
className={cn(
"ml-auto text-xs tracking-widest text-muted-foreground",
className
)}
{...props}
/>
)
}
MenubarShortcut.displayname = "MenubarShortcut"
export {
Menubar,
MenubarMenu,
MenubarTrigger,
MenubarContent,
MenubarItem,
MenubarSeparator,
MenubarLabel,
MenubarCheckboxItem,
MenubarRadioGroup,
MenubarRadioItem,
MenubarPortal,
MenubarSubContent,
MenubarSubTrigger,
MenubarGroup,
MenubarSub,
MenubarShortcut,
}
components/ui/navigation-menu.tsx 0 → 100644
import * as React from "react"
import * as NavigationMenuPrimitive from "@radix-ui/react-navigation-menu"
import { cva } from "class-variance-authority"
import { ChevronDown } from "lucide-react"
import { cn } from "@/lib/utils"
const NavigationMenu = React.forwardRef<
React.ElementRef<typeof NavigationMenuPrimitive.Root>,
React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Root>
>(({ className, children, ...props }, ref) => (
<NavigationMenuPrimitive.Root
ref={ref}
className={cn(
"relative z-10 flex max-w-max flex-1 items-center justify-center",
className
)}
{...props}
>
{children}
<NavigationMenuViewport />
</NavigationMenuPrimitive.Root>
))
NavigationMenu.displayName = NavigationMenuPrimitive.Root.displayName
const NavigationMenuList = React.forwardRef<
React.ElementRef<typeof NavigationMenuPrimitive.List>,
React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.List>
>(({ className, ...props }, ref) => (
<NavigationMenuPrimitive.List
ref={ref}
className={cn(
"group flex flex-1 list-none items-center justify-center space-x-1",
className
)}
{...props}
/>
))
NavigationMenuList.displayName = NavigationMenuPrimitive.List.displayName
const NavigationMenuItem = NavigationMenuPrimitive.Item
const navigationMenuTriggerStyle = cva(
"group inline-flex h-10 w-max items-center justify-center rounded-md bg-background px-4 py-2 text-sm font-medium transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground focus:outline-none disabled:pointer-events-none disabled:opacity-50 data-[active]:bg-accent/50 data-[state=open]:bg-accent/50"
)
const NavigationMenuTrigger = React.forwardRef<
React.ElementRef<typeof NavigationMenuPrimitive.Trigger>,
React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Trigger>
>(({ className, children, ...props }, ref) => (
<NavigationMenuPrimitive.Trigger
ref={ref}
className={cn(navigationMenuTriggerStyle(), "group", className)}
{...props}
>
{children}{" "}
<ChevronDown
className="relative top-[1px] ml-1 h-3 w-3 transition duration-200 group-data-[state=open]:rotate-180"
aria-hidden="true"
/>
</NavigationMenuPrimitive.Trigger>
))
NavigationMenuTrigger.displayName = NavigationMenuPrimitive.Trigger.displayName
const NavigationMenuContent = React.forwardRef<
React.ElementRef<typeof NavigationMenuPrimitive.Content>,
React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Content>
>(({ className, ...props }, ref) => (
<NavigationMenuPrimitive.Content
ref={ref}
className={cn(
"left-0 top-0 w-full data-[motion^=from-]:animate-in data-[motion^=to-]:animate-out data-[motion^=from-]:fade-in data-[motion^=to-]:fade-out data-[motion=from-end]:slide-in-from-right-52 data-[motion=from-start]:slide-in-from-left-52 data-[motion=to-end]:slide-out-to-right-52 data-[motion=to-start]:slide-out-to-left-52 md:absolute md:w-auto ",
className
)}
{...props}
/>
))
NavigationMenuContent.displayName = NavigationMenuPrimitive.Content.displayName
const NavigationMenuLink = NavigationMenuPrimitive.Link
const NavigationMenuViewport = React.forwardRef<
React.ElementRef<typeof NavigationMenuPrimitive.Viewport>,
React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Viewport>
>(({ className, ...props }, ref) => (
<div className={cn("absolute left-0 top-full flex justify-center")}>
<NavigationMenuPrimitive.Viewport
className={cn(
"origin-top-center relative mt-1.5 h-[var(--radix-navigation-menu-viewport-height)] w-full overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-90 md:w-[var(--radix-navigation-menu-viewport-width)]",
className
)}
ref={ref}
{...props}
/>
</div>
))
NavigationMenuViewport.displayName =
NavigationMenuPrimitive.Viewport.displayName
const NavigationMenuIndicator = React.forwardRef<
React.ElementRef<typeof NavigationMenuPrimitive.Indicator>,
React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Indicator>
>(({ className, ...props }, ref) => (
<NavigationMenuPrimitive.Indicator
ref={ref}
className={cn(
"top-full z-[1] flex h-1.5 items-end justify-center overflow-hidden data-[state=visible]:animate-in data-[state=hidden]:animate-out data-[state=hidden]:fade-out data-[state=visible]:fade-in",
className
)}
{...props}
>
<div className="relative top-[60%] h-2 w-2 rotate-45 rounded-tl-sm bg-border shadow-md" />
</NavigationMenuPrimitive.Indicator>
))
NavigationMenuIndicator.displayName =
NavigationMenuPrimitive.Indicator.displayName
export {
navigationMenuTriggerStyle,
NavigationMenu,
NavigationMenuList,
NavigationMenuItem,
NavigationMenuContent,
NavigationMenuTrigger,
NavigationMenuLink,
NavigationMenuIndicator,
NavigationMenuViewport,
}
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or sign in to comment