64 lines
1.7 KiB
TypeScript
64 lines
1.7 KiB
TypeScript
'use client';
|
|
|
|
import Modal from '@/components/Modal';
|
|
import { TbPhotoShare } from 'react-icons/tb';
|
|
import { clsx } from 'clsx/lite';
|
|
import { BiCopy } from 'react-icons/bi';
|
|
import { ReactNode } from 'react';
|
|
import { shortenUrl } from '@/utility/url';
|
|
import { toastSuccess } from '@/toast';
|
|
|
|
export default function ShareModal({
|
|
title = 'Share',
|
|
pathShare,
|
|
pathClose,
|
|
children,
|
|
}: {
|
|
title?: string
|
|
pathShare: string
|
|
pathClose: string
|
|
children: ReactNode
|
|
}) {
|
|
return (
|
|
<Modal onClosePath={pathClose}>
|
|
<div className="space-y-3 md:space-y-4 w-full">
|
|
<div className={clsx(
|
|
'flex items-center gap-x-3',
|
|
'text-2xl leading-snug',
|
|
)}>
|
|
<TbPhotoShare size={22} className="hidden xs:block" />
|
|
<div className="flex-grow">
|
|
{title}
|
|
</div>
|
|
</div>
|
|
{children}
|
|
<div className={clsx(
|
|
'rounded-md',
|
|
'w-full overflow-hidden',
|
|
'flex items-center justify-stretch',
|
|
'border border-gray-200 dark:border-gray-800',
|
|
)}>
|
|
<div className="truncate p-2 w-full">
|
|
{shortenUrl(pathShare)}
|
|
</div>
|
|
<div
|
|
className={clsx(
|
|
'p-3 border-l',
|
|
'border-gray-200 bg-gray-100 active:bg-gray-200',
|
|
// eslint-disable-next-line max-len
|
|
'dark:border-gray-800 dark:bg-gray-900 dark:hover:bg-gray-800/75 dark:active:bg-gray-900',
|
|
'cursor-pointer',
|
|
)}
|
|
onClick={() => {
|
|
navigator.clipboard.writeText(pathShare);
|
|
toastSuccess('Link to photo copied');
|
|
}}
|
|
>
|
|
<BiCopy size={18} />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</Modal>
|
|
);
|
|
};
|