From 9ec5a022520aa3a2d1e18b4e3b4056f2ff5dcd35 Mon Sep 17 00:00:00 2001
From: Maze Winther <mazewinther@gmail.com>
Date: Mon, 4 Aug 2025 17:17:48 +0200
Subject: feat: layout guide for tiktok

---
 .../src/components/editor/layout-guide-overlay.tsx | 27 ++++++++++++++++++++++
 1 file changed, 27 insertions(+)
 create mode 100644 apps/web/src/components/editor/layout-guide-overlay.tsx

(limited to 'apps/web/src/components/editor/layout-guide-overlay.tsx')

diff --git a/apps/web/src/components/editor/layout-guide-overlay.tsx b/apps/web/src/components/editor/layout-guide-overlay.tsx
new file mode 100644
index 00000000..ff4cde57
--- /dev/null
+++ b/apps/web/src/components/editor/layout-guide-overlay.tsx
@@ -0,0 +1,27 @@
+"use client";
+
+import { useEditorStore } from "@/stores/editor-store";
+import Image from "next/image";
+
+function TikTokGuide() {
+  return (
+    <div className="absolute inset-0 pointer-events-none">
+      <Image
+        src="/platform-guides/tiktok-blueprint.png"
+        alt="TikTok layout guide"
+        className="absolute inset-0 w-full h-full object-contain"
+        draggable={false}
+        fill
+      />
+    </div>
+  );
+}
+
+export function LayoutGuideOverlay() {
+  const { layoutGuide } = useEditorStore();
+
+  if (layoutGuide.platform === null) return null;
+  if (layoutGuide.platform === "tiktok") return <TikTokGuide />;
+
+  return null;
+}
-- 
cgit v1.3.1