forked from codinit-dev/codinit-dev
-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathCloseButton.tsx
More file actions
49 lines (45 loc) · 1.39 KB
/
Copy pathCloseButton.tsx
File metadata and controls
49 lines (45 loc) · 1.39 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
import React from 'react';
import { motion } from 'framer-motion';
import { classNames } from '~/utils/classNames';
interface CloseButtonProps {
onClick?: () => void;
className?: string;
size?: 'sm' | 'md' | 'lg';
}
/**
* CloseButton component
*
* A button with an X icon used for closing dialogs, modals, etc.
* The button has a transparent background and only shows a background on hover.
*/
export function CloseButton({ onClick, className, size = 'md' }: CloseButtonProps) {
const sizeClasses = {
sm: 'p-1',
md: 'p-2',
lg: 'p-3',
};
const iconSizeClasses = {
sm: 'w-3 h-3',
md: 'w-4 h-4',
lg: 'w-5 h-5',
};
return (
<motion.button
type="button"
onClick={onClick}
className={classNames(
'text-codinit-elements-textTertiary hover:text-codinit-elements-textSecondary dark:text-codinit-elements-textTertiary-dark dark:hover:text-codinit-elements-textSecondary-dark',
'rounded-lg hover:bg-codinit-elements-background-depth-2 dark:hover:bg-codinit-elements-background-depth-3',
'transition-colors duration-200',
'focus:outline-none focus:ring-2 focus:ring-blue-500/50',
sizeClasses[size],
className,
)}
whileHover={{ scale: 1.05 }}
whileTap={{ scale: 0.95 }}
aria-label="Close"
>
<div className={classNames('i-ph:x', iconSizeClasses[size])} />
</motion.button>
);
}