| 50 | } |
| 51 | |
| 52 | export const ShareModal: FC<ShareData> = ({ url, text, title }) => { |
| 53 | return ( |
| 54 | <div className="relative grid grid-cols-[200px_auto] gap-5"> |
| 55 | <div className="qrcode inline-block size-[200px] bg-gray-200/80 dark:bg-zinc-800/90"> |
| 56 | <QRCodeSVG |
| 57 | value={url} |
| 58 | className="aspect-square w-[200px]" |
| 59 | height={200} |
| 60 | width={200} |
| 61 | /> |
| 62 | </div> |
| 63 | <div className="share-options flex flex-col gap-2"> |
| 64 | 分享到... |
| 65 | <ul className="w-[200px] flex-col gap-2 [&>li]:flex [&>li]:items-center [&>li]:space-x-2"> |
| 66 | {shareList.map(({ name, icon, onClick }) => ( |
| 67 | <li |
| 68 | key={name} |
| 69 | className="flex cursor-pointer items-center space-x-2 rounded-md px-3 py-2 text-lg transition-colors hover:bg-gray-100 dark:hover:bg-gray-800" |
| 70 | aria-label={`Share to ${name}`} |
| 71 | role="button" |
| 72 | onClick={() => onClick({ url, text, title })} |
| 73 | > |
| 74 | {icon} |
| 75 | <span>{name}</span> |
| 76 | </li> |
| 77 | ))} |
| 78 | </ul> |
| 79 | </div> |
| 80 | </div> |
| 81 | ) |
| 82 | } |