-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
chore: Refactor color picker fab button component
- Loading branch information
1 parent
1932b93
commit d85a1e3
Showing
2 changed files
with
42 additions
and
42 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,67 +1,66 @@ | ||
| "use client"; | ||
| 'use client' | ||
|
|
||
| import { useColorStore } from "@/store/store"; | ||
| import { BaseColorTypes, ColorMode } from "@/types/app"; | ||
| import { cn } from "@ui/lib/utils"; | ||
| import { motion, AnimatePresence } from "framer-motion"; | ||
| import ColorPickerModal from "../palette/color-picker-modal"; | ||
| import { useState } from "react"; | ||
| import { colorHelper } from "@/lib/colorHelper"; | ||
| import { useColorStore } from '@/context/color-store-provider' | ||
| import { colorHelper } from '@/lib/colorHelper' | ||
| import { ColorMode, ColorOptions } from '@/types/app' | ||
| import { cn } from '@ui/lib/utils' | ||
| import { AnimatePresence, motion } from 'framer-motion' | ||
| import { useState } from 'react' | ||
|
|
||
| const ColorPickerFabButton = ({ type }: { type: BaseColorTypes }) => { | ||
| const { baseColors, updateBaseColor } = useColorStore(); | ||
| const [isOpen, setIsOpen] = useState(false); | ||
| const colorString = colorHelper.toColorMode(baseColors[type], ColorMode.HEX); | ||
| import ColorPickerModal from '../palette/color-picker-modal' | ||
|
|
||
| const ColorPickerFabButton = ({ type }: { type: keyof ColorOptions }) => { | ||
| const [isOpen, setIsOpen] = useState(false) | ||
| const { | ||
| setColor, | ||
| colors: { baseColors }, | ||
| } = useColorStore((s) => s) | ||
| const colorString = colorHelper.toColorMode(baseColors[type], ColorMode.HEX) | ||
| const shadowColor = { | ||
| primary: "hover:shadow-primary/30", | ||
| secondary: "hover:shadow-secondary/30", | ||
| accent: "hover:shadow-accent/30", | ||
| }; | ||
| accent: 'hover:shadow-accent/30', | ||
| primary: 'hover:shadow-primary/30', | ||
| secondary: 'hover:shadow-secondary/30', | ||
| } | ||
| return ( | ||
| <AnimatePresence mode="sync" initial={false}> | ||
| <AnimatePresence initial={false} mode="sync"> | ||
| <motion.button | ||
| className={cn( | ||
| "relative h-12 w-12 shadow-lg transition-shadow hover:shadow-xl", | ||
| shadowColor[type], | ||
| )} | ||
| onClick={() => setIsOpen(true)} | ||
| animate={{ borderRadius: 48, scale: 1 }} | ||
| className={cn('relative h-12 w-12 shadow-lg transition-shadow hover:shadow-xl', shadowColor[type])} | ||
| exit={{ borderRadius: 16, scale: 0.88 }} | ||
| initial={{ borderRadius: 16, scale: 0.88 }} | ||
| key={`color-picker-${type}`} | ||
| initial={{ scale: 0.88, borderRadius: 16 }} | ||
| animate={{ scale: 1, borderRadius: 48 }} | ||
| exit={{ scale: 0.88, borderRadius: 16 }} | ||
| whileHover={{ scale: 1.05 }} | ||
| whileTap={{ scale: 0.95 }} | ||
| layoutId={`color-picker-${type}-fab`} | ||
| onClick={() => setIsOpen(true)} | ||
| transition={{ | ||
| type: "spring", | ||
| bounce: 0.2, | ||
| type: 'spring', | ||
| }} | ||
| layoutId={`color-picker-${type}-fab`} | ||
| whileHover={{ scale: 1.05 }} | ||
| whileTap={{ scale: 0.95 }} | ||
| > | ||
| <motion.span | ||
| key={`color-picker-${type}-fill`} | ||
| className={cn( | ||
| "absolute inset-0 rounded-full transition-all", | ||
| "ring-2 ring-inset", | ||
| isOpen | ||
| ? "ring-transparent" | ||
| : "ring-white delay-500 duration-1000 dark:ring-white/40", | ||
| 'absolute inset-0 rounded-full transition-all', | ||
| 'ring-2 ring-inset', | ||
| isOpen ? 'ring-transparent' : 'ring-white delay-500 duration-1000 dark:ring-white/40' | ||
| )} | ||
| key={`color-picker-${type}-fill`} | ||
| style={{ backgroundColor: colorString }} | ||
| /> | ||
| <span className="sr-only">Click to change {type} color</span> | ||
| <motion.div layoutId={`color-picker-value-${type}-fab`} /> | ||
| </motion.button> | ||
| {isOpen && ( | ||
| <ColorPickerModal | ||
| onClose={() => setIsOpen(false)} | ||
| colorString={colorString} | ||
| onChange={updateBaseColor} | ||
| type={type} | ||
| onChange={(k, c) => setColor(k, colorHelper.toHex(c))} | ||
| onClose={() => setIsOpen(false)} | ||
| prefix="fab" | ||
| type={type} | ||
| /> | ||
| )} | ||
| </AnimatePresence> | ||
| ); | ||
| }; | ||
| ) | ||
| } | ||
|
|
||
| export default ColorPickerFabButton; | ||
| export default ColorPickerFabButton |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters