Custom panel header

apps/web/src/components/appContent.tsx

@@ -4,6 +4,7 @@ import {
   ResizablePanelGroup,
 } from "@/components/ui/resizable";
 import { SelectToolPanel } from "./panels/selectToolPanel";
+import { ColorsPanel } from "./panels/colorsPanel";
 
 const LeftContent = () => {
   return (
@@ -13,7 +14,7 @@ const LeftContent = () => {
       </ResizablePanel>
       <ResizableHandle />
       <ResizablePanel defaultSize={30}>
-        <div className="p-2">Colors</div>
+        <ColorsPanel />
       </ResizablePanel>
     </ResizablePanelGroup>
   );

apps/web/src/components/icon.tsx

@@ -28,7 +28,6 @@ export const Icon = (props: {
   type: IconType;
   size: IconSize;
   className?: string;
-  // onClick
 }) => {
   const { type, size, className } = props;
   return renderLucideIcon(type, size, className);

apps/web/src/components/panels/colorsPanel.tsx

@@ -0,0 +1,12 @@
+import { translations } from "@/translations";
+import { PanelHeader } from "./panelHeader";
+
+export const ColorsPanel = () => {
+  return (
+    <div className="flex flex-col gap-medium">
+      <PanelHeader title={translations.colors} />
+      <div className="flex flex-wrap flex-row gap-small p-small"></div>
+    </div>
+  );
+};
+

apps/web/src/components/panels/panelHeader.tsx

@@ -1,9 +1,5 @@
 export const PanelHeader = (props: { title: string }) => {
   const { title } = props;
-  return (
-    <div>
-      <h2>{title}</h2>
-    </div>
-  );
+  return <div className="bg-secondary p-small">{title}</div>;
 };
 

apps/web/src/components/panels/selectToolPanel.tsx

@@ -11,9 +11,9 @@ export const SelectToolPanel = () => {
     (state) => state
   );
   return (
-    <div className="p-2 flex flex-col gap-2">
+    <div className="flex flex-col gap-medium">
       <PanelHeader title={translations.tools} />
-      <div className="flex flex-wrap flex-row gap-1">
+      <div className="flex flex-wrap flex-row gap-small p-small">
         {tools.map((tool) => (
           <IconButton
             className={selectedTool === tool ? "bg-accent" : ""}

apps/web/src/translations.ts

@@ -1,4 +1,5 @@
 export const translations = {
   tools: "Tools",
+  colors: "Colors",
 };
 

apps/web/tailwind.config.js

@@ -1,4 +1,13 @@
 /** @type {import('tailwindcss').Config} */
+
+const space = {
+  ["very-small"]: "0.125rem",
+  small: "0.25rem",
+  medium: "0.5rem",
+  huge: "1rem",
+};
+
+
 module.exports = {
   darkMode: ["class"],
   content: [
@@ -17,6 +26,9 @@ module.exports = {
       },
     },
     extend: {
+      gap: space,
+      margin: space,
+      padding: space,
       colors: {
         border: "hsl(var(--border))",
         input: "hsl(var(--input))",
@@ -74,4 +86,4 @@ module.exports = {
     },
   },
   plugins: [require("tailwindcss-animate")],
-}
+};