From 3e89d2998588f8e35c524e523ba2ee853f0f6475 Mon Sep 17 00:00:00 2001 From: Maze Winther Date: Mon, 20 Apr 2026 11:31:17 +0200 Subject: refactor: restructure files to their domains, new preview overlay system, and dep graph --- apps/web/src/guides/definitions/custom.tsx | 24 ++ apps/web/src/guides/definitions/grid.tsx | 125 ++++++++ apps/web/src/guides/definitions/platforms.tsx | 65 +++++ apps/web/src/guides/definitions/tiktok-layout.tsx | 335 ++++++++++++++++++++++ 4 files changed, 549 insertions(+) create mode 100644 apps/web/src/guides/definitions/custom.tsx create mode 100644 apps/web/src/guides/definitions/grid.tsx create mode 100644 apps/web/src/guides/definitions/platforms.tsx create mode 100644 apps/web/src/guides/definitions/tiktok-layout.tsx (limited to 'apps/web/src/guides/definitions') diff --git a/apps/web/src/guides/definitions/custom.tsx b/apps/web/src/guides/definitions/custom.tsx new file mode 100644 index 00000000..a5bede0b --- /dev/null +++ b/apps/web/src/guides/definitions/custom.tsx @@ -0,0 +1,24 @@ +import { PlusSignIcon, RulerIcon } from "@hugeicons/core-free-icons"; +import { HugeiconsIcon } from "@hugeicons/react"; +import { Button } from "@/components/ui/button"; +import type { GuideDefinition } from "@/guides/types"; + +function CustomGuideOptions() { + return ( +
+ +
+ ); +} + +export const customGuide = { + id: "custom", + label: "Custom", + renderPreview: () => , + renderTriggerIcon: () => , + renderOverlay: () => null, + renderOptions: () => , +} as const satisfies GuideDefinition; diff --git a/apps/web/src/guides/definitions/grid.tsx b/apps/web/src/guides/definitions/grid.tsx new file mode 100644 index 00000000..7df6425d --- /dev/null +++ b/apps/web/src/guides/definitions/grid.tsx @@ -0,0 +1,125 @@ +import { + GridTableIcon, + LayoutThreeColumnIcon, + LayoutThreeRowIcon, +} from "@hugeicons/core-free-icons"; +import { HugeiconsIcon } from "@hugeicons/react"; +import { NumberField } from "@/components/ui/number-field"; +import { + GRID_MIN, + GRID_MAX, + DEFAULT_GRID_CONFIG, +} from "@/guides/grid"; +import { usePreviewStore } from "@/preview/preview-store"; +import { clampRound } from "@/utils/math"; +import { cn } from "@/utils/ui"; +import type { GuideDefinition } from "@/guides/types"; + +function GridLines({ + rows, + cols, + color, +}: { + rows: number; + cols: number; + color: string; +}) { + const verticals = Array.from( + { length: cols - 1 }, + (_, i) => ((i + 1) / cols) * 100, + ); + const horizontals = Array.from( + { length: rows - 1 }, + (_, i) => ((i + 1) / rows) * 100, + ); + + return ( + <> + {verticals.map((pct) => ( +
+ ))} + {horizontals.map((pct) => ( +
+ ))} + + ); +} + +function GridGuidePreview() { + return ( +
+ +
+ ); +} + +function GridGuideOverlay() { + const { rows, cols } = usePreviewStore((s) => s.gridConfig); + + return ( +
+ +
+ ); +} + +function GridGuideOptions() { + const rows = usePreviewStore((s) => s.gridConfig.rows); + const cols = usePreviewStore((s) => s.gridConfig.cols); + const setGridConfig = usePreviewStore((s) => s.setGridConfig); + + const clampGridValue = (value: number) => + clampRound({ value, min: GRID_MIN, max: GRID_MAX }); + + return ( +
+ } + value={rows} + min={GRID_MIN} + max={GRID_MAX} + isDefault={rows === DEFAULT_GRID_CONFIG.rows} + onReset={() => setGridConfig({ rows: DEFAULT_GRID_CONFIG.rows })} + onScrub={(value) => setGridConfig({ rows: clampGridValue(value) })} + onChange={(event) => { + const parsed = Number.parseInt(event.target.value, 10); + if (!Number.isNaN(parsed)) + setGridConfig({ rows: clampGridValue(parsed) }); + }} + className="flex-1" + /> + } + value={cols} + min={GRID_MIN} + max={GRID_MAX} + isDefault={cols === DEFAULT_GRID_CONFIG.cols} + onReset={() => setGridConfig({ cols: DEFAULT_GRID_CONFIG.cols })} + onScrub={(value) => setGridConfig({ cols: clampGridValue(value) })} + onChange={(event) => { + const parsed = Number.parseInt(event.target.value, 10); + if (!Number.isNaN(parsed)) + setGridConfig({ cols: clampGridValue(parsed) }); + }} + className="flex-1" + /> +
+ ); +} + +export const gridGuide = { + id: "grid", + label: "Grid", + renderPreview: () => , + renderTriggerIcon: () => , + renderOverlay: () => , + renderOptions: () => , +} as const satisfies GuideDefinition; diff --git a/apps/web/src/guides/definitions/platforms.tsx b/apps/web/src/guides/definitions/platforms.tsx new file mode 100644 index 00000000..b2471a74 --- /dev/null +++ b/apps/web/src/guides/definitions/platforms.tsx @@ -0,0 +1,65 @@ +import Image from "next/image"; +import type { GuideDefinition } from "@/guides/types"; +import { TikTokLayout } from "./tiktok-layout"; + +function PlatformLogo({ + domain, + className = "size-4", +}: { + domain: string; + className?: string; +}) { + return ( + + ); +} + +function PlatformGuidePreview({ domain }: { domain: string }) { + return ; +} + +function platformGuide({ + id, + label, + domain, +}: { + id: string; + label: string; + domain: string; +}): GuideDefinition { + return { + id, + label, + renderPreview: () => , + renderTriggerIcon: () => , + renderOverlay: () => null, + }; +} + +export const tiktokGuide: GuideDefinition = { + ...platformGuide({ id: "tiktok", label: "TikTok", domain: "tiktok.com" }), + renderOverlay: () => , +}; +export const igReelsGuide = platformGuide({ + id: "ig-reels", + label: "Reels", + domain: "instagram.com", +}); +export const ytShortsGuide = platformGuide({ + id: "yt-shorts", + label: "Shorts", + domain: "youtube.com", +}); +export const spotlightGuide = platformGuide({ + id: "spotlight", + label: "Spotlight", + domain: "snapchat.com", +}); diff --git a/apps/web/src/guides/definitions/tiktok-layout.tsx b/apps/web/src/guides/definitions/tiktok-layout.tsx new file mode 100644 index 00000000..b7513bac --- /dev/null +++ b/apps/web/src/guides/definitions/tiktok-layout.tsx @@ -0,0 +1,335 @@ +export function TikTokLayout() { + return ( + + TikTok Layout + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + ); +} -- cgit v1.3.1