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

Add history clearing

Browse Source
This commit is contained in:
Tanishq Dubey 2024-09-09 18:54:57 -04:00
parent 35cda06cbf
commit fdd210e13e
2 changed files with 29 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
app/components/HistoryPopup.tsx
View File

@ -8,11 +8,19 @@ interface HistoryPopupProps {
likedSchemes: ColorScheme[];
dislikedSchemes: ColorScheme[];
onClose: () => void;
onClearHistory: () => void; // Add this line
isDarkMode: boolean;
outputFormat: string;
}
const HistoryPopup: React.FC<HistoryPopupProps> = ({ likedSchemes, dislikedSchemes, onClose, isDarkMode, outputFormat }) => {
const HistoryPopup: React.FC<HistoryPopupProps> = ({
likedSchemes,
dislikedSchemes,
onClose,
onClearHistory, // Add this line
isDarkMode,
outputFormat
}) => {
const handleDownload = (scheme: ColorScheme) => {
let content: string;
let fileExtension: string;
@ -60,7 +68,7 @@ const HistoryPopup: React.FC<HistoryPopupProps> = ({ likedSchemes, dislikedSchem
/>
<button
onClick={() => handleDownload(scheme)}
className="w-full bg-blue-500 text-white text-xs py-1 px-2 rounded hover:bg-blue-600 transition-colors duration-300"
className="w-full bg-blue-500 text-white text-xs py-1 px-2 rounded hover:bg-blue-600 transition-colors duration-300 mt-2"
>
Download
</button>
@ -75,9 +83,17 @@ const HistoryPopup: React.FC<HistoryPopupProps> = ({ likedSchemes, dislikedSchem
<div className="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-xl w-[90vw] h-[90vh] overflow-y-auto">
<div className="flex justify-between items-center mb-4">
<h2 className="text-2xl font-bold">Color Scheme History</h2>
<button onClick={onClose} className="text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200">
<Image src={isDarkMode ? "/close-icon-dark.svg" : "/close-icon-light.svg"} alt="Close" width={24} height={24} />
</button>
<div className="flex items-center space-x-4">
<button
onClick={onClearHistory}
className="bg-red-500 hover:bg-red-600 text-white px-4 py-2 rounded transition-colors duration-300"
>
Clear History
</button>
<button onClick={onClose} className="text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200">
<Image src={isDarkMode ? "/close-icon-dark.svg" : "/close-icon-light.svg"} alt="Close" width={24} height={24} />
</button>
</div>
</div>
{renderSchemeGrid(likedSchemes, "Liked Schemes")}
{renderSchemeGrid(dislikedSchemes, "Disliked Schemes")}

9
app/page.tsx
View File

@ -9,7 +9,6 @@ import HelpDialog from "./components/HelpDialog";
import { ColorScheme, knownSchemes, generateRandomScheme, generateSchemeFromGeneticAlgorithm } from './utils/colorSchemes';
import { AnimatePresence } from 'framer-motion';
import { CodeSample } from './utils/types';
export default function Home() {
const [schemes, setSchemes] = useState<ColorScheme[]>([]);
@ -111,6 +110,13 @@ export default function Home() {
setIsHelpOpen(!isHelpOpen);
};
const handleClearHistory = () => {
setLikedSchemes([]);
setDislikedSchemes([]);
localStorage.removeItem('likedSchemes');
localStorage.removeItem('dislikedSchemes');
};
return (
<div className="min-h-screen w-screen overflow-hidden font-[family-name:var(--font-geist-sans)] dark:bg-gray-900 dark:text-white transition-colors duration-300">
<header className="absolute top-2 left-2 right-2 flex justify-between items-start z-20">
@ -154,6 +160,7 @@ export default function Home() {
likedSchemes={likedSchemes}
dislikedSchemes={dislikedSchemes}
onClose={toggleHistory}
onClearHistory={handleClearHistory} // Add this line
isDarkMode={isDarkMode}
outputFormat={outputFormat}
/>