matt/color-picker
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Better mobile layout

Browse Source
This commit is contained in:
Matt
2025-02-11 10:15:35 -05:00
parent f0757dcbae
commit 7defccb009
3 changed files with 36 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
src/App.tsx
View File

@@ -1,4 +1,5 @@
import { ColorPicker } from './components/ColorPicker'
import { ColorPickerVertical } from './components/ColorPickerVertical'
function App() {
return (

56
src/components/ColorPicker.tsx
View File

@@ -139,27 +139,26 @@ export function ColorPicker() {
}
return (
<div className="w-full max-w-7xl mx-auto p-6">
<div className="text-center space-y-2 mb-8">
<div className="w-full max-w-7xl mx-auto p-4 md:p-2 lg:p-6 !pt-6">
<div className="text-center space-y-2 mb-4 lg:mb-6">
<h1 className="text-4xl font-bold tracking-tight text-gray-900">Color Picker</h1>
<p className="text-lg text-gray-600">Find and convert colors in different formats</p>
</div>
<div className="grid grid-cols-1 lg:grid-cols-[1fr_2fr] gap-8 min-h-[600px]">
<div className="flex flex-col h-full gap-4 md:gap-2 lg:gap-6 sm:grid sm:grid-cols-[1fr_2fr]">
{/* Left Column: Color Picker and Input */}
<div className="h-full">
<div className="bg-white rounded-xl shadow-sm ring-1 ring-gray-900/5 p-6 h-full">
<div className="space-y-6">
{/* Color Preview */}
<div className="flex flex-col items-center gap-4">
<div className="flex flex-row gap-4 sm:flex-col sm:gap-6 justify-between">
{/* Color Preview and Picker */}
<div className="flex flex-col items-center justify-center gap-4">
<div
className="w-32 h-32 rounded-lg shadow-lg ring-1 ring-gray-900/5"
className="mt-1 sm:mt-0 w-32 h-32 rounded-lg shadow-lg ring-1 ring-gray-900/5"
style={{ backgroundColor: color }}
/>
<div className="text-sm text-gray-600 text-center">
<div className="flex items-center justify-center gap-1.5">
<SwatchIcon className="h-4 w-4" />
<div className="flex items-center justify-center gap-1.5 ">
<SwatchIcon className="h-4 w-4 hidden sm:block" />
{closestTailwind.isExactMatch ? (
<span>Tailwind: <span className="font-medium text-gray-900">{closestTailwind.name}</span></span>
) : (
@@ -167,15 +166,26 @@ export function ColorPicker() {
)}
</div>
</div>
</div>
{/* Color Picker */}
<div className="w-full max-w-[200px] mx-auto">
<HexColorPicker color={color} onChange={setColor} />
{/* Color Picker */}
<div className="sm:hidden">
<HexColorPicker
color={color}
onChange={setColor}
style={{ width: '150px', height: '150px' }}
/>
</div>
<div className="hidden sm:block">
<HexColorPicker
color={color}
onChange={setColor}
style={{ width: '200px', height: '200px' }}
/>
</div>
</div>
{/* Color Format Inputs */}
<div className="space-y-3">
<div className="space-y-2 sm:space-y-3">
<div>
<label htmlFor="hex-value" className="block text-sm font-medium text-gray-700 mb-1">
HEX
@@ -186,7 +196,7 @@ export function ColorPicker() {
id="hex-value"
value={colorValues.hex}
onChange={(e) => handleInputChange(e.target.value, 'hex')}
className="block w-full rounded-md border-0 py-1.5 px-3 pr-10 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6"
className="block w-full text-sm sm:text-baserounded-md border-0 py-1.5 px-3 pr-10 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6"
/>
<CopyButton value={colorValues.hex} fieldId="hex" />
</div>
@@ -202,7 +212,7 @@ export function ColorPicker() {
id="rgb-value"
value={colorValues.rgb}
onChange={(e) => handleInputChange(e.target.value, 'rgb')}
className="block w-full rounded-md border-0 py-1.5 px-3 pr-10 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6"
className="block w-full text-sm sm:text-base rounded-md border-0 py-1.5 px-3 pr-10 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6"
/>
<CopyButton value={colorValues.rgb} fieldId="rgb" />
</div>
@@ -218,7 +228,7 @@ export function ColorPicker() {
id="hsl-value"
value={colorValues.hsl}
onChange={(e) => handleInputChange(e.target.value, 'hsl')}
className="block w-full rounded-md border-0 py-1.5 px-3 pr-10 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6"
className="block w-full text-sm sm:text-base rounded-md border-0 py-1.5 px-3 pr-10 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6"
/>
<CopyButton value={colorValues.hsl} fieldId="hsl" />
</div>
@@ -234,7 +244,7 @@ export function ColorPicker() {
id="hsb-value"
value={colorValues.hsb}
onChange={(e) => handleInputChange(e.target.value, 'hsb')}
className="block w-full rounded-md border-0 py-1.5 px-3 pr-10 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6"
className="block w-full text-sm sm:text-base rounded-md border-0 py-1.5 px-3 pr-10 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6"
/>
<CopyButton value={colorValues.hsb} fieldId="hsb" />
</div>
@@ -250,7 +260,7 @@ export function ColorPicker() {
id="oklch-value"
value={colorValues.oklch}
onChange={(e) => handleInputChange(e.target.value, 'oklch')}
className="block w-full rounded-md border-0 py-1.5 px-3 pr-10 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6"
className="block w-full text-sm sm:text-base rounded-md border-0 py-1.5 px-3 pr-10 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6"
/>
<CopyButton value={colorValues.oklch} fieldId="oklch" />
</div>
@@ -266,7 +276,7 @@ export function ColorPicker() {
id="tailwind-value"
value={colorValues.tailwind}
readOnly
className="block w-full rounded-md border-0 py-1.5 px-3 pr-10 text-gray-900 bg-gray-50 shadow-sm ring-1 ring-inset ring-gray-300 sm:text-sm sm:leading-6"
className="block w-full text-sm sm:text-base rounded-md border-0 py-1.5 px-3 pr-10 text-gray-900 bg-gray-50 shadow-sm ring-1 ring-inset ring-gray-300 sm:text-sm sm:leading-6"
/>
<CopyButton value={colorValues.tailwind} fieldId="tailwind" />
</div>
@@ -277,8 +287,8 @@ export function ColorPicker() {
</div>
{/* Right Column: Tailwind Colors */}
<div className="h-full">
<div className="bg-white rounded-xl shadow-sm ring-1 ring-gray-900/5 p-4 h-full">
<div className="h-full lg:max-w-[65vw] max-w-full">
<div className="bg-white rounded-xl shadow-sm ring-1 ring-gray-900/5 p-2 sm:p-4 h-full">
<TailwindColors
onColorSelect={(selectedColor) => {
// Always set the hex color for the color picker

7
src/components/TailwindColors.tsx
View File

@@ -46,16 +46,13 @@ export function TailwindColors({ onColorSelect, selectedColor }: TailwindColorsP
}
return (
<div className="h-full flex flex-col">
<div className="text-sm font-medium text-gray-500 mb-2 px-2">
Tailwind Color Reference
</div>
<div className="h-full flex flex-col w-[90vw] sm:w-full">
<div className="flex-1 overflow-x-auto overflow-y-auto">
<div className="grid grid-cols-[auto_repeat(11,minmax(32px,1fr))] gap-1.5 p-2">
{/* Color rows */}
{orderedColors.map(colorName => (
<React.Fragment key={colorName}>
<div className="flex sticky left-0 z-10 bg-white text-sm font-medium items-center justify-end text-gray-900 py-1 pr-3 whitespace-nowrap border-r border-gray-100">
<div className="flex sticky left-0 z-10 bg-white text-sm md:text-xs lg:text-sm font-medium items-center justify-end text-gray-900 py-1 pr-3 whitespace-nowrap border-r border-gray-100">
{colorName}
</div>
{shades.map(shade => {