index.tsx raw

   1  import { Dialog, DialogContent, DialogTrigger } from '@/components/ui/dialog'
   2  import { Drawer, DrawerContent, DrawerTrigger } from '@/components/ui/drawer'
   3  import { SMESH_PUBKEY } from '@/constants'
   4  import { useScreenSize } from '@/providers/ScreenSizeProvider'
   5  import { useState } from 'react'
   6  import Username from '../Username'
   7  
   8  export default function AboutInfoDialog({ children }: { children: React.ReactNode }) {
   9    const { isSmallScreen } = useScreenSize()
  10    const [open, setOpen] = useState(false)
  11  
  12    const content = (
  13      <>
  14        <div className="text-xl font-semibold">Smesh</div>
  15        <div className="text-muted-foreground">
  16          A user-friendly Nostr client for exploring relay feeds
  17        </div>
  18        <div>
  19          Made by <Username userId={SMESH_PUBKEY} className="inline-block text-primary" showAt />
  20        </div>
  21        <div>
  22          Source code:{' '}
  23          <a
  24            href="https://git.mleku.dev/mleku/smesh"
  25            target="_blank"
  26            rel="noreferrer"
  27            className="text-primary hover:underline"
  28          >
  29            Git
  30          </a>
  31          <div className="text-sm text-muted-foreground">
  32            If you like Smesh, please consider giving it a star ⭐
  33          </div>
  34        </div>
  35      </>
  36    )
  37  
  38    if (isSmallScreen) {
  39      return (
  40        <Drawer open={open} onOpenChange={setOpen}>
  41          <DrawerTrigger asChild>{children}</DrawerTrigger>
  42          <DrawerContent>
  43            <div className="p-4 space-y-4">{content}</div>
  44          </DrawerContent>
  45        </Drawer>
  46      )
  47    }
  48  
  49    return (
  50      <Dialog open={open} onOpenChange={setOpen}>
  51        <DialogTrigger asChild>{children}</DialogTrigger>
  52        <DialogContent>{content}</DialogContent>
  53      </Dialog>
  54    )
  55  }
  56