valknar/kit-ui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: add copy button with toast to units result field

Browse Source 
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Sebastian Krüger
2026-03-03 19:06:00 +01:00
parent d1092c7169
commit e9927bf0f5
1 changed files with 18 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

23
components/units/MainConverter.tsx
View File

@@ -1,7 +1,8 @@
'use client';
import { useState, useEffect, useCallback } from 'react';
import { ArrowLeftRight, BarChart3, Grid3X3 } from 'lucide-react';
import { ArrowLeftRight, BarChart3, Grid3X3, Copy } from 'lucide-react';
import { toast } from 'sonner';
import SearchUnits from './SearchUnits';
import VisualComparison from './VisualComparison';
import {
@@ -131,10 +132,9 @@ export default function MainConverter() {
onClick={() => handleCategorySelect(measure)}
className={cn(
'w-full flex items-center gap-2 px-2 py-1.5 rounded-lg transition-all text-left',
'border-l-2',
isSelected
? 'bg-primary/10 border-primary text-primary'
: 'border-transparent text-foreground/65 hover:bg-primary/8 hover:text-foreground'
? 'bg-primary/10 text-primary'
: 'text-foreground/65 hover:bg-primary/8 hover:text-foreground'
)}
>
<span className="flex-1 text-xs font-mono truncate">{formatMeasureName(measure)}</span>
@@ -218,7 +218,20 @@ export default function MainConverter() {
{/* Result display */}
{resultValue !== null && (
<div className="mt-3 px-3 py-2.5 rounded-lg bg-primary/5 border border-primary/15">
<div className="text-[10px] text-muted-foreground/50 font-mono mb-0.5">Result</div>
<div className="flex items-center justify-between mb-0.5">
<div className="text-[10px] text-muted-foreground/50 font-mono">Result</div>
<button
onClick={() => {
const text = `${formatNumber(resultValue)} ${targetUnit}`;
navigator.clipboard.writeText(text);
toast.success('Copied', { description: text, duration: 2000 });
}}
title="Copy result"
className="w-5 h-5 flex items-center justify-center rounded text-muted-foreground/40 hover:text-primary transition-colors"
>
<Copy className="w-3 h-3" />
</button>
</div>
<div className="flex items-baseline gap-2">
<span className="text-xl font-bold tabular-nums font-mono bg-gradient-to-r from-primary to-pink-400 bg-clip-text text-transparent">
{formatNumber(resultValue)}