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

refactor: externalize shared primitives, remove shadcn mixing in tools

Browse Source 
Shared components (components/ui/):
- slider-row.tsx: SliderRow — label + display value + Slider, replaces
  inline slider blocks in FileConverter, QROptions
- color-input.tsx: ColorInput — color swatch + hex text input pair,
  replaces repeated inline patterns in QROptions, KeyframeProperties,
  FaviconGenerator

Media tool (FileConverter.tsx):
- Remove all shadcn Select/SelectTrigger/SelectContent/SelectItem
- Replace with native <select> + selectCls (matches AnimationSettings
  and all other tools)
- Use SliderRow for video/audio bitrate and image quality sliders
- Net: -6 shadcn Select trees, consistent with every other tool

QROptions.tsx:
- Use SliderRow for margin slider (remove raw Slider import)
- Use ColorInput for foreground + background color pairs

KeyframeProperties.tsx:
- Use ColorInput for background color pair (keep local SliderRow which
  has a different layout with number input)

FaviconGenerator.tsx:
- Use ColorInput for background + theme color pairs

AnimationSettings.tsx:
- Remove dead bg-[#1a1a2e] per-option className (global CSS handles
  select option styling via bg-popover)

Delete:
- components/media/ConversionOptions.tsx — dead code (no imports),
  contained the shadcn Label/Input/Select/Slider patterns being replaced

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Sebastian Krüger
2026-03-01 13:08:58 +01:00
parent 1276a10e9a
commit 998ac641f9
8 changed files with 199 additions and 509 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
components/animate/AnimationSettings.tsx
View File

@@ -127,7 +127,7 @@ export function AnimationSettings({ config, onChange }: Props) {
className="w-full bg-transparent border border-border/40 rounded-lg px-3 py-2 text-xs font-mono outline-none focus:border-primary/50 transition-colors text-foreground/80 cursor-pointer"
>
{EASINGS.map((e) => (
<option key={e.value} value={e.value} className="bg-[#1a1a2e]">
<option key={e.value} value={e.value}>
{e.label}
</option>
))}

17
components/animate/KeyframeProperties.tsx
View File

@@ -1,6 +1,7 @@
'use client';
import { Slider } from '@/components/ui/slider';
import { ColorInput } from '@/components/ui/color-input';
import { MousePointerClick } from 'lucide-react';
import { cn } from '@/lib/utils/cn';
import type { Keyframe, KeyframeProperties, TransformValue } from '@/types/animate';
@@ -112,23 +113,11 @@ export function KeyframeProperties({ keyframe, onChange }: Props) {
{hasBg ? 'On' : 'Off'}
</button>
</div>
<div className="flex gap-1.5">
<input
type="color"
<ColorInput
value={hasBg ? props.backgroundColor! : '#8b5cf6'}
onChange={(e) => setProp('backgroundColor', e.target.value)}
onChange={(v) => setProp('backgroundColor', v)}
disabled={!hasBg}
className={cn('w-8 h-8 rounded-lg cursor-pointer border border-border/40 bg-transparent shrink-0 p-0.5', !hasBg && 'opacity-30 cursor-not-allowed')}
/>
<input
type="text"
value={hasBg ? props.backgroundColor! : ''}
onChange={(e) => setProp('backgroundColor', e.target.value)}
disabled={!hasBg}
placeholder="none"
className="flex-1 bg-transparent border border-border/40 rounded-lg px-3 py-1.5 text-xs font-mono outline-none focus:border-primary/50 transition-colors text-foreground/80 placeholder:text-muted-foreground/30 disabled:opacity-30"
/>
</div>
</div>
<SliderRow label="Border Radius" unit="px" value={props.borderRadius ?? 0} min={0} max={200} onChange={(v) => setProp('borderRadius', v)} />

29
components/favicon/FaviconGenerator.tsx
View File

@@ -3,6 +3,7 @@
import * as React from 'react';
import { Download, Loader2, Code2, Globe, Layout, FileImage } from 'lucide-react';
import { FaviconFileUpload } from './FaviconFileUpload';
import { ColorInput } from '@/components/ui/color-input';
import { CodeSnippet } from './CodeSnippet';
import { generateFaviconSet } from '@/lib/favicon/faviconService';
import { downloadBlobsAsZip } from '@/lib/media/utils/fileUtils';
@@ -145,37 +146,17 @@ export function FaviconGenerator() {
<div className="grid grid-cols-2 gap-3">
<div>
<label className="text-[10px] text-muted-foreground/60 font-mono mb-1.5 block">Background</label>
<div className="flex gap-1.5">
<input
type="color"
<ColorInput
value={options.backgroundColor}
onChange={(e) => setOptions({ ...options, backgroundColor: e.target.value })}
className="w-8 h-8 rounded-lg cursor-pointer border border-border/40 bg-transparent shrink-0 p-0.5"
onChange={(v) => setOptions({ ...options, backgroundColor: v })}
/>
<input
type="text"
value={options.backgroundColor}
onChange={(e) => setOptions({ ...options, backgroundColor: e.target.value })}
className={cn(inputCls, 'py-1')}
/>
</div>
</div>
<div>
<label className="text-[10px] text-muted-foreground/60 font-mono mb-1.5 block">Theme</label>
<div className="flex gap-1.5">
<input
type="color"
<ColorInput
value={options.themeColor}
onChange={(e) => setOptions({ ...options, themeColor: e.target.value })}
className="w-8 h-8 rounded-lg cursor-pointer border border-border/40 bg-transparent shrink-0 p-0.5"
onChange={(v) => setOptions({ ...options, themeColor: v })}
/>
<input
type="text"
value={options.themeColor}
onChange={(e) => setOptions({ ...options, themeColor: e.target.value })}
className={cn(inputCls, 'py-1')}
/>
</div>
</div>
</div>
</div>

271
components/media/ConversionOptions.tsx
View File

@@ -1,271 +0,0 @@
'use client';
import * as React from 'react';
import { Slider } from '@/components/ui/slider';
import { Input } from '@/components/ui/input';
import { Label } from '@/components/ui/label';
import {
Select,
SelectContent,
SelectItem,
SelectTrigger,
SelectValue,
} from '@/components/ui/select';
import type { ConversionOptions, ConversionFormat } from '@/types/media';
interface ConversionOptionsProps {
inputFormat: ConversionFormat;
outputFormat: ConversionFormat;
options: ConversionOptions;
onOptionsChange: (options: ConversionOptions) => void;
disabled?: boolean;
}
export function ConversionOptionsPanel({
inputFormat,
outputFormat,
options,
onOptionsChange,
disabled = false,
}: ConversionOptionsProps) {
const [isExpanded, setIsExpanded] = React.useState(false);
const handleOptionChange = (key: string, value: any) => {
onOptionsChange({ ...options, [key]: value });
};
const renderVideoOptions = () => (
<div className="space-y-4">
{/* Video Codec */}
<div className="space-y-2">
<Label>Video Codec</Label>
<Select
value={options.videoCodec || 'default'}
onValueChange={(value) => handleOptionChange('videoCodec', value === 'default' ? undefined : value)}
disabled={disabled}
>
<SelectTrigger>
<SelectValue placeholder="Select video codec" />
</SelectTrigger>
<SelectContent>
<SelectItem value="default">Auto (Recommended)</SelectItem>
<SelectItem value="libx264">H.264 (MP4, AVI, MOV)</SelectItem>
<SelectItem value="libx265">H.265 (MP4)</SelectItem>
<SelectItem value="libvpx">VP8 (WebM)</SelectItem>
<SelectItem value="libvpx-vp9">VP9 (WebM)</SelectItem>
</SelectContent>
</Select>
</div>
{/* Video Bitrate */}
<div className="space-y-2">
<div className="flex items-center justify-between">
<Label>Video Bitrate</Label>
<span className="text-xs text-muted-foreground">{options.videoBitrate || '2M'}</span>
</div>
<Slider
min={0.5}
max={10}
step={0.5}
value={[parseFloat(options.videoBitrate?.replace('M', '') || '2')]}
onValueChange={(vals) => handleOptionChange('videoBitrate', `${vals[0]}M`)}
disabled={disabled}
/>
<p className="text-xs text-muted-foreground">Higher bitrate = better quality, larger file</p>
</div>
{/* Resolution */}
<div className="space-y-2">
<Label>Resolution</Label>
<Select
value={options.videoResolution || 'original'}
onValueChange={(value) => handleOptionChange('videoResolution', value === 'original' ? undefined : value)}
disabled={disabled}
>
<SelectTrigger>
<SelectValue placeholder="Select resolution" />
</SelectTrigger>
<SelectContent>
<SelectItem value="original">Original</SelectItem>
<SelectItem value="1920x-1">1080p (1920x1080)</SelectItem>
<SelectItem value="1280x-1">720p (1280x720)</SelectItem>
<SelectItem value="854x-1">480p (854x480)</SelectItem>
<SelectItem value="640x-1">360p (640x360)</SelectItem>
</SelectContent>
</Select>
</div>
{/* FPS */}
<div className="space-y-2">
<Label>Frame Rate (FPS)</Label>
<Select
value={options.videoFps?.toString() || 'original'}
onValueChange={(value) => handleOptionChange('videoFps', value === 'original' ? undefined : parseInt(value))}
disabled={disabled}
>
<SelectTrigger>
<SelectValue placeholder="Select frame rate" />
</SelectTrigger>
<SelectContent>
<SelectItem value="original">Original</SelectItem>
<SelectItem value="60">60 fps</SelectItem>
<SelectItem value="30">30 fps</SelectItem>
<SelectItem value="24">24 fps</SelectItem>
<SelectItem value="15">15 fps</SelectItem>
</SelectContent>
</Select>
</div>
{/* Audio Bitrate */}
<div className="space-y-2">
<div className="flex items-center justify-between">
<Label>Audio Bitrate</Label>
<span className="text-xs text-muted-foreground">{options.audioBitrate || '128k'}</span>
</div>
<Slider
min={64}
max={320}
step={32}
value={[parseInt(options.audioBitrate?.replace('k', '') || '128')]}
onValueChange={(vals) => handleOptionChange('audioBitrate', `${vals[0]}k`)}
disabled={disabled}
/>
</div>
</div>
);
const renderAudioOptions = () => (
<div className="space-y-4">
{/* Audio Codec */}
<div className="space-y-2">
<Label>Audio Codec</Label>
<Select
value={options.audioCodec || 'default'}
onValueChange={(value) => handleOptionChange('audioCodec', value === 'default' ? undefined : value)}
disabled={disabled}
>
<SelectTrigger>
<SelectValue placeholder="Select audio codec" />
</SelectTrigger>
<SelectContent>
<SelectItem value="default">Auto (Recommended)</SelectItem>
<SelectItem value="libmp3lame">MP3 (LAME)</SelectItem>
<SelectItem value="aac">AAC</SelectItem>
<SelectItem value="libvorbis">Vorbis (OGG)</SelectItem>
<SelectItem value="libopus">Opus</SelectItem>
<SelectItem value="flac">FLAC (Lossless)</SelectItem>
</SelectContent>
</Select>
</div>
{/* Bitrate */}
<div className="space-y-2">
<div className="flex items-center justify-between">
<Label>Bitrate</Label>
<span className="text-xs text-muted-foreground">{options.audioBitrate || '192k'}</span>
</div>
<Slider
min={64}
max={320}
step={32}
value={[parseInt(options.audioBitrate?.replace('k', '') || '192')]}
onValueChange={(vals) => handleOptionChange('audioBitrate', `${vals[0]}k`)}
disabled={disabled}
/>
</div>
{/* Sample Rate */}
<div className="space-y-2">
<Label>Sample Rate</Label>
<Select
value={options.audioSampleRate?.toString() || 'original'}
onValueChange={(value) => handleOptionChange('audioSampleRate', value === 'original' ? undefined : parseInt(value))}
disabled={disabled}
>
<SelectTrigger>
<SelectValue placeholder="Select sample rate" />
</SelectTrigger>
<SelectContent>
<SelectItem value="original">Original</SelectItem>
<SelectItem value="48000">48 kHz (Studio)</SelectItem>
<SelectItem value="44100">44.1 kHz (CD Quality)</SelectItem>
<SelectItem value="22050">22.05 kHz</SelectItem>
</SelectContent>
</Select>
</div>
{/* Channels */}
<div className="space-y-2">
<Label>Channels</Label>
<Select
value={options.audioChannels?.toString() || 'original'}
onValueChange={(value) => handleOptionChange('audioChannels', value === 'original' ? undefined : parseInt(value))}
disabled={disabled}
>
<SelectTrigger>
<SelectValue placeholder="Select channels" />
</SelectTrigger>
<SelectContent>
<SelectItem value="original">Original</SelectItem>
<SelectItem value="2">Stereo (2 channels)</SelectItem>
<SelectItem value="1">Mono (1 channel)</SelectItem>
</SelectContent>
</Select>
</div>
</div>
);
const renderImageOptions = () => (
<div className="space-y-4">
{/* Quality */}
<div className="space-y-2">
<div className="flex items-center justify-between">
<Label>Quality</Label>
<span className="text-xs text-muted-foreground">{options.imageQuality || 85}%</span>
</div>
<Slider
min={1}
max={100}
step={1}
value={[options.imageQuality || 85]}
onValueChange={(vals) => handleOptionChange('imageQuality', vals[0])}
disabled={disabled}
/>
</div>
{/* Width */}
<div>
<Label className="mb-2">Width (px)</Label>
<Input
type="number"
value={options.imageWidth || ''}
onChange={(e) => handleOptionChange('imageWidth', e.target.value ? parseInt(e.target.value) : undefined)}
placeholder="Original"
disabled={disabled}
/>
<p className="text-xs text-muted-foreground mt-1">Leave empty to keep original</p>
</div>
{/* Height */}
<div>
<Label className="mb-2">Height (px)</Label>
<Input
type="number"
value={options.imageHeight || ''}
onChange={(e) => handleOptionChange('imageHeight', e.target.value ? parseInt(e.target.value) : undefined)}
placeholder="Original"
disabled={disabled}
/>
<p className="text-xs text-muted-foreground mt-1">Leave empty to maintain aspect ratio</p>
</div>
</div>
);
return (
<>
{outputFormat.category === 'video' && renderVideoOptions()}
{outputFormat.category === 'audio' && renderAudioOptions()}
{outputFormat.category === 'image' && renderImageOptions()}
</>
);
}

204
components/media/FileConverter.tsx
View File

@@ -1,14 +1,7 @@
'use client';
import * as React from 'react';
import {
Select,
SelectContent,
SelectItem,
SelectTrigger,
SelectValue,
} from '@/components/ui/select';
import { Slider } from '@/components/ui/slider';
import { SliderRow } from '@/components/ui/slider-row';
import { FileUpload } from './FileUpload';
import { ConversionPreview } from './ConversionPreview';
import { toast } from 'sonner';
@@ -30,6 +23,9 @@ type MobileTab = 'upload' | 'convert';
const actionBtn =
'flex items-center justify-center gap-1.5 px-3 py-1.5 text-xs glass rounded-md border border-border/30 text-muted-foreground hover:text-primary hover:border-primary/30 hover:bg-primary/10 transition-all disabled:opacity-40 disabled:cursor-not-allowed';
const selectCls =
'w-full bg-transparent border border-border/40 rounded-lg px-2.5 py-1.5 text-xs font-mono outline-none focus:border-primary/50 transition-colors text-foreground/80 cursor-pointer disabled:opacity-40';
export function FileConverter() {
const [selectedFiles, setSelectedFiles] = React.useState<File[]>([]);
const [inputFormat, setInputFormat] = React.useState<ConversionFormat | undefined>();
@@ -58,7 +54,6 @@ export function FileConverter() {
setCompatibleFormats(compat);
if (compat.length > 0 && !outputFormat) setOutputFormat(compat[0]);
toast.success(`Detected: ${fmt.name} · ${selectedFiles.length} file${selectedFiles.length > 1 ? 's' : ''}`);
// Auto-advance to convert tab on mobile
setMobileTab('convert');
} else {
toast.error('Could not detect file format');
@@ -246,7 +241,6 @@ export function FileConverter() {
mobileTab !== 'convert' && 'hidden lg:flex'
)}
>
{/* Options panel */}
{inputFormat && compatibleFormats.length > 0 ? (
<div className="glass rounded-xl p-4 shrink-0">
{/* Detected format */}
@@ -290,90 +284,70 @@ export function FileConverter() {
<>
<div className="space-y-1.5">
<span className="text-[10px] font-semibold text-muted-foreground uppercase tracking-widest">Video Codec</span>
<Select
<select
value={conversionOptions.videoCodec || 'default'}
onValueChange={(v) => setOpt({ videoCodec: v === 'default' ? undefined : v })}
onChange={(e) => setOpt({ videoCodec: e.target.value === 'default' ? undefined : e.target.value })}
disabled={isConverting}
className={selectCls}
>
<SelectTrigger className="h-7 w-full text-xs border-border/30 bg-transparent hover:border-primary/30 transition-colors font-mono">
<SelectValue />
</SelectTrigger>
<SelectContent>
<SelectItem value="default">Auto (Recommended)</SelectItem>
<SelectItem value="libx264">H.264</SelectItem>
<SelectItem value="libx265">H.265</SelectItem>
<SelectItem value="libvpx">VP8 (WebM)</SelectItem>
<SelectItem value="libvpx-vp9">VP9 (WebM)</SelectItem>
</SelectContent>
</Select>
<option value="default">Auto (Recommended)</option>
<option value="libx264">H.264</option>
<option value="libx265">H.265</option>
<option value="libvpx">VP8 (WebM)</option>
<option value="libvpx-vp9">VP9 (WebM)</option>
</select>
</div>
<div className="space-y-1.5">
<div className="flex items-center justify-between">
<span className="text-[10px] font-semibold text-muted-foreground uppercase tracking-widest">Video Bitrate</span>
<span className="text-[10px] text-muted-foreground/40 font-mono tabular-nums">{conversionOptions.videoBitrate || '2M'}</span>
</div>
<Slider
<SliderRow
label="Video Bitrate"
display={conversionOptions.videoBitrate || '2M'}
value={parseFloat(conversionOptions.videoBitrate?.replace('M', '') || '2')}
min={0.5} max={10} step={0.5}
value={[parseFloat(conversionOptions.videoBitrate?.replace('M', '') || '2')]}
onValueChange={(v) => setOpt({ videoBitrate: `${v[0]}M` })}
onChange={(v) => setOpt({ videoBitrate: `${v}M` })}
disabled={isConverting}
/>
</div>
<div className="grid grid-cols-2 gap-2">
<div className="space-y-1.5">
<span className="text-[10px] font-semibold text-muted-foreground uppercase tracking-widest">Resolution</span>
<Select
<select
value={conversionOptions.videoResolution || 'original'}
onValueChange={(v) => setOpt({ videoResolution: v === 'original' ? undefined : v })}
onChange={(e) => setOpt({ videoResolution: e.target.value === 'original' ? undefined : e.target.value })}
disabled={isConverting}
className={selectCls}
>
<SelectTrigger className="h-7 text-xs border-border/30 bg-transparent hover:border-primary/30 font-mono">
<SelectValue />
</SelectTrigger>
<SelectContent>
<SelectItem value="original">Original</SelectItem>
<SelectItem value="1920x-1">1080p</SelectItem>
<SelectItem value="1280x-1">720p</SelectItem>
<SelectItem value="854x-1">480p</SelectItem>
<SelectItem value="640x-1">360p</SelectItem>
</SelectContent>
</Select>
<option value="original">Original</option>
<option value="1920x-1">1080p</option>
<option value="1280x-1">720p</option>
<option value="854x-1">480p</option>
<option value="640x-1">360p</option>
</select>
</div>
<div className="space-y-1.5">
<span className="text-[10px] font-semibold text-muted-foreground uppercase tracking-widest">FPS</span>
<Select
<select
value={conversionOptions.videoFps?.toString() || 'original'}
onValueChange={(v) => setOpt({ videoFps: v === 'original' ? undefined : parseInt(v) })}
onChange={(e) => setOpt({ videoFps: e.target.value === 'original' ? undefined : parseInt(e.target.value) })}
disabled={isConverting}
className={selectCls}
>
<SelectTrigger className="h-7 text-xs border-border/30 bg-transparent hover:border-primary/30 font-mono">
<SelectValue />
</SelectTrigger>
<SelectContent>
<SelectItem value="original">Original</SelectItem>
<SelectItem value="60">60 fps</SelectItem>
<SelectItem value="30">30 fps</SelectItem>
<SelectItem value="24">24 fps</SelectItem>
<SelectItem value="15">15 fps</SelectItem>
</SelectContent>
</Select>
<option value="original">Original</option>
<option value="60">60 fps</option>
<option value="30">30 fps</option>
<option value="24">24 fps</option>
<option value="15">15 fps</option>
</select>
</div>
</div>
<div className="space-y-1.5">
<div className="flex items-center justify-between">
<span className="text-[10px] font-semibold text-muted-foreground uppercase tracking-widest">Audio Bitrate</span>
<span className="text-[10px] text-muted-foreground/40 font-mono tabular-nums">{conversionOptions.audioBitrate || '128k'}</span>
</div>
<Slider
<SliderRow
label="Audio Bitrate"
display={conversionOptions.audioBitrate || '128k'}
value={parseInt(conversionOptions.audioBitrate?.replace('k', '') || '128')}
min={64} max={320} step={32}
value={[parseInt(conversionOptions.audioBitrate?.replace('k', '') || '128')]}
onValueChange={(v) => setOpt({ audioBitrate: `${v[0]}k` })}
onChange={(v) => setOpt({ audioBitrate: `${v}k` })}
disabled={isConverting}
/>
</div>
</>
)}
@@ -382,73 +356,57 @@ export function FileConverter() {
<>
<div className="space-y-1.5">
<span className="text-[10px] font-semibold text-muted-foreground uppercase tracking-widest">Codec</span>
<Select
<select
value={conversionOptions.audioCodec || 'default'}
onValueChange={(v) => setOpt({ audioCodec: v === 'default' ? undefined : v })}
onChange={(e) => setOpt({ audioCodec: e.target.value === 'default' ? undefined : e.target.value })}
disabled={isConverting}
className={selectCls}
>
<SelectTrigger className="h-7 w-full text-xs border-border/30 bg-transparent hover:border-primary/30 font-mono">
<SelectValue />
</SelectTrigger>
<SelectContent>
<SelectItem value="default">Auto</SelectItem>
<SelectItem value="libmp3lame">MP3 (LAME)</SelectItem>
<SelectItem value="aac">AAC</SelectItem>
<SelectItem value="libvorbis">Vorbis</SelectItem>
<SelectItem value="libopus">Opus</SelectItem>
<SelectItem value="flac">FLAC</SelectItem>
</SelectContent>
</Select>
<option value="default">Auto</option>
<option value="libmp3lame">MP3 (LAME)</option>
<option value="aac">AAC</option>
<option value="libvorbis">Vorbis</option>
<option value="libopus">Opus</option>
<option value="flac">FLAC</option>
</select>
</div>
<div className="space-y-1.5">
<div className="flex items-center justify-between">
<span className="text-[10px] font-semibold text-muted-foreground uppercase tracking-widest">Bitrate</span>
<span className="text-[10px] text-muted-foreground/40 font-mono tabular-nums">{conversionOptions.audioBitrate || '192k'}</span>
</div>
<Slider
<SliderRow
label="Bitrate"
display={conversionOptions.audioBitrate || '192k'}
value={parseInt(conversionOptions.audioBitrate?.replace('k', '') || '192')}
min={64} max={320} step={32}
value={[parseInt(conversionOptions.audioBitrate?.replace('k', '') || '192')]}
onValueChange={(v) => setOpt({ audioBitrate: `${v[0]}k` })}
onChange={(v) => setOpt({ audioBitrate: `${v}k` })}
disabled={isConverting}
/>
</div>
<div className="grid grid-cols-2 gap-2">
<div className="space-y-1.5">
<span className="text-[10px] font-semibold text-muted-foreground uppercase tracking-widest">Sample Rate</span>
<Select
<select
value={conversionOptions.audioSampleRate?.toString() || 'original'}
onValueChange={(v) => setOpt({ audioSampleRate: v === 'original' ? undefined : parseInt(v) })}
onChange={(e) => setOpt({ audioSampleRate: e.target.value === 'original' ? undefined : parseInt(e.target.value) })}
disabled={isConverting}
className={selectCls}
>
<SelectTrigger className="h-7 text-xs border-border/30 bg-transparent hover:border-primary/30 font-mono">
<SelectValue />
</SelectTrigger>
<SelectContent>
<SelectItem value="original">Original</SelectItem>
<SelectItem value="48000">48 kHz</SelectItem>
<SelectItem value="44100">44.1 kHz</SelectItem>
<SelectItem value="22050">22 kHz</SelectItem>
</SelectContent>
</Select>
<option value="original">Original</option>
<option value="48000">48 kHz</option>
<option value="44100">44.1 kHz</option>
<option value="22050">22 kHz</option>
</select>
</div>
<div className="space-y-1.5">
<span className="text-[10px] font-semibold text-muted-foreground uppercase tracking-widest">Channels</span>
<Select
<select
value={conversionOptions.audioChannels?.toString() || 'original'}
onValueChange={(v) => setOpt({ audioChannels: v === 'original' ? undefined : parseInt(v) })}
onChange={(e) => setOpt({ audioChannels: e.target.value === 'original' ? undefined : parseInt(e.target.value) })}
disabled={isConverting}
className={selectCls}
>
<SelectTrigger className="h-7 text-xs border-border/30 bg-transparent hover:border-primary/30 font-mono">
<SelectValue />
</SelectTrigger>
<SelectContent>
<SelectItem value="original">Original</SelectItem>
<SelectItem value="2">Stereo</SelectItem>
<SelectItem value="1">Mono</SelectItem>
</SelectContent>
</Select>
<option value="original">Original</option>
<option value="2">Stereo</option>
<option value="1">Mono</option>
</select>
</div>
</div>
</>
@@ -457,18 +415,14 @@ export function FileConverter() {
{/* Image options */}
{outputFormat.category === 'image' && (
<>
<div className="space-y-1.5">
<div className="flex items-center justify-between">
<span className="text-[10px] font-semibold text-muted-foreground uppercase tracking-widest">Quality</span>
<span className="text-[10px] text-muted-foreground/40 font-mono tabular-nums">{conversionOptions.imageQuality ?? 85}%</span>
</div>
<Slider
<SliderRow
label="Quality"
display={`${conversionOptions.imageQuality ?? 85}%`}
value={conversionOptions.imageQuality ?? 85}
min={1} max={100} step={1}
value={[conversionOptions.imageQuality ?? 85]}
onValueChange={(v) => setOpt({ imageQuality: v[0] })}
onChange={(v) => setOpt({ imageQuality: v })}
disabled={isConverting}
/>
</div>
<div className="grid grid-cols-2 gap-2">
{(['imageWidth', 'imageHeight'] as const).map((key) => (
@@ -496,11 +450,7 @@ export function FileConverter() {
<button
onClick={handleConvert}
disabled={!selectedFiles.length || !outputFormat || isConverting}
className={cn(actionBtn, 'flex-1 py-2',
!isConverting && selectedFiles.length && outputFormat
? 'hover:text-primary'
: ''
)}
className={cn(actionBtn, 'flex-1 py-2')}
>
{isConverting
? <><Loader2 className="w-3 h-3 animate-spin" />Converting…</>

55
components/qrcode/QROptions.tsx
View File

@@ -1,6 +1,7 @@
'use client';
import { Slider } from '@/components/ui/slider';
import { SliderRow } from '@/components/ui/slider-row';
import { ColorInput } from '@/components/ui/color-input';
import { cn } from '@/lib/utils/cn';
import type { ErrorCorrectionLevel } from '@/types/qrcode';
@@ -22,9 +23,6 @@ const EC_OPTIONS: { value: ErrorCorrectionLevel; label: string; desc: string }[]
{ value: 'H', label: 'H', desc: '30%' },
];
const inputCls =
'w-full bg-transparent border border-border/40 rounded-lg px-3 py-1.5 text-xs font-mono outline-none focus:border-primary/50 transition-colors text-foreground/80 placeholder:text-muted-foreground/30';
export function QROptions({
errorCorrection,
foregroundColor,
@@ -73,20 +71,7 @@ export function QROptions({
{/* Foreground */}
<div>
<label className="text-[9px] text-muted-foreground/50 font-mono block mb-1.5">Foreground</label>
<div className="flex gap-1.5">
<input
type="color"
value={foregroundColor}
onChange={(e) => onForegroundColorChange(e.target.value)}
className="w-8 h-8 rounded-lg cursor-pointer border border-border/40 bg-transparent shrink-0 p-0.5"
/>
<input
type="text"
value={foregroundColor}
onChange={(e) => onForegroundColorChange(e.target.value)}
className={inputCls}
/>
</div>
<ColorInput value={foregroundColor} onChange={onForegroundColorChange} />
</div>
{/* Background */}
@@ -105,44 +90,24 @@ export function QROptions({
Transparent
</button>
</div>
<div className="flex gap-1.5">
<input
type="color"
disabled={isTransparent}
<ColorInput
value={isTransparent ? '#ffffff' : backgroundColor}
onChange={(e) => onBackgroundColorChange(e.target.value)}
className={cn(
'w-8 h-8 rounded-lg cursor-pointer border border-border/40 bg-transparent shrink-0 p-0.5 transition-opacity',
isTransparent && 'opacity-30 cursor-not-allowed'
)}
/>
<input
type="text"
onChange={onBackgroundColorChange}
disabled={isTransparent}
value={isTransparent ? 'transparent' : backgroundColor}
onChange={(e) => onBackgroundColorChange(e.target.value)}
className={cn(inputCls, isTransparent && 'opacity-30')}
/>
</div>
</div>
</div>
{/* Margin */}
<div>
<div className="flex items-center justify-between mb-2">
<span className="text-[10px] font-semibold text-muted-foreground uppercase tracking-widest">
Margin
</span>
<span className="text-[10px] text-muted-foreground/40 font-mono tabular-nums">{margin}</span>
</div>
<Slider
value={[margin]}
onValueChange={([v]) => onMarginChange(v)}
<SliderRow
label="Margin"
display={String(margin)}
value={margin}
min={0}
max={8}
step={1}
onChange={onMarginChange}
/>
</div>
</div>
);
}

39
components/ui/color-input.tsx Normal file
View File

@@ -0,0 +1,39 @@
import { cn } from '@/lib/utils/cn';
interface ColorInputProps {
value: string;
onChange: (color: string) => void;
disabled?: boolean;
className?: string;
}
/**
* Colour swatch (type="color") + hex text input pair.
* Renders them in a flex row at equal height. Disabled state dims both inputs.
*/
export function ColorInput({ value, onChange, disabled, className }: ColorInputProps) {
return (
<div className={cn('flex gap-1.5', className)}>
<input
type="color"
value={value}
onChange={(e) => onChange(e.target.value)}
disabled={disabled}
className={cn(
'w-8 h-8 rounded-lg cursor-pointer border border-border/40 bg-transparent shrink-0 p-0.5 transition-opacity',
disabled && 'opacity-30 cursor-not-allowed'
)}
/>
<input
type="text"
value={value}
onChange={(e) => onChange(e.target.value)}
disabled={disabled}
className={cn(
'flex-1 bg-transparent border border-border/40 rounded-lg px-3 py-1.5 text-xs font-mono outline-none focus:border-primary/50 transition-colors text-foreground/80 placeholder:text-muted-foreground/30',
disabled && 'opacity-30'
)}
/>
</div>
);
}

37
components/ui/slider-row.tsx Normal file
View File

@@ -0,0 +1,37 @@
import { Slider } from '@/components/ui/slider';
interface SliderRowProps {
label: string;
display: string;
value: number;
min: number;
max: number;
step?: number;
onChange: (v: number) => void;
disabled?: boolean;
}
/**
* Shared label+display header + Slider.
* For the keyframe editor's slider+number-input variant, use the local SliderRow in KeyframeProperties.tsx.
*/
export function SliderRow({ label, display, value, min, max, step = 1, onChange, disabled }: SliderRowProps) {
return (
<div className="space-y-1.5">
<div className="flex items-center justify-between">
<span className="text-[10px] font-semibold text-muted-foreground uppercase tracking-widest">
{label}
</span>
<span className="text-[10px] text-muted-foreground/40 font-mono tabular-nums">{display}</span>
</div>
<Slider
min={min}
max={max}
step={step}
value={[value]}
onValueChange={([v]) => onChange(v)}
disabled={disabled}
/>
</div>
);
}