feat: layout guide for tiktok

1 files changed, 27 insertions, 0 deletions

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;

+}