@tomako/tools-runtime 0.1.0

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

@@ -0,0 +1,278 @@
+"use client";
+
+import {
+    ArrowLeft,
+    Grid3X3,
+    ImageIcon,
+    Link2,
+    MoreHorizontal,
+    Play,
+    Send,
+    UserPlus
+} from "lucide-react";
+
+import { cn } from "@tomako/ui/cn";
+
+
+import {
+    EditableText,
+    MediaTileGrid,
+    VerifiedBadge,
+    avatarBackground,
+    imageTargetAttrs,
+    profileHost,
+    type PlatformPreviewProps
+} from "./shared";
+
+export function InstagramProfilePreview(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.replace(/^@/, "");
+  const surface = dark ? "bg-black text-white" : "bg-white text-[#262626]";
+  const border = dark ? "border-[#363636]" : "border-[#dbdbdb]";
+  const subtle = dark ? "bg-[#262626]" : "bg-[#efefef]";
+  const avatarOuterSize = compact ? "size-[92px]" : "size-[120px]";
+  const avatarTextSize = compact ? "text-2xl" : "text-3xl";
+  const highlightSize = compact ? "size-[66px]" : "size-[72px]";
+  const highlights = ["Be YOU", "Services", "Reviews", "Intro"];
+  const stats = [
+    ["207", "posts"],
+    ["14.7K", "followers"],
+    ["368", "following"],
+  ];
+  const profileLink = profileHost(profile);
+
+  const avatar = (
+    <button
+      type="button"
+      onClick={(event) => {
+        event.stopPropagation();
+        onSelect({ kind: "avatar", device });
+      }}
+      {...imageTargetAttrs("avatar", device)}
+      className={cn(
+        "inline-flex shrink-0 items-center justify-center rounded-full bg-[conic-gradient(#f9ce34,#ee2a7b,#8a3ffc,#f97316,#f9ce34)] p-[3px]",
+        avatarOuterSize,
+        selected?.kind === "avatar" ? "ring-2 ring-[#0095f6] ring-offset-2" : "",
+      )}
+      aria-label="Edit Instagram avatar"
+    >
+      <span
+        className={cn(
+          "flex size-full items-center justify-center rounded-full border-[3px] font-bold text-white",
+          avatarTextSize,
+          dark ? "border-black" : "border-white",
+        )}
+        style={avatarBackground(profile)}
+      >
+        {profile.avatar.src ? null : profile.displayName.slice(0, 1)}
+      </span>
+    </button>
+  );
+
+  const usernameRow = (
+    <div className="flex min-w-0 items-center gap-2">
+      <EditableText
+        field="username"
+        device={device}
+        value={handle}
+        selected={selected}
+        editing={editing}
+        copy={copy}
+        className={cn(
+          "min-w-0 truncate font-semibold",
+          compact ? "text-lg leading-6" : "text-2xl leading-8",
+        )}
+        onSelect={onSelect}
+        onStartEdit={onStartEdit}
+        onStopEdit={onStopEdit}
+        onChange={onTextChange}
+        onCopy={onCopyText}
+      />
+      <VerifiedBadge compact={compact} />
+      <MoreHorizontal className="size-5 shrink-0" />
+    </div>
+  );
+
+  const statRow = (
+    <div className={cn("grid grid-cols-3", compact ? "gap-3 text-center" : "max-w-[300px] gap-5")}>
+      {stats.map(([value, label]) => (
+        <div key={label} className={compact ? "" : "flex items-baseline gap-1"}>
+          <div className={cn("font-semibold", compact ? "text-base" : "text-sm")}>{value}</div>
+          <div className={cn(compact ? "text-xs" : "text-sm")}>{label}</div>
+        </div>
+      ))}
+    </div>
+  );
+
+  const bioBlock = (
+    <div className={compact ? "mt-5" : "mt-4"}>
+      <EditableText
+        field="displayName"
+        device={device}
+        value={profile.displayName}
+        selected={selected}
+        editing={editing}
+        copy={copy}
+        className={cn("font-semibold", compact ? "text-sm leading-5" : "text-sm leading-5")}
+        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-1 whitespace-pre-line", compact ? "text-sm leading-5" : "text-sm leading-[19px]")}
+        onSelect={onSelect}
+        onStartEdit={onStartEdit}
+        onStopEdit={onStopEdit}
+        onChange={onTextChange}
+        onCopy={onCopyText}
+      />
+      <div className={cn("mt-2 flex flex-wrap items-center gap-x-3 gap-y-1 font-semibold", compact ? "text-sm" : "text-sm")}>
+        <span className="inline-flex items-center gap-1 text-[#3858e9]">
+          <Link2 className="size-4" />
+          {profileLink}
+        </span>
+        <span className="inline-flex items-center gap-1">
+          <span className="text-base leading-none">@</span>
+          {handle}
+        </span>
+      </div>
+    </div>
+  );
+
+  const actionButtons = (
+    <div className={cn("grid grid-cols-[1fr_1fr_44px] gap-2", compact ? "mt-4" : "mt-6 px-6")}>
+      <button className={cn("h-10 rounded-xl text-sm font-semibold", subtle)} type="button">
+        Follow
+      </button>
+      <button className={cn("h-10 rounded-xl text-sm font-semibold", subtle)} type="button">
+        Message
+      </button>
+      <button className={cn("flex h-10 items-center justify-center rounded-xl", subtle)} type="button">
+        <UserPlus className="size-5" />
+      </button>
+    </div>
+  );
+
+  const highlightRow = (
+    <div className={cn("overflow-hidden", compact ? "px-4 pb-5 pt-5" : "px-7 pb-6 pt-7")}>
+      <div className={cn("flex overflow-hidden", compact ? "gap-5" : "gap-7")}>
+        {highlights.map((label, index) => (
+          <div key={label} className={cn("shrink-0 text-center", compact ? "w-[72px]" : "w-[82px]")}>
+            <span
+              className={cn(
+                "mx-auto mb-2 block rounded-full border-[3px] p-[3px]",
+                dark ? "border-[#363636]" : "border-[#e5e7eb]",
+                highlightSize,
+              )}
+              style={{
+                background:
+                  index % 2 === 1
+                    ? `linear-gradient(135deg, ${profile.colors[1]}, ${profile.colors[2]})`
+                    : undefined,
+              }}
+            />
+            <span className={cn("block truncate font-medium", compact ? "text-xs" : "text-xs")}>{label}</span>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+
+  return (
+    <article
+      className={cn(
+        "overflow-hidden border font-sans shadow-sm",
+        compact ? "w-[340px] rounded-[2px]" : "w-[680px] rounded-[18px]",
+        border,
+        surface,
+      )}
+      onClick={() => onSelect({ kind: "text", field: "displayName" })}
+    >
+      {compact ? (
+        <div className={cn("grid h-14 grid-cols-[40px_1fr_40px] items-center px-4 text-lg font-semibold", border)}>
+          <ArrowLeft className="size-6" />
+          <div className="truncate text-center">{handle}</div>
+          <div className="flex items-center gap-4">
+            <MoreHorizontal className="ml-auto size-5" />
+          </div>
+        </div>
+      ) : null}
+
+      {compact ? (
+        <section className="px-4 pb-1 pt-5">
+          <div className="flex items-center gap-5">
+            {avatar}
+            <div className="min-w-0 flex-1">
+              {usernameRow}
+              <div className="mt-5">{statRow}</div>
+            </div>
+          </div>
+          {bioBlock}
+          {actionButtons}
+        </section>
+      ) : (
+        <>
+          <section className="grid grid-cols-[118px_1fr] gap-8 px-7 pt-7">
+            <div className="flex justify-center">{avatar}</div>
+            <div className="min-w-0">
+              {usernameRow}
+              <div className="mt-2">
+                <EditableText
+                  field="headline"
+                  device={device}
+                  value={profile.headline || profile.displayName}
+                  selected={selected}
+                  editing={editing}
+                  copy={copy}
+                  className="text-sm leading-5"
+                  onSelect={onSelect}
+                  onStartEdit={onStartEdit}
+                  onStopEdit={onStopEdit}
+                  onChange={onTextChange}
+                  onCopy={onCopyText}
+                />
+              </div>
+              <div className="mt-3">{statRow}</div>
+              {bioBlock}
+            </div>
+          </section>
+          {actionButtons}
+        </>
+      )}
+
+      {highlightRow}
+
+      <div className={cn("grid grid-cols-4 border-y text-center text-xs", border)}>
+        <div className="flex h-10 items-center justify-center border-t-2 border-current">
+          <Grid3X3 className="size-4" />
+        </div>
+        <div className="flex h-10 items-center justify-center text-muted-foreground"><Play className="size-4" /></div>
+        <div className="flex h-10 items-center justify-center text-muted-foreground"><Send className="size-4" /></div>
+        <div className="flex h-10 items-center justify-center text-muted-foreground"><ImageIcon className="size-4" /></div>
+      </div>
+      <MediaTileGrid profile={profile} compact={compact} count={compact ? 6 : 3} />
+    </article>
+  );
+}

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

@@ -0,0 +1,358 @@
+"use client";
+
+import {
+    Bell,
+    Link2,
+    MoreHorizontal,
+    Plus,
+    Search,
+    Send,
+    ShieldCheck
+} from "lucide-react";
+
+import { cn } from "@tomako/ui/cn";
+
+
+import {
+    BannerStatusOverlay,
+    EditableText,
+    avatarBackground,
+    bannerBackground,
+    imageTargetAttrs,
+    type PlatformPreviewProps
+} from "./shared";
+
+export function LinkedInLogo({ compact }: { compact: boolean }) {
+  return (
+    <span
+      className={cn(
+        "inline-flex items-center justify-center rounded-sm bg-[#0a66c2] font-bold text-white",
+        compact ? "size-5 text-[12px]" : "size-6 text-sm",
+      )}
+    >
+      in
+    </span>
+  );
+}
+
+export function LinkedInProfilePreview(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";
+
+  return (
+    <article
+      className={cn(
+        "overflow-hidden rounded-[14px] border font-sans shadow-sm",
+        compact ? "w-[274px]" : "w-[520px]",
+        dark
+          ? "border-[#38434f] bg-[#1d2226] text-[#f3f2ef]"
+          : "border-[#d0d7de] bg-white text-[#000]",
+      )}
+      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-[#38434f]" : "border-[#e9e5df]",
+        )}
+      >
+        <LinkedInLogo compact={compact} />
+        <div className="flex items-center gap-2 text-[#666]">
+          <Bell className={compact ? "size-3.5" : "size-4"} />
+          <MoreHorizontal className={compact ? "size-4" : "size-5"} />
+        </div>
+      </div>
+
+      <div className="relative">
+        <button
+          type="button"
+          onClick={(event) => {
+            event.stopPropagation();
+            onSelect({ kind: "banner", device });
+          }}
+          {...imageTargetAttrs("banner", device)}
+          className={cn(
+            "relative block w-full overflow-hidden text-left transition",
+            compact ? "h-[68px]" : "h-[122px]",
+            selected?.kind === "banner" ? "ring-2 ring-[#0a66c2] ring-inset" : "",
+          )}
+          style={bannerBackground(profile)}
+          aria-label="Edit LinkedIn cover"
+        >
+          <BannerStatusOverlay
+            copy={copy}
+            status={platformStatus}
+            onRetry={onRetryBanner}
+          />
+        </button>
+        <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 border-[4px] font-bold text-white shadow-sm",
+            compact ? "left-4 top-[40px] size-[72px]" : "left-5 top-[70px] size-[108px]",
+            dark ? "border-[#1d2226]" : "border-white",
+            selected?.kind === "avatar" ? "ring-2 ring-[#0a66c2] ring-offset-2" : "",
+          )}
+          style={avatarBackground(profile)}
+          aria-label="Edit LinkedIn avatar"
+        >
+          {profile.avatar.src ? null : profile.displayName.slice(0, 1)}
+        </button>
+      </div>
+
+      <div className={cn("grid gap-4", compact ? "px-4 pb-4 pt-12" : "grid-cols-[1fr_132px] px-5 pb-5 pt-16")}>
+        <div className="min-w-0">
+          <div className="flex min-w-0 items-center gap-1.5">
+            <EditableText
+              field="displayName"
+              device={device}
+              value={profile.displayName}
+              selected={selected}
+              editing={editing}
+              copy={copy}
+              className={cn("font-semibold leading-tight", compact ? "text-lg" : "text-xl")}
+              onSelect={onSelect}
+              onStartEdit={onStartEdit}
+              onStopEdit={onStopEdit}
+              onChange={onTextChange}
+              onCopy={onCopyText}
+            />
+            <ShieldCheck className="size-4 shrink-0 text-[#666]" />
+            <span className="text-xs text-[#666]">1st</span>
+          </div>
+          <EditableText
+            field="headline"
+            device={device}
+            value={profile.headline ?? profile.bio}
+            selected={selected}
+            editing={editing}
+            copy={copy}
+            className={cn("mt-1 leading-snug", compact ? "text-xs" : "text-sm")}
+            onSelect={onSelect}
+            onStartEdit={onStartEdit}
+            onStopEdit={onStopEdit}
+            onChange={onTextChange}
+            onCopy={onCopyText}
+          />
+          <div className="mt-2 flex flex-wrap items-center gap-x-2 gap-y-1 text-[12px] text-[#666]">
+            <span>Worldwide</span>
+            <span>·</span>
+            <span className="font-semibold text-[#0a66c2]">Contact info</span>
+          </div>
+          <div className="mt-2 flex flex-wrap items-center gap-x-2 text-[12px]">
+            <span><strong>40K</strong> followers</span>
+            <span className="text-[#666]">·</span>
+            <span><strong>500+</strong> connections</span>
+          </div>
+          <div className="mt-4 flex flex-wrap gap-2">
+            <button className="inline-flex h-8 items-center gap-1 rounded-full bg-[#0a66c2] px-4 text-xs font-semibold text-white" type="button">
+              <Plus className="size-3" /> Follow
+            </button>
+            <button className="inline-flex h-8 items-center gap-1 rounded-full border border-[#0a66c2] px-4 text-xs font-semibold text-[#0a66c2]" type="button">
+              <Send className="size-3" /> Message
+            </button>
+            <button className="h-8 rounded-full border px-4 text-xs font-semibold" type="button">More</button>
+          </div>
+        </div>
+
+        {!compact ? (
+          <div className="space-y-2 pt-1">
+            {["Northstar Labs", "Orbit Studio"].map((name, index) => (
+              <div key={name} className="flex items-center gap-2 rounded-md text-[11px]">
+                <span
+                  className="flex size-7 items-center justify-center rounded bg-secondary font-bold text-foreground"
+                  style={{
+                    background:
+                      index === 0
+                        ? `linear-gradient(135deg, ${profile.colors[1]}, ${profile.colors[3]})`
+                        : undefined,
+                  }}
+                >
+                  {name.slice(0, 1)}
+                </span>
+                <span className="truncate font-medium">{name}</span>
+              </div>
+            ))}
+          </div>
+        ) : null}
+      </div>
+    </article>
+  );
+}
+
+export function LinkedInCompanyProfilePreview(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";
+
+  return (
+    <article
+      className={cn(
+        "overflow-hidden rounded-[14px] border font-sans shadow-sm",
+        compact ? "w-[300px]" : "w-[560px]",
+        dark
+          ? "border-[#38434f] bg-[#1d2226] text-[#f3f2ef]"
+          : "border-[#d0d7de] bg-white text-[#000]",
+      )}
+      onClick={() => onSelect({ kind: "text", field: "displayName" })}
+    >
+      <div className={cn("flex items-center justify-between border-b px-4", compact ? "h-10" : "h-12")}>
+        <LinkedInLogo compact={compact} />
+        <div className="flex items-center gap-2 text-[#666]">
+          <Search className="size-4" />
+          <MoreHorizontal className="size-5" />
+        </div>
+      </div>
+      <div className="relative">
+        <button
+          type="button"
+          onClick={(event) => {
+            event.stopPropagation();
+            onSelect({ kind: "banner", device });
+          }}
+          {...imageTargetAttrs("banner", device)}
+          className={cn(
+            "relative block w-full overflow-hidden text-left transition",
+            compact ? "h-[74px]" : "h-[112px]",
+            selected?.kind === "banner" ? "ring-2 ring-[#0a66c2] ring-inset" : "",
+          )}
+          style={bannerBackground(profile)}
+          aria-label="Edit LinkedIn company cover"
+        >
+          <BannerStatusOverlay
+            copy={copy}
+            status={platformStatus}
+            onRetry={onRetryBanner}
+          />
+        </button>
+        <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-md border-4 font-bold text-white shadow-sm",
+            compact ? "left-4 top-[48px] size-20 text-2xl" : "left-5 top-[72px] size-24 text-3xl",
+            dark ? "border-[#1d2226]" : "border-white",
+            selected?.kind === "avatar" ? "ring-2 ring-[#0a66c2] ring-offset-2" : "",
+          )}
+          style={avatarBackground(profile)}
+          aria-label="Edit LinkedIn company logo"
+        >
+          {profile.avatar.src ? null : profile.displayName.slice(0, 1)}
+        </button>
+      </div>
+      <div className={cn("px-5 pb-5", compact ? "pt-14" : "pt-16")}>
+        <EditableText
+          field="displayName"
+          device={device}
+          value={profile.displayName}
+          selected={selected}
+          editing={editing}
+          copy={copy}
+          className={cn("font-semibold leading-tight", compact ? "text-xl" : "text-2xl")}
+          onSelect={onSelect}
+          onStartEdit={onStartEdit}
+          onStopEdit={onStopEdit}
+          onChange={onTextChange}
+          onCopy={onCopyText}
+        />
+        <EditableText
+          field="headline"
+          device={device}
+          value={profile.headline ?? profile.bio}
+          selected={selected}
+          editing={editing}
+          copy={copy}
+          className="mt-1 text-sm leading-snug"
+          onSelect={onSelect}
+          onStartEdit={onStartEdit}
+          onStopEdit={onStopEdit}
+          onChange={onTextChange}
+          onCopy={onCopyText}
+        />
+        <div className="mt-2 flex flex-wrap items-center gap-x-2 text-xs text-muted-foreground">
+          <span>Software Development</span>
+          <span>11-50 employees</span>
+          <span>28K followers</span>
+        </div>
+        <div className="mt-4 flex flex-wrap gap-2">
+          <button className="inline-flex h-8 items-center gap-1 rounded-full bg-[#0a66c2] px-4 text-xs font-semibold text-white" type="button">
+            <Plus className="size-3" /> Follow
+          </button>
+          <button className="inline-flex h-8 items-center gap-1 rounded-full border border-[#0a66c2] px-4 text-xs font-semibold text-[#0a66c2]" type="button">
+            <Link2 className="size-3" /> Visit website
+          </button>
+        </div>
+        <div className="mt-4 flex gap-5 border-y text-xs font-semibold text-muted-foreground">
+          {["Home", "About", "Posts", "Jobs"].map((tab, index) => (
+            <span key={tab} className={cn("py-3", index === 0 ? "border-b-2 border-[#0a66c2] text-[#0a66c2]" : "")}>{tab}</span>
+          ))}
+        </div>
+        <div className={cn("grid gap-3 pt-4", compact ? "" : "grid-cols-[1fr_160px]")}>
+          <div className={cn("rounded-xl border p-3", dark ? "border-[#38434f] bg-[#252a30]" : "bg-white")}>
+            <div className="text-sm font-semibold">About</div>
+            <EditableText
+              field="bio"
+              device={device}
+              value={profile.bio}
+              selected={selected}
+              editing={editing}
+              copy={copy}
+              className="mt-2 text-xs leading-snug text-muted-foreground"
+              onSelect={onSelect}
+              onStartEdit={onStartEdit}
+              onStopEdit={onStopEdit}
+              onChange={onTextChange}
+              onCopy={onCopyText}
+            />
+          </div>
+          <div className={cn("rounded-xl border p-3", dark ? "border-[#38434f] bg-[#252a30]" : "bg-white")}>
+            <div className="text-sm font-semibold">Featured</div>
+            <div
+              className="mt-3 aspect-video rounded-lg"
+              style={{ background: `linear-gradient(135deg, ${profile.colors[1]}, ${profile.colors[2]})` }}
+            />
+          </div>
+        </div>
+      </div>
+    </article>
+  );
+}