PurpleLayout.tsx (3275B)
1 import { motion } from "framer-motion"; 2 import { RoundedContainerWithGradientBorder } from "./ui/RoundedContainerWithGradientBorder"; 3 import { PurpleIcon } from "./icons/PurpleIcon"; 4 import { MeshGradient5 } from "./effects/MeshGradient.5"; 5 import Image from "next/image"; 6 import Link from "next/link"; 7 import { Button } from "./ui/Button"; 8 import { ArrowLeft, LifeBuoy } from "lucide-react"; 9 import { useIntl } from "react-intl"; 10 11 12 export function PurpleLayout({ children }: { children: React.ReactNode }) { 13 const intl = useIntl() 14 15 return ( 16 <div 17 className="bg-black overflow-hidden relative" 18 > 19 <div className="absolute z-0 w-full h-full pointer-events-none"> 20 <Image src="/stars-bg.webp" fill className="absolute top-0 left-0 object-cover lg:object-contain object-center w-full h-full" alt="" aria-hidden="true" /> 21 <MeshGradient5 className="translate-y-1/4 translate-x-32" /> 22 </div> 23 <div className="container z-10 mx-auto px-6 pt-12 h-full min-h-screen flex flex-col justify-center"> 24 <div className="flex flex-col items-center justify-center h-full grow"> 25 <RoundedContainerWithGradientBorder className="w-full max-w-md h-full mb-4" innerContainerClassName="w-full"> 26 <div className="flex gap-x-4 items-center mb-12 mx-auto justify-center"> 27 <PurpleIcon className="w-16 h-16" /> 28 <motion.h2 className="text-6xl text-center text-transparent bg-clip-text bg-gradient-to-r from-damuspink-500 from-30% to-damuspink-600 to-100% font-semibold break-keep tracking-tight"> 29 Purple 30 </motion.h2> 31 </div> 32 {children} 33 </RoundedContainerWithGradientBorder> 34 <Link href="/purple" className="w-full md:w-auto opacity-70 hover:opacity-100 transition mb-4"> 35 <Button variant="link" className="w-full text-sm"> 36 <ArrowLeft className="text-damuspink-600 mr-2" /> 37 {intl.formatMessage({ id: "purple.account.back", defaultMessage: "Go back" })} 38 </Button> 39 </Link> 40 <div className="flex flex-col rounded-xl px-4 text-purple-200 w-full mt-4 gap-1"> 41 <div className="flex justify-center"> 42 <LifeBuoy className="mr-2" /> 43 {intl.formatMessage({ id: "purple.account.contact-support", defaultMessage: "Contact support" })} 44 </div> 45 <div className="flex justify-center"> 46 <Link href="mailto:support@damus.io" className="w-full md:w-auto opacity-70 hover:opacity-100 transition text-sm"> 47 <Button variant="link" className="w-full text-sm"> 48 {intl.formatMessage({ id: "purple.account.email-support", defaultMessage: "Via email" })} 49 </Button> 50 </Link> 51 <Link href="nostr:npub18m76awca3y37hkvuneavuw6pjj4525fw90necxmadrvjg0sdy6qsngq955" className="w-full md:w-auto opacity-70 hover:opacity-100 transition text-sm"> 52 <Button variant="link" className="w-full text-sm"> 53 {intl.formatMessage({ id: "purple.account.nostr-support", defaultMessage: "Via Nostr" })} 54 </Button> 55 </Link> 56 </div> 57 </div> 58 </div> 59 </div> 60 </div> 61 ) 62 }