@tomako/tools-runtime 0.1.0

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

@@ -0,0 +1,319 @@
+"use client";
+
+import {
+    Grid3X3,
+    Heart,
+    MoreHorizontal,
+    Play,
+    Search,
+    Send,
+    UserPlus
+} from "lucide-react";
+
+import type {
+    SocialPlatformProfile
+} from "../../../../../lib/tools/social-profile-kit.schema";
+import { cn } from "@tomako/ui/cn";
+
+
+import {
+    EditableText,
+    avatarBackground,
+    imageTargetAttrs,
+    type PlatformPreviewProps
+} from "./shared";
+
+export function TikTokVideoGrid({
+  profile,
+  compact,
+  dark,
+}: {
+  profile: SocialPlatformProfile;
+  compact: boolean;
+  dark: boolean;
+}) {
+  const items = Array.from({ length: compact ? 2 : 6 });
+  const [primary = "#6fb7aa", secondary = "#f5a36c", accent = "#202938"] = profile.colors;
+
+  return (
+    <div
+      className={cn(
+        "grid border-t",
+        compact ? "grid-cols-2 gap-3 px-4 pb-6 pt-5" : "grid-cols-6 gap-4 px-8 pb-8 pt-6",
+        dark ? "border-[#2f2f2f]" : "border-[#e5e5e5]",
+      )}
+    >
+      {items.map((_, index) => (
+        <div
+          key={index}
+          className="relative aspect-[9/14] overflow-hidden rounded-lg bg-[#161823]"
+        >
+          <div
+            className="absolute inset-0"
+            style={{
+              background:
+                index % 3 === 0
+                  ? `linear-gradient(155deg, ${primary}, ${accent})`
+                  : index % 3 === 1
+                    ? `linear-gradient(145deg, #101010, ${secondary})`
+                    : `linear-gradient(135deg, ${secondary}, ${primary})`,
+            }}
+          />
+          <div className="absolute inset-0 bg-[linear-gradient(180deg,rgba(0,0,0,0.08),rgba(0,0,0,0.55))]" />
+          {index === 0 ? (
+            <span className="absolute left-2 top-2 rounded-md bg-[#fe2c55] px-2 py-1 text-[11px] font-bold text-white">
+              Pinned
+            </span>
+          ) : null}
+          <div className="absolute bottom-2 left-2 flex items-center gap-1 text-xs font-bold text-white">
+            <Play className="size-3 fill-white" />
+            {["125", "779", "894", "706", "251", "247"][index]}
+          </div>
+        </div>
+      ))}
+    </div>
+  );
+}
+
+export function TikTokProfilePreview(props: PlatformPreviewProps) {
+  const {
+    copy,
+    profile,
+    device,
+    theme,
+    selected,
+    editing,
+    onSelect,
+    onStartEdit,
+    onStopEdit,
+    onTextChange,
+    onCopyText,
+  } = props;
+  const compact = device === "mobile";
+  const dark = theme === "dark";
+  const handle = profile.username.startsWith("@") ? profile.username : `@${profile.username}`;
+  const bareHandle = handle.replace(/^@/, "");
+  const border = dark ? "border-[#2f2f2f]" : "border-[#e5e5e5]";
+  const mutedSurface = dark ? "bg-[#252525] text-white" : "bg-[#f1f1f2] text-[#161823]";
+  const avatarSize = compact ? "size-[132px]" : "size-[150px]";
+  const stats = [
+    ["48", "Following"],
+    ["23", "Followers"],
+    ["1603", "Likes"],
+  ];
+
+  const avatarButton = (
+    <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 font-bold text-white",
+        avatarSize,
+        compact ? "text-3xl" : "text-4xl",
+        dark ? "border-[#3a3a3a]" : "border-[#f1f1f2]",
+        selected?.kind === "avatar" ? "ring-2 ring-[#fe2c55] ring-offset-2" : "",
+      )}
+      style={avatarBackground(profile)}
+    >
+      {profile.avatar.src ? null : profile.displayName.slice(0, 1)}
+    </button>
+  );
+
+  const identityLine = (
+    <div
+      className={cn(
+        "flex min-w-0 items-baseline gap-3",
+        compact ? "justify-center" : "justify-start",
+      )}
+    >
+      <EditableText
+        field="displayName"
+        device={device}
+        value={profile.displayName}
+        selected={selected}
+        editing={editing}
+        copy={copy}
+        className={cn("min-w-0 truncate font-bold", compact ? "text-2xl" : "text-[26px]")}
+        onSelect={onSelect}
+        onStartEdit={onStartEdit}
+        onStopEdit={onStopEdit}
+        onChange={onTextChange}
+        onCopy={onCopyText}
+      />
+      <span className={cn("h-5 w-px shrink-0", dark ? "bg-[#444]" : "bg-[#dedede]")} />
+      <EditableText
+        field="username"
+        device={device}
+        value={bareHandle}
+        selected={selected}
+        editing={editing}
+        copy={copy}
+        className={cn("min-w-0 truncate text-muted-foreground", compact ? "text-xl" : "text-lg")}
+        onSelect={onSelect}
+        onStartEdit={onStartEdit}
+        onStopEdit={onStopEdit}
+        onChange={onTextChange}
+        onCopy={onCopyText}
+      />
+    </div>
+  );
+
+  const statRow = (
+    <div
+      className={cn(
+        "items-center",
+        compact ? "grid grid-cols-3 gap-1 text-sm" : "flex justify-start gap-8 text-base",
+      )}
+    >
+      {stats.map(([value, label]) => (
+        <div key={label} className={cn("whitespace-nowrap", compact ? "text-center" : "")}>
+          <span className="font-bold">{value}</span>
+          <span className="ml-1 font-normal">{label}</span>
+        </div>
+      ))}
+    </div>
+  );
+
+  const actionButtons = (
+    <div className={cn("flex items-center", compact ? "justify-center gap-3" : "justify-start gap-3")}>
+      <button
+        className={cn(
+          "h-10 rounded-full bg-[#fe2c55] px-8 text-sm font-bold text-white",
+          compact ? "min-w-[100px]" : "min-w-[108px]",
+        )}
+        type="button"
+      >
+        Follow
+      </button>
+      <button
+        className={cn("h-10 rounded-full px-6 text-sm font-bold", mutedSurface)}
+        type="button"
+      >
+        Message
+      </button>
+      <button className={cn("flex size-10 items-center justify-center rounded-full", mutedSurface)} type="button">
+        <UserPlus className="size-5" />
+      </button>
+      <button className={cn("flex size-10 items-center justify-center rounded-full", mutedSurface)} type="button">
+        <Send className="size-5 fill-current" />
+      </button>
+      <button className={cn("flex size-10 items-center justify-center rounded-full", mutedSurface)} type="button">
+        <MoreHorizontal className="size-5" />
+      </button>
+    </div>
+  );
+
+  const bioText = (
+    <EditableText
+      field="bio"
+      device={device}
+      value={profile.bio}
+      selected={selected}
+      editing={editing}
+      copy={copy}
+      className={cn(
+        "leading-snug",
+        compact ? "mx-auto max-w-[300px] text-left text-base" : "max-w-[560px] text-left text-base",
+      )}
+      onSelect={onSelect}
+      onStartEdit={onStartEdit}
+      onStopEdit={onStopEdit}
+      onChange={onTextChange}
+      onCopy={onCopyText}
+    />
+  );
+
+  const tabs = (
+    <div
+      className={cn(
+        "flex items-end justify-between border-b px-8",
+        compact ? "mt-6 px-4" : "mt-3",
+        border,
+      )}
+    >
+      <div className={cn("flex", compact ? "flex-1 justify-around" : "gap-12")}>
+        <div className="flex h-12 items-center gap-2 border-b-2 border-current px-1 text-lg font-bold">
+          <Grid3X3 className="size-5" />
+          Videos
+        </div>
+        <div className="flex h-12 items-center gap-2 px-1 text-lg font-bold text-muted-foreground">
+          <Heart className="size-5" />
+          Liked
+        </div>
+      </div>
+      {!compact ? (
+        <div className={cn("mb-2 flex overflow-hidden rounded-md border", border, dark ? "bg-[#1a1a1a]" : "bg-[#f1f1f2]")}>
+          {["Latest", "Popular", "Oldest"].map((label, index) => (
+            <button
+              key={label}
+              type="button"
+              className={cn(
+                "h-9 px-4 text-sm font-semibold",
+                index === 0 ? (dark ? "bg-[#2f2f2f]" : "bg-white shadow-sm") : "text-muted-foreground",
+              )}
+            >
+              {label}
+            </button>
+          ))}
+        </div>
+      ) : null}
+    </div>
+  );
+
+  return (
+    <article
+      className={cn(
+        "overflow-hidden border font-sans shadow-sm",
+        compact ? "w-[360px] rounded-[28px]" : "w-[820px] rounded-[18px]",
+        dark ? "border-[#333] bg-[#0f0f0f] text-white" : "border-[#e5e5e5] bg-white text-[#161823]",
+      )}
+      onClick={() => onSelect({ kind: "text", field: "displayName" })}
+    >
+      {compact ? (
+        <>
+          <div className="flex h-12 items-center justify-between px-5">
+            <Search className="size-5" />
+            <EditableText
+              field="username"
+              device={device}
+              value={handle}
+              selected={selected}
+              editing={editing}
+              copy={copy}
+              className="max-w-[60%] truncate text-center text-sm font-bold"
+              onSelect={onSelect}
+              onStartEdit={onStartEdit}
+              onStopEdit={onStopEdit}
+              onChange={onTextChange}
+              onCopy={onCopyText}
+            />
+            <MoreHorizontal className="size-5" />
+          </div>
+          <section className="px-5 pb-2 pt-4 text-center">
+            <div className="flex justify-center">{avatarButton}</div>
+            <div className="mt-6">{identityLine}</div>
+            <div className="mt-4">{statRow}</div>
+            <div className="mt-5">{actionButtons}</div>
+            <div className="mt-5">{bioText}</div>
+          </section>
+        </>
+      ) : (
+        <section className="grid grid-cols-[150px_1fr] gap-8 px-8 pb-5 pt-8">
+          <div>{avatarButton}</div>
+          <div className="min-w-0">
+            {identityLine}
+            <div className="mt-3">{statRow}</div>
+            <div className="mt-5">{actionButtons}</div>
+            <div className="mt-5">{bioText}</div>
+          </div>
+        </section>
+      )}
+      {tabs}
+      <TikTokVideoGrid profile={profile} compact={compact} dark={dark} />
+    </article>
+  );
+}

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

@@ -0,0 +1,341 @@
+"use client";
+
+import {
+    CalendarDays,
+    Link2,
+    MapPin,
+    MoreHorizontal
+} from "lucide-react";
+import type { ReactNode } from "react";
+
+import type { PlatformGenerationStatus } from "../../../../../lib/tools/social-profile-kit.generation";
+import type {
+    SocialPlatformProfile,
+    SocialProfileTheme
+} from "../../../../../lib/tools/social-profile-kit.schema";
+import { cn } from "@tomako/ui/cn";
+
+import type {
+    EditableTextField,
+    EditingProfileText,
+    ProfilePreviewDevice,
+    SelectedProfileElement,
+    SocialProfileKitCopy,
+} from "../types";
+
+import {
+    BannerStatusOverlay,
+    EditableText,
+    VerifiedBadge,
+    avatarBackground,
+    bannerBackground,
+    imageTargetAttrs,
+    profileHost
+} from "./shared";
+
+export function XAvatar({
+  profile,
+  selected,
+  device,
+  compact,
+  dark,
+  onSelect,
+}: {
+  profile: SocialPlatformProfile;
+  selected: SelectedProfileElement | null;
+  device: ProfilePreviewDevice;
+  compact: boolean;
+  dark: boolean;
+  onSelect: (element: SelectedProfileElement) => void;
+}) {
+  return (
+    <button
+      type="button"
+      onClick={(event) => {
+        event.stopPropagation();
+        onSelect({ kind: "avatar", device });
+      }}
+      {...imageTargetAttrs("avatar", device)}
+      className={cn(
+        "absolute flex items-center justify-center overflow-hidden rounded-full text-xl font-bold text-white shadow-sm transition",
+        compact
+          ? "left-4 top-[54px] size-[64px] border-[3px]"
+          : "left-5 top-[92px] size-[86px] border-4",
+        dark ? "border-black" : "border-white",
+        selected?.kind === "avatar" ? "ring-2 ring-[#1d9bf0] ring-offset-2" : "",
+      )}
+      style={avatarBackground(profile)}
+      aria-label="Edit X avatar"
+    >
+      {profile.avatar.src ? null : profile.displayName.slice(0, 1)}
+    </button>
+  );
+}
+
+export function XBanner({
+  copy,
+  profile,
+  selected,
+  device,
+  compact,
+  platformStatus,
+  onRetryBanner,
+  onSelect,
+}: {
+  copy: SocialProfileKitCopy;
+  profile: SocialPlatformProfile;
+  selected: SelectedProfileElement | null;
+  device: ProfilePreviewDevice;
+  compact: boolean;
+  platformStatus: PlatformGenerationStatus;
+  onRetryBanner: () => void;
+  onSelect: (element: SelectedProfileElement) => void;
+}) {
+  return (
+    <button
+      type="button"
+      onClick={(event) => {
+        event.stopPropagation();
+        onSelect({ kind: "banner", device });
+      }}
+      {...imageTargetAttrs("banner", device)}
+      className={cn(
+        "block w-full overflow-hidden bg-[#cfd9de] text-left transition",
+        compact ? "h-[84px]" : "h-[142px]",
+        selected?.kind === "banner" ? "ring-2 ring-[#1d9bf0] ring-inset" : "",
+      )}
+      style={bannerBackground(profile)}
+      aria-label="Edit X header"
+    >
+      <span
+        className={cn(
+          "block h-full w-full",
+          profile.banner?.src
+            ? ""
+            : "bg-[linear-gradient(135deg,rgba(255,255,255,.08),rgba(255,255,255,0)_42%)]",
+        )}
+      />
+      <BannerStatusOverlay
+        copy={copy}
+        status={platformStatus}
+        onRetry={onRetryBanner}
+      />
+    </button>
+  );
+}
+
+export function XMetaItem({
+  icon,
+  children,
+}: {
+  icon: ReactNode;
+  children: ReactNode;
+}) {
+  return (
+    <span className="inline-flex items-center gap-1">
+      {icon}
+      <span>{children}</span>
+    </span>
+  );
+}
+
+export function XProfilePreview({
+  copy,
+  profile,
+  device,
+  theme,
+  selected,
+  editing,
+  platformStatus,
+  onRetryBanner,
+  onSelect,
+  onStartEdit,
+  onStopEdit,
+  onTextChange,
+  onCopyText,
+}: {
+  copy: SocialProfileKitCopy;
+  profile: SocialPlatformProfile;
+  device: ProfilePreviewDevice;
+  theme: SocialProfileTheme;
+  selected: SelectedProfileElement | null;
+  editing: EditingProfileText;
+  platformStatus: PlatformGenerationStatus;
+  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 compact = device === "mobile";
+  const dark = theme === "dark";
+  const handle = profile.username.startsWith("@")
+    ? profile.username
+    : `@${profile.username}`;
+
+  return (
+    <article
+      className={cn(
+        "overflow-hidden border font-sans shadow-sm",
+        compact ? "w-[256px] rounded-[22px]" : "w-[426px] rounded-[18px]",
+        dark
+          ? "border-[#2f3336] bg-black text-[#e7e9ea]"
+          : "border-[#eff3f4] bg-white text-[#0f1419]",
+      )}
+      onClick={() => onSelect({ kind: "text", field: "displayName" })}
+    >
+      <div
+        className={cn(
+          "flex items-center justify-between border-b px-4",
+          compact ? "h-9" : "h-11",
+          dark ? "border-[#2f3336]" : "border-[#eff3f4]",
+        )}
+      >
+        <span className="text-[11px] font-semibold text-[#536471]">
+          {copy.canvas[device]}
+        </span>
+        <span className="text-[12px] font-bold">X</span>
+      </div>
+
+      <div className="relative">
+        <XBanner
+          copy={copy}
+          profile={profile}
+          selected={selected}
+          device={device}
+          compact={compact}
+          platformStatus={platformStatus}
+          onRetryBanner={onRetryBanner}
+          onSelect={onSelect}
+        />
+        <XAvatar
+          profile={profile}
+          selected={selected}
+          device={device}
+          compact={compact}
+          dark={dark}
+          onSelect={onSelect}
+        />
+      </div>
+
+      <div className={cn("relative", compact ? "px-4 pb-4 pt-9" : "px-5 pb-5 pt-12")}>
+        <div className="absolute right-4 top-3 flex items-center gap-2">
+          <button
+            type="button"
+            className={cn(
+              "flex items-center justify-center rounded-full border",
+              compact ? "size-8" : "size-9",
+              dark ? "border-[#536471] text-[#e7e9ea]" : "border-[#cfd9de]",
+            )}
+            aria-label="More profile actions"
+          >
+            <MoreHorizontal className={compact ? "size-4" : "size-5"} />
+          </button>
+          <button
+            type="button"
+            className={cn(
+              "rounded-full font-bold",
+              compact ? "h-8 px-4 text-xs" : "h-9 px-5 text-sm",
+              dark ? "bg-[#eff3f4] text-[#0f1419]" : "bg-[#0f1419] text-white",
+            )}
+          >
+            Follow
+          </button>
+        </div>
+
+        <div className="flex min-w-0 items-center gap-1">
+          <EditableText
+            field="displayName"
+            device={device}
+            value={profile.displayName}
+            selected={selected}
+            editing={editing}
+            copy={copy}
+            className={cn(
+              "max-w-[75%] font-extrabold leading-tight",
+              compact ? "text-base" : "text-xl",
+            )}
+            onSelect={onSelect}
+            onStartEdit={onStartEdit}
+            onStopEdit={onStopEdit}
+            onChange={onTextChange}
+            onCopy={onCopyText}
+          />
+          <VerifiedBadge compact={compact} />
+        </div>
+
+        <EditableText
+          field="username"
+          device={device}
+          value={handle}
+          selected={selected}
+          editing={editing}
+          copy={copy}
+          className={cn(
+            "mt-0.5 leading-tight text-[#536471]",
+            compact ? "text-xs" : "text-sm",
+          )}
+          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={cn(
+            "mt-3 whitespace-pre-line leading-snug",
+            compact ? "text-[13px]" : "text-sm",
+          )}
+          onSelect={onSelect}
+          onStartEdit={onStartEdit}
+          onStopEdit={onStopEdit}
+          onChange={onTextChange}
+          onCopy={onCopyText}
+        />
+
+        <div
+          className={cn(
+            "mt-3 flex flex-wrap gap-x-3 gap-y-1 text-[#536471]",
+            compact ? "text-[11px]" : "text-[13px]",
+          )}
+        >
+          <XMetaItem icon={<MapPin className="size-3.5" />}>Worldwide</XMetaItem>
+          <XMetaItem icon={<Link2 className="size-3.5" />}>
+            {profileHost(profile)}
+          </XMetaItem>
+          <XMetaItem icon={<CalendarDays className="size-3.5" />}>
+            Joined May 2023
+          </XMetaItem>
+        </div>
+
+        <div
+          className={cn(
+            "mt-3 flex gap-4 text-[#536471]",
+            compact ? "text-[12px]" : "text-sm",
+          )}
+        >
+          <span>
+            <strong className={dark ? "text-[#e7e9ea]" : "text-[#0f1419]"}>
+              1,697
+            </strong>{" "}
+            Following
+          </span>
+          <span>
+            <strong className={dark ? "text-[#e7e9ea]" : "text-[#0f1419]"}>
+              20.5K
+            </strong>{" "}
+            Followers
+          </span>
+        </div>
+      </div>
+    </article>
+  );
+}