feat: add copy button with toast to units result field
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
@@ -1,7 +1,8 @@
|
|||||||
'use client';
|
'use client';
|
||||||
|
|
||||||
import { useState, useEffect, useCallback } from 'react';
|
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 SearchUnits from './SearchUnits';
|
||||||
import VisualComparison from './VisualComparison';
|
import VisualComparison from './VisualComparison';
|
||||||
import {
|
import {
|
||||||
@@ -131,10 +132,9 @@ export default function MainConverter() {
|
|||||||
onClick={() => handleCategorySelect(measure)}
|
onClick={() => handleCategorySelect(measure)}
|
||||||
className={cn(
|
className={cn(
|
||||||
'w-full flex items-center gap-2 px-2 py-1.5 rounded-lg transition-all text-left',
|
'w-full flex items-center gap-2 px-2 py-1.5 rounded-lg transition-all text-left',
|
||||||
'border-l-2',
|
|
||||||
isSelected
|
isSelected
|
||||||
? 'bg-primary/10 border-primary text-primary'
|
? 'bg-primary/10 text-primary'
|
||||||
: 'border-transparent text-foreground/65 hover:bg-primary/8 hover:text-foreground'
|
: 'text-foreground/65 hover:bg-primary/8 hover:text-foreground'
|
||||||
)}
|
)}
|
||||||
>
|
>
|
||||||
<span className="flex-1 text-xs font-mono truncate">{formatMeasureName(measure)}</span>
|
<span className="flex-1 text-xs font-mono truncate">{formatMeasureName(measure)}</span>
|
||||||
@@ -218,7 +218,20 @@ export default function MainConverter() {
|
|||||||
{/* Result display */}
|
{/* Result display */}
|
||||||
{resultValue !== null && (
|
{resultValue !== null && (
|
||||||
<div className="mt-3 px-3 py-2.5 rounded-lg bg-primary/5 border border-primary/15">
|
<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">
|
<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">
|
<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)}
|
{formatNumber(resultValue)}
|
||||||
|
|||||||
Reference in New Issue
Block a user