Customize toast design

This commit is contained in:
Sam Becker 2023-09-06 23:10:54 -05:00
parent b6093426e1
commit 1c2a5cc569
3 changed files with 16 additions and 6 deletions

View File

@ -6,6 +6,9 @@ import { Toaster } from 'sonner';
export default function ToasterClient() { export default function ToasterClient() {
const { theme } = useTheme(); const { theme } = useTheme();
return ( return (
<Toaster theme={theme as 'system' | 'light' | 'dark'} /> <Toaster
theme={theme as 'system' | 'light' | 'dark'}
className="!font-mono"
/>
); );
} }

View File

@ -8,6 +8,7 @@ import { cc } from '@/utility/css';
import { BiCopy } from 'react-icons/bi'; import { BiCopy } from 'react-icons/bi';
import { Photo } from '.'; import { Photo } from '.';
import { toast } from 'sonner'; import { toast } from 'sonner';
import { FiCheckSquare } from 'react-icons/fi';
export default function PhotoModal({ photo }: { photo: Photo }) { export default function PhotoModal({ photo }: { photo: Photo }) {
const shareUrl = absoluteRouteForPhoto(photo); const shareUrl = absoluteRouteForPhoto(photo);
@ -44,7 +45,10 @@ export default function PhotoModal({ photo }: { photo: Photo }) {
)} )}
onClick={() => { onClick={() => {
navigator.clipboard.writeText(shareUrl); navigator.clipboard.writeText(shareUrl);
toast.success('Link to photo copied'); toast(
'Link to photo copied',
{ icon: <FiCheckSquare size={16} /> },
);
}} }}
> >
<BiCopy size={18} /> <BiCopy size={18} />

View File

@ -4,7 +4,7 @@ import { useTransition } from 'react';
import { useRouter } from 'next/navigation'; import { useRouter } from 'next/navigation';
import { cc } from '@/utility/css'; import { cc } from '@/utility/css';
import SiteChecklistRow from './SiteChecklistRow'; import SiteChecklistRow from './SiteChecklistRow';
import { FiExternalLink } from 'react-icons/fi'; import { FiCheckSquare, FiExternalLink } from 'react-icons/fi';
import { BiCopy, BiRefresh } from 'react-icons/bi'; import { BiCopy, BiRefresh } from 'react-icons/bi';
import IconButton from '@/components/LoaderIcon'; import IconButton from '@/components/LoaderIcon';
import { toast } from 'sonner'; import { toast } from 'sonner';
@ -139,9 +139,12 @@ export default function SiteChecklistClient({
<IconButton <IconButton
onClick={() => { onClick={() => {
navigator.clipboard.writeText(secret); navigator.clipboard.writeText(secret);
toast.success('Secret copied to clipboard', { toast(
duration: 4000, 'Secret copied to clipboard', {
}); icon: <FiCheckSquare size={16} />,
duration: 4000,
},
);
}} }}
> >
<BiCopy size={16} /> <BiCopy size={16} />