damus.io

damus.io website
git clone git://jb55.com/damus.io
Log | Files | Refs | README | LICENSE

TopMenu.tsx (3780B)

      1 import * as React from "react"
      2 import Link from "next/link"
      3 import { cn } from "@/lib/utils"
      4 import * as NavigationMenu from '@radix-ui/react-navigation-menu';
      5 import { Zap } from "lucide-react"
      6 import { Button } from "../ui/Button";
      7 import { DAMUS_APP_STORE_URL, DAMUS_MERCH_STORE_URL } from "@/lib/constants";
      8 import { useIntl } from "react-intl";
      9 import { motion } from "framer-motion";
     10 
     11 let regularNavItems: { nameIntlId: string, href: string, target?: string }[] = [
     12     { nameIntlId: "topbar.purple", href: "/purple" },
     13     { nameIntlId: "topbar.store", href: DAMUS_MERCH_STORE_URL, target: "_blank" },
     14     { nameIntlId: "topbar.events", href: "/#events" },
     15     { nameIntlId: "topbar.team", href: "/#team" },
     16     { nameIntlId: "topbar.contribute", href: "/#contribute" },
     17 ]
     18 
     19 const ENABLE_FULL_MENU = true
     20 
     21 export function TopMenu({ className }: { className?: string }) {
     22     let navItemDefaultStyles = "hover:opacity-80 transition-opacity duration-200 ease-in-out"
     23     const intl = useIntl()
     24 
     25     // This is needed to allow intl commands to extract the strings
     26     const topbarItemNameIntl: Record<string, string> = {
     27         "topbar.purple": intl.formatMessage({ id: "topbar.purple", defaultMessage: "Purple" }),
     28         "topbar.store": intl.formatMessage({ id: "topbar.store", defaultMessage: "Store" }),
     29         "topbar.events": intl.formatMessage({ id: "topbar.events", defaultMessage: "Events" }),
     30         "topbar.team": intl.formatMessage({ id: "topbar.team", defaultMessage: "Our Team" }),
     31         "topbar.contribute": intl.formatMessage({ id: "topbar.contribute", defaultMessage: "Contribute" }),
     32     }
     33 
     34     return (
     35         <motion.div
     36             style={{ opacity: 0 }}
     37             animate={{ opacity: 1, transition: { delay: 1.5, duration: 1 } }}
     38         >
     39             <NavigationMenu.Root className={cn("flex justify-between items-center", className)}>
     40                 <div>
     41                     <NavigationMenu.Link className={cn(navItemDefaultStyles, "text-white")} href="/">
     42                         <img src="/logo.png" className="h-12" alt={ intl.formatMessage({ id: "topbar.logo_alt_text", defaultMessage: "Damus logo" }) }/>
     43                     </NavigationMenu.Link>
     44                 </div>
     45                 <NavigationMenu.List className={cn("hidden lg:inline-flex space-x-6 items-center justify-self-center")}>
     46                     {ENABLE_FULL_MENU && (<>
     47                         {regularNavItems.map((item, index) => (
     48                             <NavigationMenu.Item key={index}>
     49                                 <NavigationMenu.Link className={cn(navItemDefaultStyles, "text-white")} href={item.href} target={item.target}>
     50                                     {topbarItemNameIntl[item.nameIntlId]}
     51                                 </NavigationMenu.Link>
     52                             </NavigationMenu.Item>
     53                         ))}
     54                         <NavigationMenu.Item>
     55                             <NavigationMenu.Link className={cn("text-yellow-500 flex items-center")} href="lightning:lnurl1dp68gurn8ghj7um9dej8xct5wvhxcmmv9uh8wetvdskkkmn0wahz7mrww4excup0v3sk6atnjmrn5a" target="_blank">
     56                                 <Zap className="h-4"/>
     57                                 { intl.formatMessage({ id: "topbar.zap_us", defaultMessage: "Zap Us" }) }
     58                             </NavigationMenu.Link>
     59                         </NavigationMenu.Item>
     60                     </>)}
     61                 </NavigationMenu.List>
     62                 <Link href={DAMUS_APP_STORE_URL} target="_blank">
     63                     <Button variant="accent">
     64                         { intl.formatMessage({ id: "topbar.download", defaultMessage: "Download" }) }
     65                     </Button>
     66                 </Link>
     67             </NavigationMenu.Root>
     68         </motion.div>
     69     )
     70 }