dubey/TerminalTinder
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Mostly ready for release

Browse Source
This commit is contained in:
Tanishq Dubey 2024-09-09 15:31:19 -04:00
parent 5bbfa98ed3
commit 7851d2c0f6
11 changed files with 121 additions and 73 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
app/components/ColorSchemeCard.tsx
View File

@ -10,9 +10,10 @@ interface ColorSchemeCardProps {
onLike: () => void;
onDislike: () => void;
index: number;
isDarkMode: boolean;
}
const ColorSchemeCard: React.FC<ColorSchemeCardProps> = ({ scheme, onLike, onDislike, index }) => {
const ColorSchemeCard: React.FC<ColorSchemeCardProps> = ({ scheme, onLike, onDislike, index, isDarkMode }) => {
const [overlayColor, setOverlayColor] = useState('rgba(0, 0, 0, 0)');
const controls = useAnimation();
@ -97,7 +98,7 @@ fetchData().then(data => console.log(data)); `;
className="text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200 transition-colors duration-300"
onClick={handleDownload}
>
<Image src="/download-icon.svg" alt="Download" width={24} height={24} />
<Image src={isDarkMode ? "/download-icon-dark.svg" : "/download-icon-light.svg"} alt="Download" width={24} height={24} />
</button>
</div>
<div className="bg-gray-100 dark:bg-gray-700 rounded-md mb-4 flex-grow overflow-hidden z-10 shadow-md">
@ -144,13 +145,13 @@ fetchData().then(data => console.log(data)); `;
className="bg-red-500 text-white p-3 rounded-full shadow-lg hover:bg-red-600 transition-colors duration-300"
onClick={handleDislike}
>
<Image src="/cross-icon.svg" alt="Dislike" width={28} height={28} />
<Image src={isDarkMode ? "/cross-icon-dark.svg" : "/cross-icon-light.svg"} alt="Dislike" width={28} height={28} />
</button>
<button
className="bg-green-500 text-white p-3 rounded-full shadow-lg hover:bg-green-600 transition-colors duration-300"
onClick={handleLike}
>
<Image src="/heart-icon.svg" alt="Like" width={28} height={28} />
<Image src={isDarkMode ? "/heart-icon-dark.svg" : "/heart-icon-light.svg"} alt="Like" width={28} height={28} />
</button>
</div>
</div>

1
app/globals.css
View File

@ -18,6 +18,7 @@ body {
color: var(--foreground);
background: var(--background);
font-family: var(--font-geist-sans), Arial, sans-serif;
overflow: hidden;
}
@layer utilities {

54
app/page.tsx
View File

@ -1,16 +1,14 @@
'use client';
import React, { useState, useEffect } from 'react';
import Image from 'next/image';
import ColorSchemeCard from "./components/ColorSchemeCard";
import SettingsIcon from "./components/SettingsIcon";
import Settings from "./components/Settings";
import { ColorScheme, knownSchemes, generateRandomScheme, generateSchemeFromGeneticAlgorithm } from './utils/colorSchemes';
import { AnimatePresence } from 'framer-motion';
export default function Home() {
const [schemes, setSchemes] = useState<ColorScheme[]>([]);
const [isDarkMode, setIsDarkMode] = useState(false);
const [isSettingsOpen, setIsSettingsOpen] = useState(false);
const [likedSchemes, setLikedSchemes] = useState<ColorScheme[]>([]);
const [dislikedSchemes, setDislikedSchemes] = useState<ColorScheme[]>([]);
@ -40,20 +38,28 @@ export default function Home() {
}, [dislikedSchemes]);
const generateNewSchemes = (count: number) => {
const knownCount = Math.floor(count / 2);
const generatedCount = count - knownCount;
const newSchemes = Array(count).fill(null).map(() => {
const schemeType = Math.random();
if (schemeType < 0.25) {
// 25% chance of known scheme
return knownSchemes[Math.floor(Math.random() * knownSchemes.length)];
} else if (schemeType < 0.5) {
// 25% chance of random scheme
return generateRandomScheme();
} else if (likedSchemes.length > 2 && dislikedSchemes.length > 2) {
// 50% chance of genetic scheme if there are more than 2 liked and disliked schemes
return generateSchemeFromGeneticAlgorithm(likedSchemes, dislikedSchemes);
} else {
// 30% known, 20% random for other cases
if (Math.random() < 0.3) {
return generateRandomScheme();
} else {
return knownSchemes[Math.floor(Math.random() * knownSchemes.length)];
}
}
});
const newSchemes = [
...knownSchemes.sort(() => 0.5 - Math.random()).slice(0, knownCount),
...Array(generatedCount).fill(null).map(() =>
likedSchemes.length > 0 ? generateSchemeFromGeneticAlgorithm(likedSchemes, dislikedSchemes) : generateRandomScheme()
)
];
// Shuffle the new schemes
const shuffledSchemes = newSchemes.sort(() => 0.5 - Math.random());
setSchemes(prevSchemes => [...prevSchemes, ...shuffledSchemes]);
setSchemes(prevSchemes => [...prevSchemes, ...newSchemes]);
};
const handleLike = (scheme: ColorScheme) => {
@ -81,12 +87,11 @@ export default function Home() {
};
return (
<div className="min-h-screen p-8 pb-20 gap-16 sm:p-20 font-[family-name:var(--font-geist-sans)] dark:bg-gray-900 dark:text-white transition-colors duration-300">
<header className="flex justify-between items-center mb-8">
<h1 className="text-2xl font-bold">Terminal Color Scheme Generator</h1>
<SettingsIcon onClick={() => setIsSettingsOpen(true)} />
<div className="h-screen w-screen overflow-hidden p-8 font-[family-name:var(--font-geist-sans)] dark:bg-gray-900 dark:text-white transition-colors duration-300">
<header className="flex items-center mb-8">
<Image src="/app-icon.svg" alt="App Icon" width={40} height={40} />
</header>
<main className="flex flex-col items-center justify-center h-[calc(100vh-200px)] relative">
<main className="flex flex-col items-center justify-center h-[calc(100vh-100px)]">
<AnimatePresence>
{schemes.slice(0, 3).map((scheme, index) => (
<ColorSchemeCard
@ -95,16 +100,11 @@ export default function Home() {
onLike={() => handleLike(scheme)}
onDislike={() => handleDislike(scheme)}
index={index}
isDarkMode={isDarkMode}
/>
))}
</AnimatePresence>
</main>
<Settings
isDarkMode={isDarkMode}
onToggleDarkMode={toggleDarkMode}
isOpen={isSettingsOpen}
onClose={() => setIsSettingsOpen(false)}
/>
</div>
);
}

45
app/utils/colorSchemes.ts
View File

@ -30,7 +30,7 @@ function generateCreativeName(): string {
function generateRandomScheme(): ColorScheme {
let x = {
name: generateCreativeName(),
name: generateCreativeName() + "rand",
colors: {
primary: { background: generateRandomColor(), foreground: generateRandomColor() },
normal: {
@ -58,45 +58,6 @@ function crossTitles(title1: string, title2: string): string {
return `${firstWord} ${secondWord}`;
}
function crossSchemes(scheme1: ColorScheme, scheme2: ColorScheme): ColorScheme {
const crossColor = (color1: Color, color2: Color): Color => {
const r = Math.round((parseInt(color1.slice(1, 3), 16) + parseInt(color2.slice(1, 3), 16)) / 2);
const g = Math.round((parseInt(color1.slice(3, 5), 16) + parseInt(color2.slice(3, 5), 16)) / 2);
const b = Math.round((parseInt(color1.slice(5, 7), 16) + parseInt(color2.slice(5, 7), 16)) / 2);
return `#${r.toString(16).padStart(2, '0')}${g.toString(16).padStart(2, '0')}${b.toString(16).padStart(2, '0')}`;
};
return {
name: crossTitles(scheme1.name, scheme2.name),
colors: {
primary: {
background: crossColor(scheme1.colors.primary.background, scheme2.colors.primary.background),
foreground: crossColor(scheme1.colors.primary.foreground, scheme2.colors.primary.foreground)
},
normal: {
black: crossColor(scheme1.colors.normal.black, scheme2.colors.normal.black),
red: crossColor(scheme1.colors.normal.red, scheme2.colors.normal.red),
green: crossColor(scheme1.colors.normal.green, scheme2.colors.normal.green),
yellow: crossColor(scheme1.colors.normal.yellow, scheme2.colors.normal.yellow),
blue: crossColor(scheme1.colors.normal.blue, scheme2.colors.normal.blue),
magenta: crossColor(scheme1.colors.normal.magenta, scheme2.colors.normal.magenta),
cyan: crossColor(scheme1.colors.normal.cyan, scheme2.colors.normal.cyan),
white: crossColor(scheme1.colors.normal.white, scheme2.colors.normal.white)
},
bright: {
black: crossColor(scheme1.colors.bright.black, scheme2.colors.bright.black),
red: crossColor(scheme1.colors.bright.red, scheme2.colors.bright.red),
green: crossColor(scheme1.colors.bright.green, scheme2.colors.bright.green),
yellow: crossColor(scheme1.colors.bright.yellow, scheme2.colors.bright.yellow),
blue: crossColor(scheme1.colors.bright.blue, scheme2.colors.bright.blue),
magenta: crossColor(scheme1.colors.bright.magenta, scheme2.colors.bright.magenta),
cyan: crossColor(scheme1.colors.bright.cyan, scheme2.colors.bright.cyan),
white: crossColor(scheme1.colors.bright.white, scheme2.colors.bright.white)
}
}
};
}
function mutateColor(color: Color): Color {
const r = parseInt(color.slice(1, 3), 16);
const g = parseInt(color.slice(3, 5), 16);
@ -142,9 +103,9 @@ function generateSchemeFromGeneticAlgorithm(likedSchemes: ColorScheme[], dislike
});
});
newScheme.name = generateCreativeName();
newScheme.name = generateCreativeName() + "gen";
return newScheme;
}
export type { ColorScheme };
export { knownSchemes, generateRandomScheme, crossSchemes, generateSchemeFromGeneticAlgorithm };
export { knownSchemes, generateRandomScheme, generateSchemeFromGeneticAlgorithm };

43
public/app-icon.svg Normal file
View File

@ -0,0 +1,43 @@
<?xml version="1.0" encoding="utf-8"?>
<svg viewBox="35.479 5 414.17 489.256" xmlns="http://www.w3.org/2000/svg">
<rect x="149.52" y="470.326" width="195.224" height="23.93" style="stroke: rgb(0, 0, 0); stroke-miterlimit: 1; stroke-linejoin: round; stroke-width: 4px; fill: rgb(141, 161, 1);"/>
<rect x="108.079" y="433.571" width="61.527" height="23.93" style="stroke: rgb(0, 0, 0); stroke-miterlimit: 1; stroke-linejoin: round; stroke-width: 4px; fill: rgb(52, 63, 68);"/>
<rect x="180.037" y="433.573" width="105.807" height="23.93" style="stroke: rgb(0, 0, 0); stroke-miterlimit: 1; stroke-linejoin: round; stroke-width: 4px; fill: rgb(223, 221, 200);"/>
<rect x="296.705" y="433.571" width="105.807" height="23.93" style="stroke: rgb(0, 0, 0); stroke-miterlimit: 1; stroke-linejoin: round; stroke-width: 4px; fill: rgb(223, 160, 0);"/>
<rect x="86.575" y="397.804" width="31.895" height="23.93" style="stroke: rgb(0, 0, 0); stroke-miterlimit: 1; stroke-linejoin: round; stroke-width: 4px; fill: rgb(58, 148, 197);"/>
<rect x="133.439" y="397.806" width="130.903" height="23.93" style="stroke: rgb(0, 0, 0); stroke-miterlimit: 1; stroke-linejoin: round; stroke-width: 4px; fill: rgb(248, 85, 82);"/>
<rect x="331.134" y="397.804" width="83.132" height="23.93" style="stroke: rgb(0, 0, 0); stroke-miterlimit: 1; stroke-linejoin: round; stroke-width: 4px; fill: rgb(58, 148, 197);"/>
<rect x="57.622" y="362.039" width="94.852" height="23.93" style="stroke: rgb(0, 0, 0); stroke-miterlimit: 1; stroke-linejoin: round; stroke-width: 4px; fill: rgb(53, 167, 124);"/>
<rect x="167.671" y="362.04" width="67.718" height="23.93" style="stroke: rgb(0, 0, 0); stroke-miterlimit: 1; stroke-linejoin: round; stroke-width: 4px; fill: rgb(223, 160, 0);"/>
<rect x="246.25" y="362.039" width="52.339" height="23.93" style="stroke: rgb(0, 0, 0); stroke-miterlimit: 1; stroke-linejoin: round; stroke-width: 4px; fill: rgb(52, 63, 68);"/>
<rect x="42.293" y="325.419" width="171.985" height="23.93" style="stroke: rgb(0, 0, 0); stroke-miterlimit: 1; stroke-linejoin: round; stroke-width: 4px; fill: rgb(223, 160, 0);"/>
<rect x="227.572" y="325.419" width="51.93" height="23.93" style="stroke: rgb(0, 0, 0); stroke-miterlimit: 1; stroke-linejoin: round; stroke-width: 4px; fill: rgb(248, 85, 82);"/>
<rect y="289.651" width="61.527" height="23.93" style="stroke: rgb(0, 0, 0); stroke-miterlimit: 1; stroke-linejoin: round; stroke-width: 4px; fill: rgb(58, 148, 197);" x="35.479"/>
<rect x="107.747" y="289.653" width="43.708" height="23.93" style="stroke: rgb(0, 0, 0); stroke-miterlimit: 1; stroke-linejoin: round; stroke-width: 4px; fill: rgb(248, 85, 82);"/>
<rect x="165.557" y="289.651" width="84.265" height="23.93" style="stroke: rgb(0, 0, 0); stroke-miterlimit: 1; stroke-linejoin: round; stroke-width: 4px; fill: rgb(223, 105, 186);"/>
<rect x="84.895" y="253.035" width="130.724" height="23.93" style="stroke: rgb(0, 0, 0); stroke-miterlimit: 1; stroke-linejoin: round; stroke-width: 4px; fill: rgb(141, 161, 1);"/>
<rect x="227.515" y="253.032" width="78.622" height="23.93" style="stroke: rgb(0, 0, 0); stroke-miterlimit: 1; stroke-linejoin: round; stroke-width: 4px; fill: rgb(58, 148, 197);"/>
<rect x="47.404" y="214.712" width="82.816" height="23.93" style="stroke: rgb(0, 0, 0); stroke-miterlimit: 1; stroke-linejoin: round; stroke-width: 4px; fill: rgb(52, 63, 68);"/>
<rect x="144.91" y="214.715" width="61.527" height="23.93" style="stroke: rgb(0, 0, 0); stroke-miterlimit: 1; stroke-linejoin: round; stroke-width: 4px; fill: rgb(53, 167, 124);"/>
<rect x="221.047" y="214.712" width="54.82" height="23.93" style="stroke: rgb(0, 0, 0); stroke-miterlimit: 1; stroke-linejoin: round; stroke-width: 4px; fill: rgb(248, 85, 82);"/>
<rect x="75.292" y="176.391" width="42.789" height="23.93" style="stroke: rgb(0, 0, 0); stroke-miterlimit: 1; stroke-linejoin: round; stroke-width: 4px; fill: rgb(223, 160, 0);"/>
<rect x="110.207" y="138.922" width="34.274" height="23.93" style="stroke: rgb(0, 0, 0); stroke-miterlimit: 1; stroke-linejoin: round; stroke-width: 4px; fill: rgb(141, 161, 1);"/>
<rect x="135.1" y="176.391" width="24.909" height="23.93" style="stroke: rgb(0, 0, 0); stroke-miterlimit: 1; stroke-linejoin: round; stroke-width: 4px; fill: rgb(58, 148, 197);"/>
<rect x="288.845" y="214.758" width="98.152" height="23.93" style="stroke: rgb(0, 0, 0); stroke-miterlimit: 1; stroke-linejoin: round; stroke-width: 4px; fill: rgb(52, 63, 68);"/>
<rect x="400.706" y="214.976" width="46.104" height="23.93" style="stroke: rgb(0, 0, 0); stroke-miterlimit: 1; stroke-linejoin: round; stroke-width: 4px; fill: rgb(141, 161, 1);"/>
<rect x="264.6" y="289.735" width="75.84" height="23.93" style="stroke: rgb(0, 0, 0); stroke-miterlimit: 1; stroke-linejoin: round; stroke-width: 4px; fill: rgb(223, 221, 200);"/>
<rect x="352.572" y="289.735" width="75.84" height="23.93" style="stroke: rgb(0, 0, 0); stroke-miterlimit: 1; stroke-linejoin: round; stroke-width: 4px; fill: rgb(141, 161, 1);"/>
<rect x="199.859" y="179.045" width="31.786" height="23.93" style="stroke: rgb(0, 0, 0); stroke-miterlimit: 1; stroke-linejoin: round; stroke-width: 4px; fill: rgb(223, 221, 200);"/>
<rect x="242.922" y="179.093" width="82.514" height="23.93" style="stroke: rgb(0, 0, 0); stroke-miterlimit: 1; stroke-linejoin: round; stroke-width: 4px; fill: rgb(223, 160, 0);"/>
<rect x="338.005" y="179.309" width="87.62" height="23.93" style="stroke: rgb(0, 0, 0); stroke-miterlimit: 1; stroke-linejoin: round; stroke-width: 4px; fill: rgb(248, 85, 82);"/>
<rect x="236.382" y="144.662" width="108.958" height="23.93" style="stroke: rgb(0, 0, 0); stroke-miterlimit: 1; stroke-linejoin: round; stroke-width: 4px; fill: rgb(223, 105, 186);"/>
<rect x="357.65" y="144.596" width="78.522" height="23.93" style="stroke: rgb(0, 0, 0); stroke-miterlimit: 1; stroke-linejoin: round; stroke-width: 4px; fill: rgb(52, 63, 68);"/>
<rect x="249.74" y="109.491" width="168.1" height="23.93" style="stroke: rgb(0, 0, 0); stroke-miterlimit: 1; stroke-linejoin: round; stroke-width: 4px; fill: rgb(58, 148, 197);"/>
<rect x="264.038" y="74.295" width="31.786" height="23.93" style="stroke: rgb(0, 0, 0); stroke-miterlimit: 1; stroke-linejoin: round; stroke-width: 4px; fill: rgb(53, 167, 124);"/>
<rect x="317.144" y="74.342" width="59.427" height="23.93" style="stroke: rgb(0, 0, 0); stroke-miterlimit: 1; stroke-linejoin: round; stroke-width: 4px; fill: rgb(223, 160, 0);"/>
<rect x="272.322" y="38.562" width="50.955" height="23.93" style="stroke: rgb(0, 0, 0); stroke-miterlimit: 1; stroke-linejoin: round; stroke-width: 4px; fill: rgb(141, 161, 1);"/>
<rect x="259.611" width="24.267" height="23.93" style="stroke: rgb(0, 0, 0); stroke-miterlimit: 1; stroke-linejoin: round; stroke-width: 4px; fill: rgb(58, 148, 197);" y="5"/>
<rect x="276.856" y="397.902" width="43.225" height="23.93" style="stroke: rgb(0, 0, 0); stroke-miterlimit: 1; stroke-linejoin: round; stroke-width: 4px; fill: rgb(223, 105, 186);"/>
<rect x="375.633" y="362.085" width="21.939" height="23.93" style="stroke: rgb(0, 0, 0); stroke-miterlimit: 1; stroke-linejoin: round; stroke-width: 4px; fill: rgb(141, 161, 1);"/>
<rect x="409.398" y="362.081" width="40.251" height="23.93" style="stroke: rgb(0, 0, 0); stroke-miterlimit: 1; stroke-linejoin: round; stroke-width: 4px; fill: rgb(223, 105, 186);"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 7.3 KiB

7
public/cross-icon-dark.svg Normal file
View File

@ -0,0 +1,7 @@
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<!-- Uploaded to: SVG Repo, www.svgrepo.com, Transformed by: SVG Repo Mixer Tools -->
<svg width="800px" height="800px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<g id="SVGRepo_bgCarrier" stroke-width="0"/>
<g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"/>
<g id="SVGRepo_iconCarrier"> <path d="M6 6L18 18M18 6L6 18" stroke="#ffffff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> </g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 569 B

7
public/cross-icon-light.svg Normal file
View File

@ -0,0 +1,7 @@
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<!-- Uploaded to: SVG Repo, www.svgrepo.com, Transformed by: SVG Repo Mixer Tools -->
<svg width="800px" height="800px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<g id="SVGRepo_bgCarrier" stroke-width="0"/>
<g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"/>
<g id="SVGRepo_iconCarrier"> <path d="M6 6L18 18M18 6L6 18" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> </g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 569 B

7
public/download-icon-dark.svg Normal file
View File

@ -0,0 +1,7 @@
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<!-- Uploaded to: SVG Repo, www.svgrepo.com, Transformed by: SVG Repo Mixer Tools -->
<svg width="800px" height="800px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<g id="SVGRepo_bgCarrier" stroke-width="0"/>
<g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"/>
<g id="SVGRepo_iconCarrier"> <path d="M12 16V4M12 16L9 13M12 16L15 13M7 9H6.2C5.0799 9 4.51984 9 4.09202 9.21799C3.71569 9.40973 3.40973 9.71569 3.21799 10.092C3 10.5198 3 11.0799 3 12.2V16.8C3 17.9201 3 18.4802 3.21799 18.908C3.40973 19.2843 3.71569 19.5903 4.09202 19.782C4.51984 20 5.0799 20 6.2 20H17.8C18.9201 20 19.4802 20 19.908 19.782C20.2843 19.5903 20.5903 19.2843 20.782 18.908C21 18.4802 21 17.9201 21 16.8V12.2C21 11.0799 21 10.5198 20.782 10.092C20.5903 9.71569 20.2843 9.40973 19.908 9.21799C19.4802 9 18.9201 9 17.8 9H17" stroke="#ffffff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> </g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.0 KiB

7
public/download-icon-light.svg Normal file
View File

@ -0,0 +1,7 @@
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<!-- Uploaded to: SVG Repo, www.svgrepo.com, Transformed by: SVG Repo Mixer Tools -->
<svg width="800px" height="800px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<g id="SVGRepo_bgCarrier" stroke-width="0"/>
<g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"/>
<g id="SVGRepo_iconCarrier"> <path d="M12 16V4M12 16L9 13M12 16L15 13M7 9H6.2C5.0799 9 4.51984 9 4.09202 9.21799C3.71569 9.40973 3.40973 9.71569 3.21799 10.092C3 10.5198 3 11.0799 3 12.2V16.8C3 17.9201 3 18.4802 3.21799 18.908C3.40973 19.2843 3.71569 19.5903 4.09202 19.782C4.51984 20 5.0799 20 6.2 20H17.8C18.9201 20 19.4802 20 19.908 19.782C20.2843 19.5903 20.5903 19.2843 20.782 18.908C21 18.4802 21 17.9201 21 16.8V12.2C21 11.0799 21 10.5198 20.782 10.092C20.5903 9.71569 20.2843 9.40973 19.908 9.21799C19.4802 9 18.9201 9 17.8 9H17" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> </g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.0 KiB

7
public/heart-icon-dark.svg Normal file
View File

@ -0,0 +1,7 @@
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<!-- Uploaded to: SVG Repo, www.svgrepo.com, Transformed by: SVG Repo Mixer Tools -->
<svg width="800px" height="800px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" stroke="#000000">
<g id="SVGRepo_bgCarrier" stroke-width="0"/>
<g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"/>
<g id="SVGRepo_iconCarrier"> <path fill-rule="evenodd" clip-rule="evenodd" d="M12 6.00019C10.2006 3.90317 7.19377 3.2551 4.93923 5.17534C2.68468 7.09558 2.36727 10.3061 4.13778 12.5772C5.60984 14.4654 10.0648 18.4479 11.5249 19.7369C11.6882 19.8811 11.7699 19.9532 11.8652 19.9815C11.9483 20.0062 12.0393 20.0062 12.1225 19.9815C12.2178 19.9532 12.2994 19.8811 12.4628 19.7369C13.9229 18.4479 18.3778 14.4654 19.8499 12.5772C21.6204 10.3061 21.3417 7.07538 19.0484 5.17534C16.7551 3.2753 13.7994 3.90317 12 6.00019Z" stroke="#ffffff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> </g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.0 KiB

7
public/heart-icon-light.svg Normal file
View File

@ -0,0 +1,7 @@
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<!-- Uploaded to: SVG Repo, www.svgrepo.com, Transformed by: SVG Repo Mixer Tools -->
<svg width="800px" height="800px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<g id="SVGRepo_bgCarrier" stroke-width="0"/>
<g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"/>
<g id="SVGRepo_iconCarrier"> <path fill-rule="evenodd" clip-rule="evenodd" d="M12 6.00019C10.2006 3.90317 7.19377 3.2551 4.93923 5.17534C2.68468 7.09558 2.36727 10.3061 4.13778 12.5772C5.60984 14.4654 10.0648 18.4479 11.5249 19.7369C11.6882 19.8811 11.7699 19.9532 11.8652 19.9815C11.9483 20.0062 12.0393 20.0062 12.1225 19.9815C12.2178 19.9532 12.2994 19.8811 12.4628 19.7369C13.9229 18.4479 18.3778 14.4654 19.8499 12.5772C21.6204 10.3061 21.3417 7.07538 19.0484 5.17534C16.7551 3.2753 13.7994 3.90317 12 6.00019Z" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> </g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.0 KiB