'use client'; import React, { useEffect, useState } from 'react'; import { useParams } from 'next/navigation'; import Image from 'next/image'; import Head from 'next/head'; import { ColorScheme, decodeThemeFromUrl } from '../../utils/colorSchemes'; import ColorPalette from '../../components/ColorPalette'; import CodePreview from '../../components/CodePreview'; import DynamicSocialPreview from '../../components/DynamicSocialPreview'; import { CodeSample } from '../../utils/types'; import { generateYAML, generateJSON, generateXResources, generateTOML, generateITerm2, generateWindowsTerminal, generateTerminalApp } from '../../utils/exportFormats'; const SharedTheme: React.FC = () => { const params = useParams(); const [scheme, setScheme] = useState(null); const [codeSample] = useState('javascript'); const [outputFormat, setOutputFormat] = useState('yaml'); const [, setIsDarkMode] = useState(false); useEffect(() => { if (params.id) { const decodedScheme = decodeThemeFromUrl(params.id as string); setScheme(decodedScheme); } setIsDarkMode(window.matchMedia('(prefers-color-scheme: dark)').matches); }, [params.id]); useEffect(() => { if (scheme) { document.title = `${scheme.name} - Terminal Tinder Color Scheme`; } }, [scheme]); if (!scheme) { return
Loading...
; } const handleDownload = () => { let content: string; let fileExtension: string; switch (outputFormat) { case 'json': content = generateJSON(scheme); fileExtension = 'json'; break; case 'xresources': content = generateXResources(scheme); fileExtension = 'Xresources'; break; case 'toml': content = generateTOML(scheme); fileExtension = 'toml'; break; case 'iterm2': content = generateITerm2(scheme); fileExtension = 'itermcolors'; break; case 'windows-terminal': content = generateWindowsTerminal(scheme); fileExtension = 'json'; break; case 'terminal-app': content = generateTerminalApp(scheme); fileExtension = 'terminal'; break; case 'yaml': default: content = generateYAML(scheme); fileExtension = 'yaml'; } const blob = new Blob([content], { type: 'text/plain' }); const url = URL.createObjectURL(blob); const a = document.createElement('a'); a.href = url; a.download = `${scheme.name.replace(/\s+/g, '_').toLowerCase()}.${fileExtension}`; document.body.appendChild(a); a.click(); document.body.removeChild(a); URL.revokeObjectURL(url); }; const socialPreviewSvg = DynamicSocialPreview({ scheme }); const socialPreviewUrl = `data:image/svg+xml,${encodeURIComponent(socialPreviewSvg as string)}`; return ( <> {`${scheme.name} - Terminal Tinder Color Scheme`}
App Icon

TerminalTinder

Fall in love with your next color scheme

{scheme.name}

Color Palette

Code Preview

Download

Share

); }; export default SharedTheme;