1 files changed, 65 insertions, 0 deletions
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 (
+		<Image
+			src={`https://cdn.brandfetch.io/${domain}/w/64/h/64`}
+			alt=""
+			width={18}
+			height={18}
+			className={className}
+			draggable={false}
+			unoptimized
+		/>
+	);
+}
+
+function PlatformGuidePreview({ domain }: { domain: string }) {
+	return <PlatformLogo domain={domain} />;
+}
+
+function platformGuide({
+	id,
+	label,
+	domain,
+}: {
+	id: string;
+	label: string;
+	domain: string;
+}): GuideDefinition {
+	return {
+		id,
+		label,
+		renderPreview: () => <PlatformGuidePreview domain={domain} />,
+		renderTriggerIcon: () => <PlatformLogo domain={domain} />,
+		renderOverlay: () => null,
+	};
+}
+
+export const tiktokGuide: GuideDefinition = {
+	...platformGuide({ id: "tiktok", label: "TikTok", domain: "tiktok.com" }),
+	renderOverlay: () => <TikTokLayout />,
+};
+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",
+});