1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
|
import Image from "next/image";
import type { GuideDefinition } from "@/lib/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",
});
|
