@tomako/tools-runtime 0.1.0

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

@@ -0,0 +1,297 @@
+"use client";
+
+import {
+    ArrowLeft,
+    ChevronRight,
+    Link2,
+    MoreVertical,
+    Search,
+    Video
+} from "lucide-react";
+
+import { cn } from "@tomako/ui/cn";
+
+
+import {
+    BannerStatusOverlay,
+    EditableText,
+    avatarBackground,
+    bannerBackground,
+    imageTargetAttrs,
+    profileHost,
+    type PlatformPreviewProps
+} from "./shared";
+
+export function YouTubeProfilePreview(props: PlatformPreviewProps) {
+  const {
+    copy,
+    profile,
+    device,
+    theme,
+    selected,
+    editing,
+    platformStatus,
+    onRetryBanner,
+    onSelect,
+    onStartEdit,
+    onStopEdit,
+    onTextChange,
+    onCopyText,
+  } = props;
+  const compact = device === "mobile";
+  const dark = theme === "dark";
+  const surface = dark ? "bg-[#0f0f0f] text-white" : "bg-white text-[#0f0f0f]";
+  const border = dark ? "border-[#303030]" : "border-[#e5e5e5]";
+  const mutedSurface = dark ? "bg-[#272727]" : "bg-[#f2f2f2]";
+  const handle = profile.username.startsWith("@")
+    ? profile.username
+    : `@${profile.username}`;
+  const videos = [
+    ["10:24", "45K views", "3 days ago"],
+    ["10:00", "850K views", "1 week ago"],
+    ["8:45", "525K views", "1 month ago"],
+    ["12:15", "120K views", "2 months ago"],
+    ["15:30", "95K views", "3 months ago"],
+    ["7:48", "62K views", "4 months ago"],
+  ];
+  const [ink = "#202938", primary = "#6fb7aa", secondary = "#f5a36c", accent = "#f7d37a"] = profile.colors;
+  const videoBackgrounds = [
+    `linear-gradient(135deg, ${ink}, ${primary})`,
+    `linear-gradient(135deg, ${primary}, ${secondary})`,
+    `linear-gradient(135deg, ${secondary}, ${accent})`,
+    `linear-gradient(135deg, ${ink}, ${accent})`,
+  ];
+
+  return (
+    <article
+      className={cn(
+        "overflow-hidden border font-sans shadow-sm",
+        compact ? "w-[310px] rounded-[24px]" : "w-[660px] rounded-[18px]",
+        border,
+        surface,
+      )}
+      onClick={() => onSelect({ kind: "text", field: "displayName" })}
+    >
+      {compact ? (
+        <div className="flex h-12 items-center justify-between px-3">
+          <ArrowLeft className="size-5" />
+          <EditableText
+            field="displayName"
+            device={device}
+            value={profile.displayName}
+            selected={selected}
+            editing={editing}
+            copy={copy}
+            className="max-w-[170px] text-center text-sm font-semibold"
+            onSelect={onSelect}
+            onStartEdit={onStartEdit}
+            onStopEdit={onStopEdit}
+            onChange={onTextChange}
+            onCopy={onCopyText}
+          />
+          <div className="flex items-center gap-3">
+            <Search className="size-5" />
+            <MoreVertical className="size-5" />
+          </div>
+        </div>
+      ) : (
+        <div className="flex h-12 items-center justify-between px-5">
+          <div className="flex items-center gap-2 font-bold">
+            <Video className="size-5 fill-[#ff0000] text-[#ff0000]" />
+            YouTube
+          </div>
+          <div className={cn("h-8 w-56 rounded-full", mutedSurface)} />
+          <Search className="size-5 text-muted-foreground" />
+        </div>
+      )}
+
+      <button
+        type="button"
+        onClick={(event) => {
+          event.stopPropagation();
+          onSelect({ kind: "banner", device });
+        }}
+        {...imageTargetAttrs("banner", device)}
+        className={cn(
+          "relative block w-full overflow-hidden text-left",
+          compact ? "h-[92px]" : "h-[164px]",
+          selected?.kind === "banner" ? "ring-2 ring-[#ff0000] ring-inset" : "",
+        )}
+        style={bannerBackground(profile)}
+        aria-label="Edit YouTube banner"
+      >
+        <span className="absolute inset-0 bg-[radial-gradient(circle_at_80%_25%,rgba(255,255,255,.32),transparent_18%),linear-gradient(135deg,rgba(255,255,255,.08),rgba(0,0,0,.16))]" />
+        <BannerStatusOverlay
+          copy={copy}
+          status={platformStatus}
+          onRetry={onRetryBanner}
+        />
+      </button>
+
+      <div
+        className={cn(
+          "flex gap-4",
+          compact ? "items-start px-4 pb-4 pt-4" : "items-start px-6 pb-5 pt-5",
+        )}
+      >
+        <button
+          type="button"
+          onClick={(event) => {
+            event.stopPropagation();
+            onSelect({ kind: "avatar", device });
+          }}
+          {...imageTargetAttrs("avatar", device)}
+          className={cn(
+            "flex shrink-0 items-center justify-center overflow-hidden rounded-full border-4 font-bold text-white",
+            compact ? "size-[72px] text-xl" : "size-[112px] text-3xl",
+            dark ? "border-[#0f0f0f]" : "border-white",
+            selected?.kind === "avatar" ? "ring-2 ring-[#ff0000] ring-offset-2" : "",
+          )}
+          style={avatarBackground(profile)}
+          aria-label="Edit YouTube profile picture"
+        >
+          {profile.avatar.src ? null : profile.displayName.slice(0, 1)}
+        </button>
+
+        <div className="min-w-0 flex-1">
+          {!compact ? (
+            <EditableText
+              field="displayName"
+              device={device}
+              value={profile.displayName}
+              selected={selected}
+              editing={editing}
+              copy={copy}
+              className="text-3xl font-bold leading-tight"
+              onSelect={onSelect}
+              onStartEdit={onStartEdit}
+              onStopEdit={onStopEdit}
+              onChange={onTextChange}
+              onCopy={onCopyText}
+            />
+          ) : null}
+
+          <div className="mt-1 flex flex-wrap items-center gap-1 text-xs text-muted-foreground">
+            <EditableText
+              field="username"
+              device={device}
+              value={handle}
+              selected={selected}
+              editing={editing}
+              copy={copy}
+              className="font-semibold text-current"
+              onSelect={onSelect}
+              onStartEdit={onStartEdit}
+              onStopEdit={onStopEdit}
+              onChange={onTextChange}
+              onCopy={onCopyText}
+            />
+            <span>·</span>
+            <span>12.4K subscribers</span>
+            <span>·</span>
+            <span>48 videos</span>
+          </div>
+
+          <EditableText
+            field="description"
+            device={device}
+            value={profile.description ?? profile.bio}
+            selected={selected}
+            editing={editing}
+            copy={copy}
+            className="mt-2 line-clamp-2 text-xs leading-snug text-muted-foreground"
+            onSelect={onSelect}
+            onStartEdit={onStartEdit}
+            onStopEdit={onStopEdit}
+            onChange={onTextChange}
+            onCopy={onCopyText}
+          />
+
+          <div className="mt-2 flex items-center gap-1 text-xs font-medium">
+            <Link2 className="size-3.5 text-muted-foreground" />
+            <span>{profileHost(profile)}</span>
+            <ChevronRight className="size-3.5 text-muted-foreground" />
+          </div>
+
+          <button
+            className={cn(
+              "mt-3 h-9 rounded-full px-5 text-xs font-bold",
+              dark ? "bg-white text-black" : "bg-black text-white",
+            )}
+            type="button"
+          >
+            Subscribe
+          </button>
+        </div>
+      </div>
+
+      <div className={cn("flex items-center gap-6 overflow-hidden border-b px-5 text-xs font-semibold text-muted-foreground", border)}>
+        {["Home", "Videos", "Shorts", "Live", "Playlists"].map((tab) => (
+          <span
+            key={tab}
+            className={cn(
+              "shrink-0 py-3",
+              tab === "Videos" ? "border-b-2 border-current text-current" : "",
+            )}
+          >
+            {tab}
+          </span>
+        ))}
+        {!compact ? (
+          <Search className="ml-auto size-4 shrink-0" />
+        ) : null}
+      </div>
+
+      <div className="flex gap-2 px-4 py-3">
+        {["Latest", "Popular", "Oldest"].map((pill) => (
+          <button
+            key={pill}
+            type="button"
+            className={cn(
+              "h-7 rounded-lg px-3 text-[11px] font-semibold",
+              pill === "Popular"
+                ? dark
+                  ? "bg-white text-black"
+                  : "bg-black text-white"
+                : mutedSurface,
+            )}
+          >
+            {pill}
+          </button>
+        ))}
+      </div>
+
+      <div
+        className={cn(
+          "grid gap-x-3 gap-y-4 px-4 pb-5",
+          compact ? "grid-cols-2" : "grid-cols-3",
+        )}
+      >
+        {videos.slice(0, compact ? 4 : 3).map(([duration, views, time], index) => (
+          <div key={index} className="min-w-0">
+            <div
+              className="relative aspect-video overflow-hidden rounded-lg bg-[#1b1d24]"
+              style={{
+                background: videoBackgrounds[index % videoBackgrounds.length],
+              }}
+            >
+              <span className="absolute inset-0 opacity-15 [clip-path:polygon(0_100%,38%_45%,78%_100%)] bg-white" />
+              <span className="absolute inset-0 opacity-10 [clip-path:polygon(30%_100%,76%_32%,120%_100%)] bg-white" />
+              <span className="absolute bottom-1 right-1 rounded bg-black/85 px-1 text-[10px] font-semibold text-white">
+                {duration}
+              </span>
+            </div>
+            <h3 className="mt-2 line-clamp-2 text-[12px] font-semibold leading-snug">
+              {profile.displayName} video title {index + 1}
+            </h3>
+            <div className="mt-1 flex flex-wrap gap-1 text-[11px] text-muted-foreground">
+              <span>{views}</span>
+              <span>·</span>
+              <span>{time}</span>
+            </div>
+          </div>
+        ))}
+      </div>
+    </article>
+  );
+}