DamusLiveEvents.tsx (8290B)
1 import { MeshGradient2 } from "../effects/MeshGradient.2"; 2 import { Button } from "../ui/Button"; 3 import { FormattedMessage, useIntl } from "react-intl"; 4 import Link from "next/link"; 5 import { motion } from "framer-motion"; 6 import { RoundedContainerWithGradientBorder } from "../ui/RoundedContainerWithGradientBorder"; 7 import { cn } from "@/lib/utils"; 8 import Image from "next/image"; 9 import { MeshGradient3 } from "../effects/MeshGradient.3"; 10 11 const events = [ 12 { 13 picture: "/event-logos/pacific-bitcoin.webp", 14 linkUrl: "https://pacificbitcoin.com", 15 locationIntlString: "events.location.los_angeles_california", 16 name: "Pacific Bitcoin", 17 startDate: new Date("2022-10-05"), 18 endDate: new Date("2022-10-06"), 19 }, 20 { 21 picture: "/event-logos/bitcoin-amsterdam.webp", 22 linkUrl: "https://b.tc/conference/amsterdam", 23 locationIntlString: "events.location.amsterdam_netherlands", 24 name: "Bitcoin Amsterdam", 25 startDate: new Date("2023-10-12"), 26 endDate: new Date("2023-10-13"), 27 }, 28 { 29 picture: "/event-logos/indonesia-btc-conference.webp", 30 linkUrl: "https://indonesiabitcoinconference.com", 31 locationIntlString: "events.location.bali_indonesia", 32 name: "Indonesia Bitcoin Conference", 33 startDate: new Date("2023-10-26"), 34 endDate: new Date("2023-10-27"), 35 }, 36 { 37 picture: "/event-logos/nostrasia.webp", 38 linkUrl: "https://nostr.world", 39 locationIntlString: "events.location.tokyo_japan", 40 name: "Nostrasia", 41 startDate: new Date("2023-11-01"), 42 endDate: new Date("2023-11-03"), 43 }, 44 { 45 picture: "/event-logos/nostrville.webp", 46 linkUrl: "https://www.meetup.com/bitcoinpark/events/292518506/", 47 locationIntlString: "events.location.nashville_tennessee", 48 name: "Nostrville", 49 startDate: new Date("2023-11-09"), 50 endDate: new Date("2023-11-10"), 51 }, 52 { 53 picture: "https://cdn.jb55.com/s/4311bfac2b5367c9.png", 54 linkUrl: "https://unconfiscatable.com/", 55 locationIntlString: "events.location.las_vegas", 56 name: "Unconfiscatable", 57 startDate: new Date("2023-12-07"), 58 endDate: new Date("2023-12-09"), 59 }, 60 ] 61 62 export function DamusLiveEvents({ className }: { className?: string }) { 63 const intl = useIntl() 64 65 // This type of structure is necessary in this case to make strings get picked up by `npm run i18n` 66 const locationIntlStrings: Record<string, string> = { 67 "events.location.tokyo_japan": intl.formatMessage({ id: "events.location.tokyo_japan", defaultMessage: "Tokyo, Japan" }), 68 "events.location.bali_indonesia": intl.formatMessage({ id: "events.location.bali_indonesia", defaultMessage: "Bali, Indonesia" }), 69 "events.location.amsterdam_netherlands": intl.formatMessage({ id: "events.location.amsterdam_netherlands", defaultMessage: "Amsterdam, Netherlands" }), 70 "events.location.los_angeles_california": intl.formatMessage({ id: "events.location.los_angeles_california", defaultMessage: "Los Angeles, California" }), 71 "events.location.nashville_tennessee": intl.formatMessage({ id: "events.location.nashville_tennessee", defaultMessage: "Nashville, Tennessee" }), 72 "events.location.las_vegas": intl.formatMessage({ id: "events.location.las_vegas", defaultMessage: "Las Vegas, Nevada" }), 73 } 74 75 return (<> 76 <div className={cn("bg-black overflow-hidden relative min-h-screen", className)}> 77 <div className="container mx-auto px-6 pb-32 pt-12"> 78 <div className="flex flex-col items-center justify-center mt-32 lg:mt-16"> 79 <RoundedContainerWithGradientBorder className="w-full h-full max-w-6xl overflow-hidden" allItemsClassName="rounded-3xl"> 80 <div className="absolute pointer-events-none top-0 left-0"> 81 <MeshGradient3/> 82 </div> 83 <div className="flex flex-col lg:flex-row items-center justify-between p-4 md:p-6 px-4 md:px-12"> 84 <motion.h1 85 className="my-6 text-5xl sm:text-5xl md:text-8xl !leading-relaxed text-transparent bg-clip-text pb-6 font-semibold whitespace-pre-line text-center lg:text-left" 86 style={{ 87 backgroundImage: "linear-gradient(to right, #ffffff -100%, #ffffff -40%, #2D175B 100%)", 88 opacity: 0 89 }} 90 animate={{ 91 backgroundImage: "linear-gradient(to right, #ffffff 0%, #ffffff 40%, #2D175B 100%)", 92 transition: { duration: 3 }, 93 opacity: 1 94 }} 95 > 96 { intl.formatMessage({ id: "damus_live_events.headline", defaultMessage: "Damus.\nLive.\nEvents." }) } 97 </motion.h1> 98 {/* Vertical line */} 99 <div className="hidden lg:block w-px h-96 bg-white/10 backdrop-blur-sm"/> 100 <div className="flex flex-col gap-4"> 101 {events.map((item, index) => ( 102 <div key={index} className="w-full max-w-lg flex flex-col md:flex-row items-center justify-between h-full bg-white/20 rounded-xl p-6 gap-4"> 103 <div className="flex flex-col md:flex-row items-center gap-4"> 104 <div className="relative w-24 h-24 shrink-0 rounded-full overflow-hidden"> 105 <Image 106 src={item.picture} 107 className="object-cover" 108 fill 109 sizes="300px" 110 alt="" 111 /> 112 </div> 113 <div className="flex flex-col justify-center items-center md:items-start"> 114 <div className="text-white/70 text-center text-xs font-semibold"> 115 {intl.formatMessage({ id: "damus_live_events.date_range", defaultMessage: "{startDate} – {endDate}" }, { startDate: intl.formatDate(item.startDate, { month: "short", day: "numeric" }), endDate: intl.formatDate(item.endDate, { month: "short", day: "numeric" }) })} 116 </div> 117 <div className="text-xl text-white font-bold mt-1 text-center md:text-left"> 118 {item.name} 119 </div> 120 <div className="text-white/70 text-center text-xs font-normal mt-1"> 121 {locationIntlStrings[item.locationIntlString]} 122 </div> 123 </div> 124 </div> 125 <Link href={item.linkUrl} target="_blank" className="mt-4"> 126 <Button variant="secondary" className="flex items-center rounded-lg px-6"> 127 <span className="text-md whitespace-nowrap">{intl.formatMessage({ id: "damus_live_events.visit_button.label", defaultMessage: "Visit" })}</span> 128 </Button> 129 </Link> 130 </div> 131 ))} 132 </div> 133 </div> 134 </RoundedContainerWithGradientBorder> 135 </div> 136 </div> 137 </div> 138 </>) 139 }