@tomako/tools-runtime 0.1.0

package/src/features/tools/social-profile-kit/widget/profile-preview/profile-preview.tsx

@@ -0,0 +1,348 @@
+"use client";
+
+import {
+    Check,
+    Edit3
+} from "lucide-react";
+
+import { Button } from "@tomako/ui/button";
+import {
+    SOCIAL_PROFILE_PLATFORM_SPECS,
+    type SocialProfilePlatformSpec,
+} from "../../../../../lib/tools/social-profile-kit.constants";
+import type { PlatformGenerationStatus } from "../../../../../lib/tools/social-profile-kit.generation";
+import type {
+    SocialPlatformProfile,
+    SocialProfileMode,
+    SocialProfilePlatform,
+    SocialProfileTheme,
+} from "../../../../../lib/tools/social-profile-kit.schema";
+import { cn } from "@tomako/ui/cn";
+
+import type {
+    EditableTextField,
+    EditingProfileText,
+    ProfilePreviewDevice,
+    SelectedProfileElement,
+    SocialProfileKitCopy,
+} from "../types";
+
+import { BlueskyProfilePreview } from "./bluesky-preview";
+import { FacebookProfilePreview } from "./facebook-preview";
+import { InstagramProfilePreview } from "./instagram-preview";
+import {
+    LinkedInCompanyProfilePreview,
+    LinkedInProfilePreview,
+} from "./linkedin-preview";
+import {
+    Avatar,
+    Banner,
+    EditableText,
+    hasBanner,
+    type PlatformPreviewProps,
+} from "./shared";
+import { ThreadsProfilePreview } from "./threads-preview";
+import { TikTokProfilePreview } from "./tiktok-preview";
+import { XProfilePreview } from "./x-preview";
+import { YouTubeProfilePreview } from "./youtube-preview";
+
+export function ProfilePreview({
+  copy,
+  platform,
+  profile,
+  device,
+  theme,
+  mode,
+  platformStatus,
+  selected,
+  editing,
+  onRetryBanner,
+  onSelect,
+  onStartEdit,
+  onStopEdit,
+  onTextChange,
+  onCopyText,
+}: {
+  copy: SocialProfileKitCopy;
+  platform: SocialProfilePlatform;
+  profile: SocialPlatformProfile;
+  device: ProfilePreviewDevice;
+  theme: SocialProfileTheme;
+  mode: SocialProfileMode;
+  platformStatus: PlatformGenerationStatus;
+  selected: SelectedProfileElement | null;
+  editing: EditingProfileText;
+  onRetryBanner: () => void;
+  onSelect: (element: SelectedProfileElement) => void;
+  onStartEdit: (field: EditableTextField, device: ProfilePreviewDevice) => void;
+  onStopEdit: () => void;
+  onTextChange: (field: EditableTextField, value: string) => void;
+  onCopyText: (field: EditableTextField, value: string) => void;
+}) {
+  const spec: SocialProfilePlatformSpec = SOCIAL_PROFILE_PLATFORM_SPECS[platform];
+  const compact = device === "mobile";
+  const dark = theme === "dark";
+  const noBanner = !hasBanner(platform, profile);
+
+  if (platform === "x") {
+    return (
+      <XProfilePreview
+        copy={copy}
+        profile={profile}
+        device={device}
+        theme={theme}
+        selected={selected}
+        editing={editing}
+        platformStatus={platformStatus}
+        onRetryBanner={onRetryBanner}
+        onSelect={onSelect}
+        onStartEdit={onStartEdit}
+        onStopEdit={onStopEdit}
+        onTextChange={onTextChange}
+        onCopyText={onCopyText}
+      />
+    );
+  }
+
+  const previewProps: PlatformPreviewProps = {
+    copy,
+    profile,
+    device,
+    theme,
+    selected,
+    editing,
+    mode,
+    platformStatus,
+    onRetryBanner,
+    onSelect,
+    onStartEdit,
+    onStopEdit,
+    onTextChange,
+    onCopyText,
+  };
+
+  if (platform === "linkedin") {
+    return <LinkedInProfilePreview {...previewProps} />;
+  }
+
+  if (platform === "bluesky") {
+    return <BlueskyProfilePreview {...previewProps} />;
+  }
+
+  if (platform === "threads") {
+    return <ThreadsProfilePreview {...previewProps} />;
+  }
+
+  if (platform === "linkedin-company") {
+    return <LinkedInCompanyProfilePreview {...previewProps} />;
+  }
+
+  if (platform === "instagram") {
+    return <InstagramProfilePreview {...previewProps} />;
+  }
+
+  if (platform === "tiktok") {
+    return <TikTokProfilePreview {...previewProps} />;
+  }
+
+  if (platform === "youtube") {
+    return <YouTubeProfilePreview {...previewProps} />;
+  }
+
+  if (platform === "facebook") {
+    return <FacebookProfilePreview {...previewProps} />;
+  }
+
+  return (
+    <article
+      className={cn(
+        "overflow-hidden rounded-2xl border shadow-sm",
+        compact ? "w-[210px]" : "w-[360px]",
+        dark ? "border-slate-700 bg-slate-950 text-slate-50" : "bg-card",
+      )}
+      onClick={() => onSelect({ kind: "text", field: "displayName" })}
+    >
+      <div className="flex items-center justify-between border-b px-3 py-2 text-[11px] text-muted-foreground">
+        <span>{copy.canvas[device]}</span>
+        <span>{copy.platforms[platform]}</span>
+      </div>
+
+      {noBanner ? (
+        <div className="flex items-center gap-3 px-4 pt-4">
+          <Avatar
+            profile={profile}
+            device={device}
+            selected={selected}
+            onSelect={onSelect}
+          />
+          <div className="min-w-0 flex-1">
+            <EditableText
+              field="displayName"
+              device={device}
+              value={profile.displayName}
+              selected={selected}
+              editing={editing}
+              copy={copy}
+              className="text-sm font-semibold"
+              onSelect={onSelect}
+              onStartEdit={onStartEdit}
+              onStopEdit={onStopEdit}
+              onChange={onTextChange}
+              onCopy={onCopyText}
+            />
+            <EditableText
+              field="username"
+              device={device}
+              value={profile.username}
+              selected={selected}
+              editing={editing}
+              copy={copy}
+              className="mt-1 text-xs text-muted-foreground"
+              onSelect={onSelect}
+              onStartEdit={onStartEdit}
+              onStopEdit={onStopEdit}
+              onChange={onTextChange}
+              onCopy={onCopyText}
+            />
+          </div>
+        </div>
+      ) : (
+        <>
+          <div className="px-3 pt-3">
+            <Banner
+              copy={copy}
+              platform={platform}
+              profile={profile}
+              device={device}
+              platformStatus={platformStatus}
+              selected={selected}
+              onRetryBanner={onRetryBanner}
+              onSelect={onSelect}
+            />
+          </div>
+          <div className="-mt-8 px-4">
+            <Avatar
+              profile={profile}
+              device={device}
+              selected={selected}
+              onSelect={onSelect}
+            />
+          </div>
+        </>
+      )}
+
+      <div className="flex flex-col gap-2 px-4 py-4">
+        {!noBanner ? (
+          <>
+            <EditableText
+              field="displayName"
+              device={device}
+              value={profile.displayName}
+              selected={selected}
+              editing={editing}
+              copy={copy}
+              className="text-sm font-semibold"
+              onSelect={onSelect}
+              onStartEdit={onStartEdit}
+              onStopEdit={onStopEdit}
+              onChange={onTextChange}
+              onCopy={onCopyText}
+            />
+            <EditableText
+              field="username"
+              device={device}
+              value={profile.username}
+              selected={selected}
+              editing={editing}
+              copy={copy}
+              className="text-xs text-muted-foreground"
+              onSelect={onSelect}
+              onStartEdit={onStartEdit}
+              onStopEdit={onStopEdit}
+              onChange={onTextChange}
+              onCopy={onCopyText}
+            />
+          </>
+        ) : null}
+        <EditableText
+          field="headline"
+          device={device}
+          value={profile.headline}
+          selected={selected}
+          editing={editing}
+          copy={copy}
+          className="text-xs font-medium"
+          onSelect={onSelect}
+          onStartEdit={onStartEdit}
+          onStopEdit={onStopEdit}
+          onChange={onTextChange}
+          onCopy={onCopyText}
+        />
+        <EditableText
+          field="bio"
+          device={device}
+          value={profile.bio}
+          selected={selected}
+          editing={editing}
+          copy={copy}
+          className="whitespace-pre-line text-xs leading-relaxed"
+          onSelect={onSelect}
+          onStartEdit={onStartEdit}
+          onStopEdit={onStopEdit}
+          onChange={onTextChange}
+          onCopy={onCopyText}
+        />
+        <EditableText
+          field="description"
+          device={device}
+          value={profile.description}
+          selected={selected}
+          editing={editing}
+          copy={copy}
+          className="text-xs leading-relaxed text-muted-foreground"
+          onSelect={onSelect}
+          onStartEdit={onStartEdit}
+          onStopEdit={onStopEdit}
+          onChange={onTextChange}
+          onCopy={onCopyText}
+        />
+
+        <div className="mt-2 flex gap-2">
+          <Button size="sm" type="button">
+            <Check className="size-3" />
+            {copy.actions.follow}
+          </Button>
+          <Button size="sm" variant="outline" type="button">
+            <Edit3 className="size-3" />
+            {copy.actions.message}
+          </Button>
+        </div>
+
+        <div
+          className={cn(
+            "mt-3 grid gap-2",
+            compact ? "grid-cols-2" : "grid-cols-3",
+          )}
+        >
+          {Array.from({ length: compact ? 4 : 6 }).map((_, index) => (
+            <div
+              key={index}
+              className="aspect-square rounded-lg bg-secondary"
+              style={{
+                background:
+                  index % 2 === 0
+                    ? `linear-gradient(135deg, ${profile.colors[1]}, ${profile.colors[2]})`
+                    : undefined,
+              }}
+            />
+          ))}
+        </div>
+
+        <p className="text-[10px] text-muted-foreground">
+          {spec.avatar.width}x{spec.avatar.height}
+          {spec.banner?.width ? ` / ${spec.banner.width}x${spec.banner.height}` : ""}
+        </p>
+      </div>
+    </article>
+  );
+}