timetable-app

Unnamed repository; edit this file 'description' to name the repository.
Log | Files | Refs | README | LICENSE

index.tsx (962B)

      1 import { useClipboard } from '@mantine/hooks';
      2 import ContentCopyIcon from '@mui/icons-material/ContentCopy';
      3 import DoneIcon from '@mui/icons-material/Done';
      4 import { Button } from '@mui/material';
      5 
      6 import type { ButtonProps } from '@mui/material';
      7 import type { ReactNode } from 'react';
      8 
      9 type Props = {
     10 	valueToCopy: unknown;
     11 	doneStartIcon?: ReactNode;
     12 	doneColor?: ButtonProps['color'];
     13 } & Omit<ButtonProps, 'onClick'>;
     14 
     15 export default function CopyToClipboardButton({
     16 	valueToCopy,
     17 	startIcon = <ContentCopyIcon />,
     18 	doneStartIcon = <DoneIcon />,
     19 	doneColor = 'success',
     20 	...rest
     21 }: Props) {
     22 	const { copy, copied } = useClipboard();
     23 
     24 	return (
     25 		<>
     26 			{copied ? (
     27 				<Button {...rest} color={doneColor} startIcon={doneStartIcon}>
     28 					コピーしました！
     29 				</Button>
     30 			) : (
     31 				<Button
     32 					{...rest}
     33 					startIcon={startIcon}
     34 					onClick={() => copy(valueToCopy)}
     35 				>
     36 					クリップボードにコピー
     37 				</Button>
     38 			)}
     39 		</>
     40 	);
     41 }