207 lines
11 KiB
TypeScript
207 lines
11 KiB
TypeScript
"use client"
|
|
|
|
import { PublicProfileRead } from "@/lib/types" // We'll need to define this or import generic
|
|
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
|
|
import { Badge } from "@/components/ui/badge"
|
|
import { Button } from "@/components/ui/button"
|
|
import { Card } from "@/components/ui/card"
|
|
import { Separator } from "@/components/ui/separator"
|
|
import { MapPin, CalendarDays, Ticket, Music2, Share2 } from "lucide-react"
|
|
import Link from "next/link"
|
|
|
|
// Temporary type definition until we sync shared types
|
|
interface HeadlinerBand {
|
|
name: string
|
|
slug: string
|
|
tier: string
|
|
logo_url?: string | null
|
|
}
|
|
|
|
interface SocialHandles {
|
|
bluesky?: string | null
|
|
mastodon?: string | null
|
|
instagram?: string | null
|
|
}
|
|
|
|
interface ProfilePosterProps {
|
|
profile: any // Typing loosely first to get the visual structure up
|
|
}
|
|
|
|
export function ProfilePoster({ profile }: ProfilePosterProps) {
|
|
const { username, display_name, bio, avatar, avatar_bg_color, location, social_handles, headliners, supporting_acts, stats, joined_at } = profile
|
|
|
|
// Poster Date (Joined At)
|
|
const memberSince = new Date(joined_at).toLocaleDateString('en-US', { month: 'long', year: 'numeric' })
|
|
|
|
return (
|
|
<div className="max-w-4xl mx-auto space-y-8">
|
|
{/* THE POSTER */}
|
|
<div className="relative overflow-hidden rounded-xl border bg-card text-card-foreground shadow-2xl">
|
|
{/* Background Texture/Gradient */}
|
|
<div className="absolute inset-0 z-0 bg-gradient-to-br from-background via-background to-primary/5 opacity-50" />
|
|
<div className="absolute inset-0 z-0 bg-[url('/noise.png')] opacity-[0.03] mix-blend-overlay" />
|
|
|
|
<div className="relative z-10 p-8 md:p-12 flex flex-col md:flex-row gap-12 items-start md:items-center">
|
|
|
|
{/* LEFT: The "Lineup" (Typography Hierarchy) */}
|
|
<div className="flex-1 text-center md:text-left space-y-8 w-full">
|
|
|
|
{/* Top Billing: User Name */}
|
|
<div className="space-y-2">
|
|
<h1 className="text-5xl md:text-7xl font-black tracking-tighter uppercase leading-none bg-clip-text text-transparent bg-gradient-to-b from-foreground to-foreground/70 filter drop-shadow-sm">
|
|
{display_name}
|
|
</h1>
|
|
<p className="text-xl md:text-2xl text-muted-foreground font-light tracking-widest uppercase">
|
|
Presents
|
|
</p>
|
|
</div>
|
|
|
|
<Separator className="bg-primary/20" />
|
|
|
|
{/* Headliners */}
|
|
{headliners && headliners.length > 0 ? (
|
|
<div className="flex flex-wrap justify-center md:justify-start gap-x-6 gap-y-2">
|
|
{headliners.map((band: HeadlinerBand) => (
|
|
<Link key={band.slug} href={`/${band.slug}`} className="hover:scale-105 transition-transform">
|
|
<span className="text-3xl md:text-5xl font-bold tracking-tight text-primary hover:text-primary/80 uppercase">
|
|
{band.name}
|
|
</span>
|
|
</Link>
|
|
))}
|
|
</div>
|
|
) : (
|
|
<div className="text-3xl font-bold text-muted-foreground/30 uppercase opacity-50 py-4">
|
|
No Headliners Announced
|
|
</div>
|
|
)}
|
|
|
|
{/* Supporting Acts */}
|
|
{supporting_acts && supporting_acts.length > 0 && (
|
|
<div className="flex flex-wrap justify-center md:justify-start gap-x-4 gap-y-1 pt-4">
|
|
{supporting_acts.map((band: HeadlinerBand) => (
|
|
<Link key={band.slug} href={`/${band.slug}`}>
|
|
<span className="text-lg md:text-2xl font-medium text-foreground/80 hover:text-foreground uppercase">
|
|
{band.name}
|
|
</span>
|
|
</Link>
|
|
))}
|
|
</div>
|
|
)}
|
|
|
|
{/* Location / Date Line */}
|
|
<div className="flex flex-wrap items-center justify-center md:justify-start gap-4 text-sm font-mono text-muted-foreground pt-6 uppercase tracking-wider">
|
|
{location && (
|
|
<span className="flex items-center gap-1">
|
|
<MapPin className="w-4 h-4" /> {location}
|
|
</span>
|
|
)}
|
|
<span className="flex items-center gap-1">
|
|
<CalendarDays className="w-4 h-4" /> Est. {memberSince}
|
|
</span>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
{/* RIGHT: The "Pass" (Avatar) */}
|
|
<div className="flex-shrink-0 mx-auto md:mx-0">
|
|
<div className="relative group perspective-1000">
|
|
{/* Lanyard String Mockup */}
|
|
<div className="absolute -top-32 left-1/2 -translate-x-1/2 w-4 h-32 bg-primary/20 z-0 hidden md:block" />
|
|
|
|
<div className="relative w-64 h-80 bg-black rounded-xl border-4 border-primary/20 shadow-2xl overflow-hidden flex flex-col transform transition-transform group-hover:rotate-y-12 duration-500">
|
|
{/* Pass Header */}
|
|
<div className="h-12 bg-primary/90 flex items-center justify-center">
|
|
<span className="font-bold text-primary-foreground tracking-[0.2em] text-xs">ALL ACCESS</span>
|
|
</div>
|
|
|
|
{/* Pass Image */}
|
|
<div className="flex-1 relative bg-muted">
|
|
{avatar ? (
|
|
<img src={avatar} alt={username} className="w-full h-full object-cover" />
|
|
) : (
|
|
<div className="w-full h-full flex items-center justify-center bg-zinc-900 text-6xl font-bold text-zinc-700" style={{ backgroundColor: avatar_bg_color || '#333' }}>
|
|
{profile.avatar_text || username.substring(0, 2).toUpperCase()}
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
{/* Pass Footer */}
|
|
<div className="h-16 bg-white/5 backdrop-blur-md p-2 flex flex-col items-center justify-center gap-1">
|
|
<span className="font-mono text-xs text-muted-foreground">@{username}</span>
|
|
<div className="flex gap-2 text-xs opacity-50">
|
|
<div className="w-16 h-4 bg-foreground/20 rounded-sm" /> {/* Barcode mockup */}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
{/* LOWER BIO SECTION */}
|
|
<div className="grid grid-cols-1 md:grid-cols-3 gap-8">
|
|
{/* Stats Card */}
|
|
<Card className="p-6 space-y-4">
|
|
<h3 className="font-mono text-sm text-muted-foreground uppercase">Tour Stats</h3>
|
|
<div className="space-y-4">
|
|
<div className="flex items-center justify-between">
|
|
<span className="flex items-center gap-2"><Ticket className="w-4 h-4" /> Shows</span>
|
|
<span className="font-bold text-xl">{stats.shows_attended}</span>
|
|
</div>
|
|
<Separator />
|
|
<div className="flex items-center justify-between">
|
|
<span className="flex items-center gap-2"><MapPin className="w-4 h-4" /> Venues</span>
|
|
<span className="font-bold text-xl">{stats.venues_visited}</span>
|
|
</div>
|
|
<Separator />
|
|
<div className="flex items-center justify-between">
|
|
<span className="flex items-center gap-2"><Music2 className="w-4 h-4" /> Reviews</span>
|
|
<span className="font-bold text-xl">{stats.reviews_written}</span>
|
|
</div>
|
|
</div>
|
|
</Card>
|
|
|
|
{/* Bio & Socials */}
|
|
<Card className="md:col-span-2 p-6 flex flex-col justify-between gap-6">
|
|
<div className="space-y-4">
|
|
<h3 className="font-mono text-sm text-muted-foreground uppercase">About</h3>
|
|
<p className="text-lg leading-relaxed whitespace-pre-wrap">
|
|
{bio || "This fan hasn't written a bio yet. They're probably at a show."}
|
|
</p>
|
|
</div>
|
|
|
|
<div className="flex flex-wrap gap-3">
|
|
{social_handles.bluesky && (
|
|
<Button variant="outline" size="sm" asChild>
|
|
<a href={`https://bsky.app/profile/${social_handles.bluesky}`} target="_blank" rel="noopener noreferrer">
|
|
BlueSky
|
|
</a>
|
|
</Button>
|
|
)}
|
|
{social_handles.mastodon && (
|
|
<Button variant="outline" size="sm" asChild>
|
|
<a href={social_handles.mastodon} target="_blank" rel="noopener noreferrer">
|
|
Mastodon
|
|
</a>
|
|
</Button>
|
|
)}
|
|
{social_handles.instagram && (
|
|
<Button variant="outline" size="sm" asChild>
|
|
<a href={`https://instagram.com/${social_handles.instagram}`} target="_blank" rel="noopener noreferrer">
|
|
Instagram
|
|
</a>
|
|
</Button>
|
|
)}
|
|
|
|
<div className="flex-1" />
|
|
|
|
<Button variant="ghost" size="sm">
|
|
<Share2 className="w-4 h-4 mr-2" /> Share Profile
|
|
</Button>
|
|
</div>
|
|
</Card>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|