From 7c7b152d793625c656ad616d270bf075ca20a92e Mon Sep 17 00:00:00 2001 From: Tanishq Dubey Date: Mon, 9 Sep 2024 16:59:00 -0400 Subject: [PATCH] MVP complete --- app/components/ColorPalette.tsx | 59 +- app/components/ColorSchemeCard.tsx | 368 +++++++++-- app/components/HistoryPopup.tsx | 32 +- app/components/Settings.tsx | 137 +++- app/page.tsx | 96 ++- app/utils/colorSchemes.ts | 162 +++-- app/utils/exportFormats.ts | 87 +++ formatted_themes.json | 992 ++++++++++++++--------------- package-lock.json | 66 +- package.json | 2 + public/settings-icon-dark.svg | 7 + public/settings-icon-light.svg | 7 + themes_downloader.py | 4 +- 13 files changed, 1314 insertions(+), 705 deletions(-) create mode 100644 app/utils/exportFormats.ts create mode 100644 public/settings-icon-dark.svg create mode 100644 public/settings-icon-light.svg diff --git a/app/components/ColorPalette.tsx b/app/components/ColorPalette.tsx index 03e5408..418121f 100644 --- a/app/components/ColorPalette.tsx +++ b/app/components/ColorPalette.tsx @@ -7,7 +7,7 @@ interface ColorPaletteProps { const ColorPalette: React.FC = ({ colors, size = 'small' }) => { const [copiedColor, setCopiedColor] = useState(null); - const [hoveredColor, setHoveredColor] = useState(null); + const [hoveredColorId, setHoveredColorId] = useState(null); const textAreaRef = useRef(null); const handleColorClick = (color: string) => { @@ -39,33 +39,36 @@ const ColorPalette: React.FC = ({ colors, size = 'small' }) = return ( <>
- {colors.map((color, index) => ( -
handleColorClick(color)} - onMouseEnter={() => setHoveredColor(color)} - onMouseLeave={() => setHoveredColor(null)} - > - {size === 'small' && hoveredColor === color && ( -
-
- {color} -
- )} - {size === 'large' && ( -
- {color} -
- )} - {copiedColor === color && ( -
- Copied! -
- )} -
- ))} + {colors.map((color, index) => { + const colorId = `color-${index}-${color}`; + return ( +
handleColorClick(color)} + onMouseEnter={() => setHoveredColorId(colorId)} + onMouseLeave={() => setHoveredColorId(null)} + > + {size === 'small' && hoveredColorId === colorId && ( +
+
+ {color} +
+ )} + {size === 'large' && ( +
+ {color} +
+ )} + {copiedColor === color && ( +
+ Copied! +
+ )} +
+ ); + })}