Feat: Refine UI and consolidate components
- Updated the heading in the Pastel page from 'Color Playground' to 'Pastel'. - Adjusted the logo size in the Hero component for better visual balance. - Removed duplicate/unused Footer components from pastel layout and ui directories.
This commit is contained in:
@@ -61,7 +61,7 @@ function PlaygroundContent() {
|
|||||||
<div className="min-h-screen py-12">
|
<div className="min-h-screen py-12">
|
||||||
<div className="max-w-7xl mx-auto px-8 space-y-8">
|
<div className="max-w-7xl mx-auto px-8 space-y-8">
|
||||||
<div>
|
<div>
|
||||||
<h1 className="text-4xl font-bold mb-2">Color Playground</h1>
|
<h1 className="text-4xl font-bold mb-2">Pastel</h1>
|
||||||
<p className="text-muted-foreground">
|
<p className="text-muted-foreground">
|
||||||
Interactive color manipulation and analysis tool
|
Interactive color manipulation and analysis tool
|
||||||
</p>
|
</p>
|
||||||
|
|||||||
@@ -24,7 +24,7 @@ export default function Hero() {
|
|||||||
animate={{ opacity: 1, y: 0 }}
|
animate={{ opacity: 1, y: 0 }}
|
||||||
transition={{ duration: 0.8 }}
|
transition={{ duration: 0.8 }}
|
||||||
>
|
>
|
||||||
<Logo size={160} />
|
<Logo size={130} />
|
||||||
</motion.div>
|
</motion.div>
|
||||||
|
|
||||||
{/* Main heading */}
|
{/* Main heading */}
|
||||||
|
|||||||
@@ -1,203 +0,0 @@
|
|||||||
'use client';
|
|
||||||
|
|
||||||
import Link from 'next/link';
|
|
||||||
import { Github, Heart, ExternalLink } from 'lucide-react';
|
|
||||||
|
|
||||||
export function Footer() {
|
|
||||||
const currentYear = new Date().getFullYear();
|
|
||||||
|
|
||||||
return (
|
|
||||||
<footer className="border-t bg-card/50 backdrop-blur-sm">
|
|
||||||
<div className="max-w-7xl mx-auto px-8 py-12">
|
|
||||||
<div className="grid grid-cols-1 md:grid-cols-4 gap-8">
|
|
||||||
{/* About */}
|
|
||||||
<div className="space-y-3">
|
|
||||||
<h3 className="font-semibold text-lg">Pastel UI</h3>
|
|
||||||
<p className="text-sm text-muted-foreground">
|
|
||||||
A modern, interactive web application for color manipulation, palette generation,
|
|
||||||
and accessibility analysis
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Resources */}
|
|
||||||
<div className="space-y-3">
|
|
||||||
<h3 className="font-semibold">Resources</h3>
|
|
||||||
<ul className="space-y-2 text-sm">
|
|
||||||
<li>
|
|
||||||
<Link href="/pastel" className="text-muted-foreground hover:text-foreground transition-colors">
|
|
||||||
Color Playground
|
|
||||||
</Link>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<Link href="/pastel/harmony" className="text-muted-foreground hover:text-foreground transition-colors">
|
|
||||||
Palette Generator
|
|
||||||
</Link>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<Link href="/pastel/contrast" className="text-muted-foreground hover:text-foreground transition-colors">
|
|
||||||
Accessibility Tools
|
|
||||||
</Link>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<Link href="/pastel/batch" className="text-muted-foreground hover:text-foreground transition-colors">
|
|
||||||
Batch Operations
|
|
||||||
</Link>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Documentation */}
|
|
||||||
<div className="space-y-3">
|
|
||||||
<h3 className="font-semibold">Documentation</h3>
|
|
||||||
<ul className="space-y-2 text-sm">
|
|
||||||
<li>
|
|
||||||
<a
|
|
||||||
href="https://github.com/valknarness/pastel-ui#readme"
|
|
||||||
target="_blank"
|
|
||||||
rel="noopener noreferrer"
|
|
||||||
className="text-muted-foreground hover:text-foreground transition-colors inline-flex items-center gap-1"
|
|
||||||
>
|
|
||||||
Getting Started
|
|
||||||
<ExternalLink className="h-3 w-3" />
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<a
|
|
||||||
href="https://github.com/valknarness/pastel-api#readme"
|
|
||||||
target="_blank"
|
|
||||||
rel="noopener noreferrer"
|
|
||||||
className="text-muted-foreground hover:text-foreground transition-colors inline-flex items-center gap-1"
|
|
||||||
>
|
|
||||||
API Documentation
|
|
||||||
<ExternalLink className="h-3 w-3" />
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<a
|
|
||||||
href="https://github.com/sharkdp/pastel"
|
|
||||||
target="_blank"
|
|
||||||
rel="noopener noreferrer"
|
|
||||||
className="text-muted-foreground hover:text-foreground transition-colors inline-flex items-center gap-1"
|
|
||||||
>
|
|
||||||
Pastel CLI
|
|
||||||
<ExternalLink className="h-3 w-3" />
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Community */}
|
|
||||||
<div className="space-y-3">
|
|
||||||
<h3 className="font-semibold">Community</h3>
|
|
||||||
<ul className="space-y-2 text-sm">
|
|
||||||
<li>
|
|
||||||
<a
|
|
||||||
href="https://github.com/valknarness/pastel-ui"
|
|
||||||
target="_blank"
|
|
||||||
rel="noopener noreferrer"
|
|
||||||
className="text-muted-foreground hover:text-foreground transition-colors inline-flex items-center gap-2"
|
|
||||||
>
|
|
||||||
<Github className="h-4 w-4" />
|
|
||||||
Pastel UI
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<a
|
|
||||||
href="https://github.com/valknarness/pastel-api"
|
|
||||||
target="_blank"
|
|
||||||
rel="noopener noreferrer"
|
|
||||||
className="text-muted-foreground hover:text-foreground transition-colors inline-flex items-center gap-2"
|
|
||||||
>
|
|
||||||
<Github className="h-4 w-4" />
|
|
||||||
Pastel API
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<a
|
|
||||||
href="https://github.com/valknarness/pastel-ui/issues"
|
|
||||||
target="_blank"
|
|
||||||
rel="noopener noreferrer"
|
|
||||||
className="text-muted-foreground hover:text-foreground transition-colors"
|
|
||||||
>
|
|
||||||
Report an Issue
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<a
|
|
||||||
href="https://github.com/valknarness/pastel-ui/discussions"
|
|
||||||
target="_blank"
|
|
||||||
rel="noopener noreferrer"
|
|
||||||
className="text-muted-foreground hover:text-foreground transition-colors"
|
|
||||||
>
|
|
||||||
Discussions
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Bottom Bar */}
|
|
||||||
<div className="mt-12 pt-8 border-t">
|
|
||||||
<div className="flex flex-col md:flex-row justify-between items-center gap-4">
|
|
||||||
<div className="text-sm text-muted-foreground">
|
|
||||||
<p className="inline-flex items-center gap-1">
|
|
||||||
© {currentYear} Pastel UI. Built with
|
|
||||||
<Heart className="h-4 w-4 text-red-500 fill-red-500" />
|
|
||||||
using
|
|
||||||
<a
|
|
||||||
href="https://nextjs.org"
|
|
||||||
target="_blank"
|
|
||||||
rel="noopener noreferrer"
|
|
||||||
className="hover:text-foreground transition-colors underline"
|
|
||||||
>
|
|
||||||
Next.js
|
|
||||||
</a>
|
|
||||||
and
|
|
||||||
<a
|
|
||||||
href="https://tailwindcss.com"
|
|
||||||
target="_blank"
|
|
||||||
rel="noopener noreferrer"
|
|
||||||
className="hover:text-foreground transition-colors underline"
|
|
||||||
>
|
|
||||||
Tailwind CSS
|
|
||||||
</a>
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="flex items-center gap-6 text-sm text-muted-foreground">
|
|
||||||
<p>
|
|
||||||
Based on{' '}
|
|
||||||
<a
|
|
||||||
href="https://github.com/sharkdp/pastel"
|
|
||||||
target="_blank"
|
|
||||||
rel="noopener noreferrer"
|
|
||||||
className="hover:text-foreground transition-colors underline"
|
|
||||||
>
|
|
||||||
Pastel
|
|
||||||
</a>
|
|
||||||
{' '}by{' '}
|
|
||||||
<a
|
|
||||||
href="https://github.com/sharkdp"
|
|
||||||
target="_blank"
|
|
||||||
rel="noopener noreferrer"
|
|
||||||
className="hover:text-foreground transition-colors underline"
|
|
||||||
>
|
|
||||||
David Peter
|
|
||||||
</a>
|
|
||||||
</p>
|
|
||||||
<span>•</span>
|
|
||||||
<a
|
|
||||||
href="https://github.com/valknarness/pastel-ui/blob/main/LICENSE"
|
|
||||||
target="_blank"
|
|
||||||
rel="noopener noreferrer"
|
|
||||||
className="hover:text-foreground transition-colors"
|
|
||||||
>
|
|
||||||
MIT License
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</footer>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@@ -148,8 +148,10 @@ export default function MainConverter() {
|
|||||||
<CardTitle>Convert {formatMeasureName(selectedMeasure)}</CardTitle>
|
<CardTitle>Convert {formatMeasureName(selectedMeasure)}</CardTitle>
|
||||||
</CardHeader>
|
</CardHeader>
|
||||||
<CardContent className="space-y-6 pt-0">
|
<CardContent className="space-y-6 pt-0">
|
||||||
<div className="flex gap-2 items-end">
|
{/* Input row, stacks vertically on mobile, horizontal on desktop */}
|
||||||
<div className="flex-1">
|
<div className="flex flex-col gap-4 md:flex-row md:items-end md:gap-2">
|
||||||
|
{/* Value Input */}
|
||||||
|
<div className="flex-1 w-full">
|
||||||
<label className="text-sm font-medium mb-2 block">Value</label>
|
<label className="text-sm font-medium mb-2 block">Value</label>
|
||||||
<Input
|
<Input
|
||||||
type="text"
|
type="text"
|
||||||
@@ -157,10 +159,11 @@ export default function MainConverter() {
|
|||||||
value={inputValue}
|
value={inputValue}
|
||||||
onChange={(e) => setInputValue(e.target.value)}
|
onChange={(e) => setInputValue(e.target.value)}
|
||||||
placeholder="Enter value"
|
placeholder="Enter value"
|
||||||
className="text-lg"
|
className={cn("text-lg", "w-full", "max-w-full")}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
<div className="w-40">
|
{/* From Unit Select */}
|
||||||
|
<div className="w-full md:w-40">
|
||||||
<label className="text-sm font-medium mb-2 block">From</label>
|
<label className="text-sm font-medium mb-2 block">From</label>
|
||||||
<Select
|
<Select
|
||||||
value={selectedUnit}
|
value={selectedUnit}
|
||||||
@@ -173,16 +176,18 @@ export default function MainConverter() {
|
|||||||
))}
|
))}
|
||||||
</Select>
|
</Select>
|
||||||
</div>
|
</div>
|
||||||
|
{/* Swap Button */}
|
||||||
<Button
|
<Button
|
||||||
variant="outline"
|
variant="outline"
|
||||||
size="icon"
|
size="icon"
|
||||||
onClick={handleSwapUnits}
|
onClick={handleSwapUnits}
|
||||||
className="flex-shrink-0"
|
className="flex-shrink-0 w-full md:w-40" // Make button full width on mobile too
|
||||||
title="Swap units"
|
title="Swap units"
|
||||||
>
|
>
|
||||||
<ArrowLeftRight className="h-4 w-4" />
|
<ArrowLeftRight className="h-4 w-4" />
|
||||||
</Button>
|
</Button>
|
||||||
<div className="w-40">
|
{/* To Unit Select */}
|
||||||
|
<div className="w-full md:w-40">
|
||||||
<label className="text-sm font-medium mb-2 block">To</label>
|
<label className="text-sm font-medium mb-2 block">To</label>
|
||||||
<Select
|
<Select
|
||||||
value={targetUnit}
|
value={targetUnit}
|
||||||
|
|||||||
@@ -1,85 +0,0 @@
|
|||||||
import { Heart, Github, Code2 } from 'lucide-react';
|
|
||||||
import Link from 'next/link';
|
|
||||||
|
|
||||||
export default function Footer() {
|
|
||||||
const currentYear = new Date().getFullYear();
|
|
||||||
|
|
||||||
return (
|
|
||||||
<footer className="border-t mt-16 bg-background">
|
|
||||||
<div className="w-full max-w-7xl mx-auto px-4 py-8">
|
|
||||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-8">
|
|
||||||
{/* About */}
|
|
||||||
<div>
|
|
||||||
<h3 className="font-semibold mb-3">Units UI</h3>
|
|
||||||
<p className="text-sm text-muted-foreground">
|
|
||||||
A spectacular unit conversion app supporting 23 measurement categories
|
|
||||||
with 187 units. Built with Next.js 16, TypeScript, and Tailwind CSS 4
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Features */}
|
|
||||||
<div>
|
|
||||||
<h3 className="font-semibold mb-3">Features</h3>
|
|
||||||
<ul className="space-y-2 text-sm text-muted-foreground">
|
|
||||||
<li>• Real-time bidirectional conversion</li>
|
|
||||||
<li>• Fuzzy search across all units</li>
|
|
||||||
<li>• Dark mode support</li>
|
|
||||||
<li>• Conversion history</li>
|
|
||||||
<li>• Keyboard shortcuts</li>
|
|
||||||
<li>• Copy & favorite units</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Links */}
|
|
||||||
<div>
|
|
||||||
<h3 className="font-semibold mb-3">Quick Links</h3>
|
|
||||||
<ul className="space-y-2 text-sm">
|
|
||||||
<li>
|
|
||||||
<Link
|
|
||||||
href="/"
|
|
||||||
className="text-muted-foreground hover:text-foreground transition-colors flex items-center gap-2"
|
|
||||||
>
|
|
||||||
Back to Kit Home
|
|
||||||
</Link>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<a
|
|
||||||
href="https://github.com/valknarness/units-ui"
|
|
||||||
target="_blank"
|
|
||||||
rel="noopener noreferrer"
|
|
||||||
className="text-muted-foreground hover:text-foreground transition-colors flex items-center gap-2"
|
|
||||||
>
|
|
||||||
<Github className="h-4 w-4" />
|
|
||||||
GitHub Repository
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<a
|
|
||||||
href="https://github.com/convert-units/convert-units"
|
|
||||||
target="_blank"
|
|
||||||
rel="noopener noreferrer"
|
|
||||||
className="text-muted-foreground hover:text-foreground transition-colors flex items-center gap-2"
|
|
||||||
>
|
|
||||||
<Code2 className="h-4 w-4" />
|
|
||||||
convert-units Library
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Bottom Bar */}
|
|
||||||
<div className="mt-8 pt-8 border-t flex flex-col sm:flex-row justify-between items-center gap-4 text-sm text-muted-foreground">
|
|
||||||
<div className="flex items-center gap-1">
|
|
||||||
Made with{' '}
|
|
||||||
<Heart className="h-4 w-4 text-red-500 fill-red-500" />{' '}
|
|
||||||
using Next.js 16 & Tailwind CSS 4
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
© {currentYear} Units UI. All rights reserved
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</footer>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
Reference in New Issue
Block a user