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="max-w-7xl mx-auto px-8 space-y-8">
|
||||
<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">
|
||||
Interactive color manipulation and analysis tool
|
||||
</p>
|
||||
|
||||
@@ -24,7 +24,7 @@ export default function Hero() {
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.8 }}
|
||||
>
|
||||
<Logo size={160} />
|
||||
<Logo size={130} />
|
||||
</motion.div>
|
||||
|
||||
{/* 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>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-6 pt-0">
|
||||
<div className="flex gap-2 items-end">
|
||||
<div className="flex-1">
|
||||
{/* Input row, stacks vertically on mobile, horizontal on desktop */}
|
||||
<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>
|
||||
<Input
|
||||
type="text"
|
||||
@@ -157,10 +159,11 @@ export default function MainConverter() {
|
||||
value={inputValue}
|
||||
onChange={(e) => setInputValue(e.target.value)}
|
||||
placeholder="Enter value"
|
||||
className="text-lg"
|
||||
className={cn("text-lg", "w-full", "max-w-full")}
|
||||
/>
|
||||
</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>
|
||||
<Select
|
||||
value={selectedUnit}
|
||||
@@ -173,16 +176,18 @@ export default function MainConverter() {
|
||||
))}
|
||||
</Select>
|
||||
</div>
|
||||
{/* Swap Button */}
|
||||
<Button
|
||||
variant="outline"
|
||||
size="icon"
|
||||
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"
|
||||
>
|
||||
<ArrowLeftRight className="h-4 w-4" />
|
||||
</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>
|
||||
<Select
|
||||
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