feat: init commit for setup monorepo

packages/ui/src/assets/styles/globals.css

@@ -0,0 +1,17 @@
+@import 'tailwindcss';
+
+@source "../../../src";
+
+@theme {
+  --color-brand-50: #f5f3fd; /* sangat terang, hampir lavender */
+  --color-brand-100: #e6dbfb;
+  --color-brand-200: #d0b6f8;
+  --color-brand-300: #b78ff5;
+  --color-brand-400: #9f64f1;
+  --color-brand-500: #7d39ed; /* warna utama purple */
+  --color-brand-600: #652ed9;
+  --color-brand-700: #4a23a5;
+  --color-brand-800: #321a7a;
+  --color-brand-900: #1b0f4a;
+  --color-brand-950: #0d0726; /* paling gelap */
+}

packages/ui/src/components/counter.tsx

@@ -0,0 +1,16 @@
+import React, { useState } from 'react';
+
+export const Counter: React.FC = () => {
+  const [count, setCount] = useState(0);
+
+  return (
+    <div>
+      <div className="bg-red-400 text-3xl font-bold underline">100</div>
+      <div className="mt-3 bg-brand-500 text-brand-800">sdsa</div>
+      <div className="text-5xl text-green-500">sada</div>
+      <button id="counter" type="button" onClick={() => setCount(count + 1)}>
+        {count}
+      </button>
+    </div>
+  );
+};

packages/ui/src/components/header.tsx

@@ -0,0 +1,13 @@
+import React from 'react';
+
+interface HeaderProps {
+  title: string;
+}
+
+export const Header: React.FC<HeaderProps> = ({ title }) => {
+  return (
+    <header id="header">
+      <h1>{title}</h1>
+    </header>
+  );
+};

packages/ui/src/components/index.ts

@@ -0,0 +1,2 @@
+export * from "./header";
+export * from "./counter";

packages/ui/src/index.ts

@@ -0,0 +1,2 @@
+// components
+export * from "./components";