Update other panels

apps/web/src/components/appContent.tsx

@@ -5,6 +5,9 @@ import {
 } from "@/components/ui/resizable";
 import { SelectToolPanel } from "./panels/selectToolPanel";
 import { ColorsPanel } from "./panels/colorsPanel";
+import { LayersPanel } from "./panels/layersPanel";
+import { HistoryPanel } from "./panels/historyPanel";
+import { MetadataPanel } from "./panels/metadataPanel";
 
 const LeftContent = () => {
   return (
@@ -28,15 +31,15 @@ const RightContent = () => {
   return (
     <ResizablePanelGroup direction="vertical">
       <ResizablePanel>
-        <div className="p-2">Layers</div>
+        <LayersPanel />
       </ResizablePanel>
       <ResizableHandle />
       <ResizablePanel>
-        <div className="p-2">History</div>
+        <HistoryPanel />
       </ResizablePanel>
       <ResizableHandle />
       <ResizablePanel>
-        <div className="p-2">Metadata</div>
+        <MetadataPanel />
       </ResizablePanel>
     </ResizablePanelGroup>
   );

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

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

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

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

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

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

apps/web/src/translations.ts

@@ -1,5 +1,8 @@
 export const translations = {
   tools: "Tools",
   colors: "Colors",
+  layers: "Layers",
+  history: "History",
+  metadata: "Metadata",
 };