You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
25 lines
811 B
25 lines
811 B
import { Icon, Icons } from "components/Icon"; |
|
|
|
export interface IconPatchProps { |
|
active?: boolean; |
|
onClick?: () => void; |
|
clickable?: boolean; |
|
className?: string; |
|
icon: Icons; |
|
} |
|
|
|
export function IconPatch(props: IconPatchProps) { |
|
return ( |
|
<div className={props.className || undefined} onClick={props.onClick}> |
|
<div |
|
className={`bg-denim-300 flex h-12 w-12 items-center justify-center rounded-full border-2 border-transparent transition-[color,transform,border-color] duration-75 ${ |
|
props.clickable |
|
? "hover:bg-denim-400 m-2 cursor-pointer hover:scale-110 hover:text-white active:scale-125" |
|
: "" |
|
} ${props.active ? "text-bink-600 border-bink-600 bg-bink-100" : ""}`} |
|
> |
|
<Icon icon={props.icon} /> |
|
</div> |
|
</div> |
|
); |
|
}
|
|
|