Create stub for a converter

app/color-converter/converter.tsx

@@ -0,0 +1,96 @@
+'use client';
+
+import { observer } from 'mobx-react-lite';
+import { color } from '@/app/color-converter/store';
+
+export const Converter = observer(() => {
+ return (
+ <main className="m-12 flex gap-4">
+ <table>
+ <tbody>
+ <tr>
+ <td>
+ <span className="uppercase">
+ Hex:
+ <sup>
+ <a
+ className="text-blue-400 hover:text-blue-500"
+ target="_blank"
+ href="https://developer.mozilla.org/en-US/docs/Web/CSS/hex-color"
+ >
+ MDN
+ </a>
+ </sup>
+ </span>
+ </td>
+ <td>
+ #
+ <input
+ className="w-24 text-slate-500"
+ type="text"
+ value={color.hex}
+ onChange={(event) => color.setHex(event.target.value)}
+ maxLength={8}
+ pattern="^#?([a-fA-F0-9]{6}|[a-fA-F0-9]{3})$"
+ />
+ </td>
+ <td rowSpan={2} className="pl-10">
+ <div
+ className="w-24 h-24 rounded"
+ style={{
+ backgroundColor: '#' + color.hex,
+ }}
+ ></div>
+ </td>
+ </tr>
+ <tr>
+ <td className="pr-10">
+ <span className="uppercase">RGBA: </span>
+ </td>
+ <td>
+ <div>
+ rgb(
+ <input
+ className="w-10 text-right text-slate-500"
+ type="text"
+ value={color.r}
+ onChange={(event) => color.setR(event.target.value)}
+ maxLength={8}
+ pattern="^#?([a-fA-F0-9]{6}|[a-fA-F0-9]{3})$"
+ />
+ ,
+ <input
+ className="w-10 text-right text-slate-500"
+ type="text"
+ value={color.g}
+ onChange={(event) => color.setG(event.target.value)}
+ maxLength={8}
+ pattern="^#?([a-fA-F0-9]{6}|[a-fA-F0-9]{3})$"
+ />
+ ,
+ <input
+ className="w-10 text-right text-slate-500"
+ type="text"
+ value={color.b}
+ onChange={(event) => color.setB(event.target.value)}
+ maxLength={8}
+ pattern="^#?([a-fA-F0-9]{6}|[a-fA-F0-9]{3})$"
+ />
+ ,
+ <input
+ className="w-10 text-right text-slate-500"
+ type="text"
+ value={color.a}
+ onChange={(event) => color.setA(event.target.value)}
+ maxLength={8}
+ pattern="^#?([a-fA-F0-9]{6}|[a-fA-F0-9]{3})$"
+ />
+ )
+ </div>
+ </td>
+ </tr>
+ </tbody>
+ </table>
+ </main>
+ );
+});

app/color-converter/page.tsx

@@ -0,0 +1,5 @@
+import { Converter } from '@/app/color-converter/converter';
+
+export default function Page() {
+ return <Converter />;
+}

app/color-converter/store.ts

@@ -0,0 +1,52 @@
+import { makeAutoObservable } from 'mobx';
+import tinycolor from 'tinycolor2';
+
+const INITIAL_COLOR = tinycolor('deadbeef');
+
+export class ColorStore {
+ hex = INITIAL_COLOR.toHex8();
+
+ r = INITIAL_COLOR.toRgb().r.toString();
+ g = INITIAL_COLOR.toRgb().g.toString();
+ b = INITIAL_COLOR.toRgb().b.toString();
+ a = INITIAL_COLOR.toRgb().a.toString();
+
+ setHex(hex: string) {
+ this.hex = hex;
+
+ const color = tinycolor(hex);
+ const rgb = color.toRgb();
+
+ this.r = rgb.r.toString();
+ this.g = rgb.g.toString();
+ this.b = rgb.b.toString();
+ this.a = rgb.a.toString();
+ }
+
+ setR(r: string) {
+ this.r = r;
+ const color = tinycolor({ r: Number(r), g: Number(this.g), b: Number(this.b), a: Number(this.a) });
+ this.hex = this.a == '1' ? color.toHex() : color.toHex8();
+ }
+ setG(g: string) {
+ this.g = g;
+ const color = tinycolor({ r: Number(this.r), g: Number(g), b: Number(this.b), a: Number(this.a) });
+ this.hex = this.a == '1' ? color.toHex() : color.toHex8();
+ }
+ setB(b: string) {
+ this.b = b;
+ const color = tinycolor({ r: Number(this.r), g: Number(this.g), b: Number(b), a: Number(this.a) });
+ this.hex = this.a == '1' ? color.toHex() : color.toHex8();
+ }
+ setA(a: string) {
+ this.a = a;
+ const color = tinycolor({ r: Number(this.r), g: Number(this.g), b: Number(this.b), a: Number(a) });
+ this.hex = this.a == '1' ? color.toHex() : color.toHex8();
+ }
+
+ constructor() {
+ makeAutoObservable(this);
+ }
+}
+
+export const color = new ColorStore();

app/layout.tsx

@@ -23,7 +23,7 @@ export default function RootLayout({
  <a href="htmlcolors">HTML Colors</a>
  </li>
  <li>
- <span className="text-slate-300">Color Converter</span>
+ <a href="color-converter">Color Converter</a>
  </li>
  <li className="ml-auto text-sm underline">
  <a href="https://github.com/hahahackers/color-buddy">View source code on GitHub</a>

package.json

@@ -9,10 +9,11 @@
  "lint": "next lint"
  },
  "dependencies": {
+ "mobx": "^6.12.0",
+ "mobx-react-lite": "^4.0.5",
  "next": "14.1.0",
  "react": "^18",
  "react-dom": "^18",
- "tinycolor": "^0.0.1",
  "tinycolor2": "^1.6.0"
  },
  "devDependencies": {