3 changed files with 1 additions and 44 deletions
@ -1,30 +0,0 @@
@@ -1,30 +0,0 @@
|
||||
import { useSettings } from "@/state/settings"; |
||||
|
||||
import { Icon, Icons } from "./Icon"; |
||||
|
||||
export const colors = ["#ffffff", "#00ffff", "#ffff00"]; |
||||
export default function CaptionColorSelector({ color }: { color: string }) { |
||||
const { captionSettings, setCaptionColor } = useSettings(); |
||||
return ( |
||||
<div |
||||
className={`flex h-8 w-8 items-center justify-center rounded transition-[background-color,transform] duration-100 hover:bg-[#1c161b79] active:scale-110 ${ |
||||
color === captionSettings.style.color ? "bg-[#1C161B]" : "" |
||||
}`}
|
||||
onClick={() => setCaptionColor(color)} |
||||
> |
||||
<div |
||||
className="h-4 w-4 cursor-pointer appearance-none rounded-full" |
||||
style={{ |
||||
backgroundColor: color, |
||||
}} |
||||
/> |
||||
<Icon |
||||
className={[ |
||||
"absolute text-xs text-[#1C161B]", |
||||
color === captionSettings.style.color ? "" : "hidden", |
||||
].join(" ")} |
||||
icon={Icons.CHECKMARK} |
||||
/> |
||||
</div> |
||||
); |
||||
} |
Loading…
Reference in new issue