refactor: remove favorite and copy features from units converter
This commit is contained in:
@@ -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);
|
||||||
|
|||||||
@@ -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>
|
||||||
|
|||||||
Reference in New Issue
Block a user