wehub-resource-sync
548 lines
23 KiB
TypeScript
548 lines
23 KiB
TypeScript
"use client"
|
|
|
|
import * as React from "react"
|
|
import { format } from "date-fns"
|
|
import {
|
|
Archive,
|
|
Briefcase,
|
|
CalendarIcon,
|
|
CheckCircle,
|
|
ChevronDown,
|
|
ChevronUp,
|
|
Github,
|
|
Heart,
|
|
Home,
|
|
Mail,
|
|
Phone,
|
|
Quote,
|
|
Shield,
|
|
ShoppingBag,
|
|
Star,
|
|
User,
|
|
} from "lucide-react"
|
|
|
|
import { cn } from "@/lib/utils"
|
|
import {
|
|
Accordion,
|
|
AccordionContent,
|
|
AccordionItem,
|
|
AccordionTrigger,
|
|
} from "@/components/ui/accordion"
|
|
import { Badge } from "@/components/ui/badge"
|
|
import { Button } from "@/components/ui/button"
|
|
import { Calendar } from "@/components/ui/calendar"
|
|
import { Card, CardContent } from "@/components/ui/card"
|
|
import { Input } from "@/components/ui/input"
|
|
import { Label } from "@/components/ui/label"
|
|
import {
|
|
Popover,
|
|
PopoverContent,
|
|
PopoverTrigger,
|
|
} from "@/components/ui/popover"
|
|
import {
|
|
Select,
|
|
SelectContent,
|
|
SelectItem,
|
|
SelectTrigger,
|
|
SelectValue,
|
|
} from "@/components/ui/select"
|
|
import { Separator } from "@/components/ui/separator"
|
|
import { Switch } from "@/components/ui/switch"
|
|
|
|
export function ShowcaseMasonry() {
|
|
const [date, setDate] = React.useState<Date>(new Date(2024, 9, 10))
|
|
const [isFavorite, setIsFavorite] = React.useState(false)
|
|
const [isGithubActive, setIsGithubActive] = React.useState(false)
|
|
|
|
return (
|
|
<section className="container py-12 md:py-20">
|
|
<div className="columns-1 gap-4 space-y-4 md:columns-2 lg:columns-3">
|
|
{/* Order Summary Card */}
|
|
<div className="break-inside-avoid">
|
|
<div className="bg-muted/30 rounded-xl border p-6">
|
|
<div className="mb-6 flex items-center gap-3">
|
|
<div className="bg-primary/10 flex h-10 w-10 items-center justify-center rounded-full">
|
|
<ShoppingBag className="text-primary h-5 w-5" />
|
|
</div>
|
|
<h2 className="text-xl font-bold">Order Summary</h2>
|
|
</div>
|
|
|
|
<div className="space-y-4">
|
|
<div className="bg-background hover:bg-muted/50 flex items-start gap-4 rounded-lg border p-3 transition-colors">
|
|
<div className="relative h-20 w-20 overflow-hidden rounded-md border">
|
|
<img
|
|
src="https://v3.material-tailwind.com/coat-1.png"
|
|
alt="Classic Suit"
|
|
className="h-full w-full object-cover p-1"
|
|
/>
|
|
</div>
|
|
<div className="flex-1 space-y-1">
|
|
<p className="leading-tight font-semibold">Classic Suit</p>
|
|
<p className="text-muted-foreground text-sm">Silk · Size M</p>
|
|
<p className="text-muted-foreground text-xs">Qty: 1</p>
|
|
</div>
|
|
<p className="font-semibold">$1,300</p>
|
|
</div>
|
|
<div className="bg-background hover:bg-muted/50 flex items-start gap-4 rounded-lg border p-3 transition-colors">
|
|
<div className="relative h-20 w-20 overflow-hidden rounded-md border">
|
|
<img
|
|
src="https://v3.material-tailwind.com/coat-2.png"
|
|
alt="Premium Suit"
|
|
className="h-full w-full object-cover p-1"
|
|
/>
|
|
</div>
|
|
<div className="flex-1 space-y-1">
|
|
<p className="leading-tight font-semibold">Premium Suit</p>
|
|
<p className="text-muted-foreground text-sm">
|
|
Linen · Size M
|
|
</p>
|
|
<p className="text-muted-foreground text-xs">Qty: 1</p>
|
|
</div>
|
|
<p className="font-semibold">$790</p>
|
|
</div>
|
|
</div>
|
|
|
|
<Separator className="my-6" />
|
|
|
|
<div className="space-y-3">
|
|
<div className="flex justify-between text-sm">
|
|
<span className="text-muted-foreground">Subtotal</span>
|
|
<span className="font-medium">$2,090</span>
|
|
</div>
|
|
<div className="flex justify-between text-sm">
|
|
<span className="text-muted-foreground">Shipping estimate</span>
|
|
<span className="font-medium">$0</span>
|
|
</div>
|
|
<div className="flex justify-between text-sm">
|
|
<span className="text-muted-foreground">Tax estimate</span>
|
|
<span className="font-medium">$5</span>
|
|
</div>
|
|
</div>
|
|
|
|
<Separator className="my-4" />
|
|
|
|
<div className="flex items-center justify-between">
|
|
<span className="text-lg font-bold">Total</span>
|
|
<span className="text-2xl font-bold">$2,095</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Transaction History Card */}
|
|
<div className="break-inside-avoid">
|
|
<div className="dark:bg-card rounded-xl border bg-white p-6 shadow-sm">
|
|
<div className="mb-6 flex items-start justify-between gap-3">
|
|
<div className="min-w-0 flex-1">
|
|
<h2 className="font-semibold">History Transactions</h2>
|
|
<p className="text-muted-foreground mt-1 text-xs sm:text-sm">
|
|
Track and monitor your financial activity.
|
|
</p>
|
|
</div>
|
|
<Popover>
|
|
<PopoverTrigger asChild>
|
|
<Button
|
|
variant="outline"
|
|
size="sm"
|
|
className={cn(
|
|
"shrink-0 text-xs sm:text-sm",
|
|
!date && "text-muted-foreground"
|
|
)}
|
|
>
|
|
<CalendarIcon className="mr-1.5 h-3.5 w-3.5 sm:h-4 sm:w-4" />
|
|
<span className="hidden sm:inline">
|
|
{date ? format(date, "MMM d, yyyy") : "Select"}
|
|
</span>
|
|
<span className="sm:hidden">
|
|
{date ? format(date, "M/d") : "Date"}
|
|
</span>
|
|
</Button>
|
|
</PopoverTrigger>
|
|
<PopoverContent className="w-auto p-0" align="end">
|
|
<Calendar
|
|
mode="single"
|
|
selected={date}
|
|
onSelect={(day) => day && setDate(day)}
|
|
initialFocus
|
|
/>
|
|
</PopoverContent>
|
|
</Popover>
|
|
</div>
|
|
<div>
|
|
<p className="text-muted-foreground mb-3 text-xs font-semibold sm:text-sm">
|
|
March 2023
|
|
</p>
|
|
<div className="space-y-2">
|
|
<div className="flex items-center gap-2 rounded-lg border p-3 sm:gap-4 sm:p-4">
|
|
<div className="bg-card text-card-foreground hidden h-10 w-10 shrink-0 items-center justify-center rounded-xl border shadow-sm sm:flex sm:h-12 sm:w-12">
|
|
<ChevronDown className="h-4 w-4 text-red-600 sm:h-5 sm:w-5" />
|
|
</div>
|
|
<div className="min-w-0 flex-1 space-y-0.5">
|
|
<p className="text-sm font-semibold sm:text-base">
|
|
Netflix
|
|
</p>
|
|
<p className="text-muted-foreground truncate text-xs sm:text-sm">
|
|
27 March 2026, at 12:30 PM
|
|
</p>
|
|
</div>
|
|
<p className="shrink-0 text-xs font-semibold text-red-600 sm:text-sm">
|
|
- $2,500.00
|
|
</p>
|
|
</div>
|
|
<div className="flex items-center gap-2 rounded-lg border p-3 sm:gap-4 sm:p-4">
|
|
<div className="bg-card text-card-foreground hidden h-10 w-10 shrink-0 items-center justify-center rounded-xl border shadow-sm sm:flex sm:h-12 sm:w-12">
|
|
<ChevronUp className="h-4 w-4 text-green-600 sm:h-5 sm:w-5" />
|
|
</div>
|
|
<div className="min-w-0 flex-1 space-y-0.5">
|
|
<p className="text-sm font-semibold sm:text-base">Apple</p>
|
|
<p className="text-muted-foreground truncate text-xs sm:text-sm">
|
|
27 March 2026, at 04:30 AM
|
|
</p>
|
|
</div>
|
|
<p className="shrink-0 text-xs font-semibold text-green-600 sm:text-sm">
|
|
+ $2,000.00
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Product Card */}
|
|
<div className="break-inside-avoid">
|
|
<div className="group bg-card relative overflow-hidden rounded-lg border transition-all hover:shadow-lg">
|
|
<Badge
|
|
variant="secondary"
|
|
className="absolute top-3 left-3 z-10 bg-white dark:bg-gray-900"
|
|
>
|
|
Exclusive
|
|
</Badge>
|
|
<button
|
|
onClick={() => setIsFavorite(!isFavorite)}
|
|
className="absolute top-3 right-3 z-10 flex h-8 w-8 items-center justify-center rounded-full bg-white/90 backdrop-blur-sm transition-colors hover:bg-white dark:bg-gray-900/90 dark:hover:bg-gray-900"
|
|
>
|
|
<Heart
|
|
className={`h-4 w-4 transition-colors ${
|
|
isFavorite
|
|
? "fill-red-500 text-red-500"
|
|
: "text-gray-600 dark:text-gray-400"
|
|
}`}
|
|
/>
|
|
</button>
|
|
|
|
<div className="bg-muted/30 aspect-square overflow-hidden">
|
|
<img
|
|
src="https://images.unsplash.com/photo-1574015974293-817f0ebebb74?ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&q=80&w=973"
|
|
alt="Cable-knit cashmere cardigan"
|
|
className="h-full w-full object-cover transition-transform duration-300 group-hover:scale-105"
|
|
/>
|
|
</div>
|
|
|
|
<div className="border-t p-4">
|
|
<div className="mb-2 flex items-start justify-between gap-2">
|
|
<div className="flex-1">
|
|
<p className="text-sm font-semibold">Zegna</p>
|
|
<p className="text-muted-foreground mt-1 text-sm leading-tight">
|
|
Cable-knit cashmere cardigan
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<p className="mt-2 font-semibold">€3,450</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Account Integration Card */}
|
|
<div className="break-inside-avoid">
|
|
<Card className="bg-card border p-6">
|
|
<div className="mb-6 border-b pb-6">
|
|
<div className="flex items-center gap-3">
|
|
<div className="bg-primary/10 flex h-12 w-12 items-center justify-center rounded-lg">
|
|
<Shield className="text-primary h-6 w-6" />
|
|
</div>
|
|
<div>
|
|
<h2 className="text-xl font-semibold tracking-tight">
|
|
Third-Party Integrations
|
|
</h2>
|
|
<p className="text-muted-foreground mt-1 text-sm">
|
|
Manage and configure connections to external services
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<Accordion type="single" collapsible defaultValue="github">
|
|
<AccordionItem
|
|
value="github"
|
|
className="border-border rounded-lg border"
|
|
>
|
|
<div className="flex flex-col gap-3 px-4 py-3 sm:flex-row sm:items-center sm:justify-between">
|
|
<div className="flex flex-1 items-center gap-3">
|
|
<div className="bg-muted/50 flex h-10 w-10 shrink-0 items-center justify-center rounded-lg">
|
|
<Github
|
|
className={`h-5 w-5 ${isGithubActive ? "text-primary" : "text-muted-foreground"}`}
|
|
/>
|
|
</div>
|
|
<div className="min-w-0 flex-1 text-left">
|
|
<div className="mb-1 flex flex-wrap items-center gap-2">
|
|
<h3 className="text-sm font-semibold">GitHub</h3>
|
|
<Badge
|
|
variant="outline"
|
|
className="text-muted-foreground text-xs"
|
|
>
|
|
Development
|
|
</Badge>
|
|
</div>
|
|
<p className="text-muted-foreground line-clamp-1 text-xs">
|
|
Connect your GitHub account to sync repositories
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<div className="flex items-center gap-3">
|
|
<div className="flex items-center gap-2">
|
|
<Switch
|
|
id="github-toggle"
|
|
checked={isGithubActive}
|
|
onCheckedChange={setIsGithubActive}
|
|
/>
|
|
<Label
|
|
htmlFor="github-toggle"
|
|
className="cursor-pointer text-xs"
|
|
>
|
|
{isGithubActive ? "Enabled" : "Enable"}
|
|
</Label>
|
|
</div>
|
|
<AccordionTrigger className="hover:bg-muted/50 rounded p-2">
|
|
<span className="sr-only">Toggle details</span>
|
|
</AccordionTrigger>
|
|
</div>
|
|
</div>
|
|
<AccordionContent className="border-t px-4 pt-4 pb-4">
|
|
<div className="space-y-3">
|
|
<p className="text-muted-foreground text-xs leading-relaxed">
|
|
You haven't added your GitHub account or you
|
|
aren't authorized. Connect your account to enable
|
|
repository syncing and collaboration features.
|
|
</p>
|
|
<Button size="sm" variant="outline" className="w-full">
|
|
<Github className="mr-2 h-4 w-4" />
|
|
Connect GitHub Account
|
|
</Button>
|
|
</div>
|
|
</AccordionContent>
|
|
</AccordionItem>
|
|
</Accordion>
|
|
</Card>
|
|
</div>
|
|
|
|
{/* Order Timeline Card */}
|
|
<div className="break-inside-avoid">
|
|
<div className="bg-card rounded-xl border p-6">
|
|
<h3 className="mb-6 text-lg font-semibold">Order Timeline</h3>
|
|
<div className="space-y-6">
|
|
<div className="flex gap-4">
|
|
<div className="flex flex-col items-center">
|
|
<div className="bg-primary flex h-10 w-10 items-center justify-center rounded-full shadow-md">
|
|
<Home className="h-5 w-5 text-white" />
|
|
</div>
|
|
<div className="bg-primary my-2 w-0.5 flex-1" />
|
|
</div>
|
|
<div className="pb-6">
|
|
<div className="mb-1 flex items-center gap-2">
|
|
<p className="font-semibold">Order Placed</p>
|
|
<Badge
|
|
variant="outline"
|
|
className="border-green-500/30 bg-green-50 text-green-700 dark:bg-green-950/30 dark:text-green-400"
|
|
>
|
|
Complete
|
|
</Badge>
|
|
</div>
|
|
<p className="text-muted-foreground text-sm">
|
|
Your order was placed on April 1, 2024
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="flex gap-4">
|
|
<div className="flex flex-col items-center">
|
|
<div className="bg-primary flex h-10 w-10 items-center justify-center rounded-full shadow-md">
|
|
<CheckCircle className="h-5 w-5 text-white" />
|
|
</div>
|
|
<div className="bg-primary my-2 w-0.5 flex-1" />
|
|
</div>
|
|
<div className="pb-6">
|
|
<div className="mb-1 flex items-center gap-2">
|
|
<p className="font-semibold">Order Confirmed</p>
|
|
<Badge
|
|
variant="outline"
|
|
className="border-green-500/30 bg-green-50 text-green-700 dark:bg-green-950/30 dark:text-green-400"
|
|
>
|
|
Complete
|
|
</Badge>
|
|
</div>
|
|
<p className="text-muted-foreground text-sm">
|
|
Your order has been confirmed on April 2, 2024
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="flex gap-4">
|
|
<div className="flex flex-col items-center">
|
|
<div className="bg-primary flex h-10 w-10 items-center justify-center rounded-full shadow-md">
|
|
<Archive className="h-5 w-5 text-white" />
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<div className="mb-1 flex items-center gap-2">
|
|
<p className="font-semibold">Order Shipped</p>
|
|
<Badge
|
|
variant="outline"
|
|
className="border-blue-500/30 bg-blue-50 text-blue-700 dark:bg-blue-950/30 dark:text-blue-400"
|
|
>
|
|
In Progress
|
|
</Badge>
|
|
</div>
|
|
<p className="text-muted-foreground text-sm">
|
|
Your order has been shipped on April 3, 2024
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Personal Information Card */}
|
|
<div className="break-inside-avoid">
|
|
<Card className="bg-card border p-6">
|
|
<div className="mb-6 border-b pb-4">
|
|
<h3 className="text-lg font-semibold tracking-tight">
|
|
Personal Information
|
|
</h3>
|
|
<p className="text-muted-foreground mt-1 text-sm">
|
|
Manage your personal details
|
|
</p>
|
|
</div>
|
|
<div className="space-y-4">
|
|
<div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
|
|
<div className="space-y-2">
|
|
<Label
|
|
htmlFor="firstName"
|
|
className="flex items-center gap-2"
|
|
>
|
|
<User className="text-muted-foreground h-4 w-4" />
|
|
First Name
|
|
</Label>
|
|
<Input
|
|
id="firstName"
|
|
placeholder="Emma"
|
|
defaultValue="Emma"
|
|
/>
|
|
</div>
|
|
<div className="space-y-2">
|
|
<Label htmlFor="lastName" className="flex items-center gap-2">
|
|
<User className="text-muted-foreground h-4 w-4" />
|
|
Last Name
|
|
</Label>
|
|
<Input
|
|
id="lastName"
|
|
placeholder="Roberts"
|
|
defaultValue="Roberts"
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div className="space-y-2">
|
|
<Label htmlFor="email" className="flex items-center gap-2">
|
|
<Mail className="text-muted-foreground h-4 w-4" />
|
|
Email Address
|
|
</Label>
|
|
<Input
|
|
id="email"
|
|
type="email"
|
|
placeholder="emma@mail.com"
|
|
defaultValue="emma@mail.com"
|
|
/>
|
|
</div>
|
|
<div className="grid grid-cols-2 gap-4">
|
|
<div className="space-y-2">
|
|
<Label htmlFor="phone" className="flex items-center gap-2">
|
|
<Phone className="text-muted-foreground h-4 w-4" />
|
|
Phone Number
|
|
</Label>
|
|
<Input
|
|
id="phone"
|
|
placeholder="+1 (555) 123-4567"
|
|
defaultValue="+1 (555) 123-4567"
|
|
/>
|
|
</div>
|
|
<div className="space-y-2">
|
|
<Label
|
|
htmlFor="profession"
|
|
className="flex items-center gap-2"
|
|
>
|
|
<Briefcase className="text-muted-foreground h-4 w-4" />
|
|
Profession
|
|
</Label>
|
|
<Select defaultValue="ui-ux">
|
|
<SelectTrigger id="profession">
|
|
<SelectValue placeholder="Select Profession" />
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
<SelectItem value="ui-ux">UI/UX Designer</SelectItem>
|
|
<SelectItem value="frontend">
|
|
Frontend Developer
|
|
</SelectItem>
|
|
<SelectItem value="backend">Backend Developer</SelectItem>
|
|
<SelectItem value="fullstack">
|
|
Fullstack Developer
|
|
</SelectItem>
|
|
</SelectContent>
|
|
</Select>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</Card>
|
|
</div>
|
|
|
|
{/* Testimonial Card */}
|
|
<div className="break-inside-avoid">
|
|
<Card className="group border-border/50 hover:border-border transition-all hover:shadow-lg">
|
|
<CardContent className="p-6">
|
|
<div className="mb-4 flex items-center gap-4">
|
|
<div className="relative shrink-0">
|
|
<img
|
|
src="https://images.unsplash.com/photo-1716662318479-a9c0f1cd1a0e?auto=format&fit=crop&q=80&w=400&h=400"
|
|
alt="Sarah Johnson profile"
|
|
className="border-border h-14 w-14 rounded-full border-2 object-cover transition-transform group-hover:scale-105"
|
|
/>
|
|
<div className="bg-background absolute -right-1 -bottom-1 rounded-full p-1 shadow-md">
|
|
<Quote className="text-primary h-3 w-3" />
|
|
</div>
|
|
</div>
|
|
<div className="min-w-0 flex-1 text-left">
|
|
<h3 className="font-semibold">Sarah Johnson</h3>
|
|
<p className="text-muted-foreground text-sm">
|
|
Product Designer
|
|
</p>
|
|
</div>
|
|
<div className="flex shrink-0 gap-0.5">
|
|
{Array.from({ length: 5 }).map((_, i) => (
|
|
<Star
|
|
key={i}
|
|
className="h-3.5 w-3.5 fill-yellow-400 text-yellow-400"
|
|
/>
|
|
))}
|
|
</div>
|
|
</div>
|
|
|
|
<blockquote className="text-muted-foreground text-left text-sm leading-relaxed">
|
|
"The attention to detail and component quality is
|
|
outstanding. These UI blocks have significantly accelerated our
|
|
design workflow."
|
|
</blockquote>
|
|
</CardContent>
|
|
</Card>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
)
|
|
}
|