refactor: remove favorite and copy features from units converter

This commit is contained in:
2026-02-26 12:40:03 +01:00
parent e1406f427e
commit 0db8ea8773
2 changed files with 3 additions and 58 deletions

View File

@@ -4,6 +4,8 @@
@source "../components/ui/*.{js,ts,jsx,tsx}"; @source "../components/ui/*.{js,ts,jsx,tsx}";
@source "*.{js,ts,jsx,tsx}"; @source "*.{js,ts,jsx,tsx}";
@custom-variant hover (&:hover);
@theme { @theme {
--color-background: var(--background); --color-background: var(--background);
--color-foreground: var(--foreground); --color-foreground: var(--foreground);

View File

@@ -1,7 +1,7 @@
'use client'; 'use client';
import { useState, useEffect, useCallback } from 'react'; import { useState, useEffect, useCallback } from 'react';
import { Copy, Star, Check, ArrowLeftRight, BarChart3 } from 'lucide-react'; import { ArrowLeftRight, BarChart3 } from 'lucide-react';
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'; import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
import { Input } from '@/components/ui/input'; import { Input } from '@/components/ui/input';
import { Button } from '@/components/ui/button'; import { Button } from '@/components/ui/button';
@@ -25,7 +25,6 @@ import {
type ConversionResult, type ConversionResult,
} from '@/lib/units/units'; } from '@/lib/units/units';
import { parseNumberInput, formatNumber, cn } from '@/lib/utils'; import { parseNumberInput, formatNumber, cn } from '@/lib/utils';
import { getFavorites, toggleFavorite } from '@/lib/units/storage';
export default function MainConverter() { export default function MainConverter() {
const [selectedMeasure, setSelectedMeasure] = useState<Measure>('length'); const [selectedMeasure, setSelectedMeasure] = useState<Measure>('length');
@@ -33,19 +32,12 @@ export default function MainConverter() {
const [targetUnit, setTargetUnit] = useState<string>('ft'); const [targetUnit, setTargetUnit] = useState<string>('ft');
const [inputValue, setInputValue] = useState<string>('1'); const [inputValue, setInputValue] = useState<string>('1');
const [conversions, setConversions] = useState<ConversionResult[]>([]); const [conversions, setConversions] = useState<ConversionResult[]>([]);
const [favorites, setFavorites] = useState<string[]>([]);
const [copiedUnit, setCopiedUnit] = useState<string | null>(null);
const [showVisualComparison, setShowVisualComparison] = useState(false); const [showVisualComparison, setShowVisualComparison] = useState(false);
const [isDragging, setIsDragging] = useState(false); const [isDragging, setIsDragging] = useState(false);
const measures = getAllMeasures(); const measures = getAllMeasures();
const units = getUnitsForMeasure(selectedMeasure); const units = getUnitsForMeasure(selectedMeasure);
// Load favorites
useEffect(() => {
setFavorites(getFavorites());
}, []);
// Update conversions when input changes // Update conversions when input changes
useEffect(() => { useEffect(() => {
const numValue = parseNumberInput(inputValue); const numValue = parseNumberInput(inputValue);
@@ -80,23 +72,6 @@ export default function MainConverter() {
} }
}, [selectedUnit, targetUnit, inputValue]); }, [selectedUnit, targetUnit, inputValue]);
// Copy to clipboard
const copyToClipboard = useCallback(async (value: number, unit: string) => {
try {
await navigator.clipboard.writeText(`${formatNumber(value)} ${unit}`);
setCopiedUnit(unit);
setTimeout(() => setCopiedUnit(null), 2000);
} catch (error) {
console.error('Failed to copy:', error);
}
}, []);
// Toggle favorite
const handleToggleFavorite = useCallback((unit: string) => {
const isFavorite = toggleFavorite(unit);
setFavorites(getFavorites());
}, []);
// Handle search selection // Handle search selection
const handleSearchSelect = useCallback((unit: string, measure: Measure) => { const handleSearchSelect = useCallback((unit: string, measure: Measure) => {
setSelectedMeasure(measure); setSelectedMeasure(measure);
@@ -250,43 +225,11 @@ export default function MainConverter() {
) : ( ) : (
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4"> <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
{conversions.map((conversion) => { {conversions.map((conversion) => {
const isFavorite = favorites.includes(conversion.unit);
const isCopied = copiedUnit === conversion.unit;
return ( return (
<div <div
key={conversion.unit} key={conversion.unit}
className="group relative p-4 rounded-lg border bg-card hover:bg-accent/50 transition-colors border-l-4 border-l-primary/30" className="group relative p-4 rounded-lg border bg-card hover:bg-accent/50 transition-colors border-l-4 border-l-primary/30"
> >
{/* Favorite & Copy buttons */}
<div className="absolute top-2 right-2 flex gap-1 opacity-0 group-hover:opacity-100 transition-opacity">
<Button
variant="ghost"
size="icon"
className="h-8 w-8"
onClick={() => handleToggleFavorite(conversion.unit)}
>
<Star
className={cn(
'h-4 w-4',
isFavorite && 'fill-yellow-400 text-yellow-400'
)}
/>
</Button>
<Button
variant="ghost"
size="icon"
className="h-8 w-8"
onClick={() => copyToClipboard(conversion.value, conversion.unit)}
>
{isCopied ? (
<Check className="h-4 w-4 text-green-500" />
) : (
<Copy className="h-4 w-4" />
)}
</Button>
</div>
<div className="text-sm text-muted-foreground mb-1"> <div className="text-sm text-muted-foreground mb-1">
{conversion.unitInfo.plural} {conversion.unitInfo.plural}
</div> </div>