@tangle-network/sandbox-ui 0.6.1 → 0.8.4

package/dist/auth.d.ts

@@ -54,17 +54,21 @@ interface AuthHeaderProps {
 declare function AuthHeader({ user, loading, variant, apiBaseUrl, menuLinks, className, }: AuthHeaderProps): react_jsx_runtime.JSX.Element;
 
 interface LoginLayoutProps {
-    brandName?: string;
-    tagline?: React.ReactNode;
-    subtitle?: string;
+    title?: React.ReactNode;
+    subtitle?: React.ReactNode;
+    brandIcon?: React.ReactNode;
+    children: React.ReactNode;
+    className?: string;
+    /** (Deprecated) terminal lines from legacy layout, kept for backwards compatibility */
     terminalLines?: string[];
+    /** (Deprecated) tagline, kept for backwards compatibility */
+    tagline?: React.ReactNode;
+    /** (Deprecated) footerLinks, kept for backwards compatibility */
     footerLinks?: {
         label: string;
         href: string;
     }[];
-    children: React.ReactNode;
-    className?: string;
 }
-declare function LoginLayout({ brandName, tagline, subtitle, terminalLines, footerLinks, children, className, }: LoginLayoutProps): react_jsx_runtime.JSX.Element;
+declare function LoginLayout({ title, subtitle, brandIcon, children, className, }: LoginLayoutProps): react_jsx_runtime.JSX.Element;
 
 export { AuthHeader, type AuthHeaderProps, GitHubLoginButton, type GitHubLoginButtonProps, LoginLayout, type LoginLayoutProps, type SessionUser, UserMenu, type UserMenuProps };

package/dist/auth.js

@@ -3,9 +3,9 @@ import {
   GitHubLoginButton,
   LoginLayout,
   UserMenu
-} from "./chunk-XTPAWK7L.js";
-import "./chunk-WBQ7VULC.js";
-import "./chunk-TSE423UF.js";
+} from "./chunk-VOUV7GGB.js";
+import "./chunk-34A66VBG.js";
+import "./chunk-2QZ6G7NM.js";
 import "./chunk-RQHJBTEU.js";
 export {
   AuthHeader,

package/dist/{chat-container-Cg-GwyiK.d.ts → chat-container-f4yEs6KN.d.ts}

@@ -50,8 +50,16 @@ interface ChatInputProps {
     /** Drop zone overlay description */
     dropDescription?: string;
     className?: string;
+    /** Label above the input. Set to null to hide. Default: "Agent Command Deck" */
+    inputLabel?: string | null;
+    /** Status text shown when idle. Set to null to hide. Default: "Ready for next instruction" */
+    idleStatus?: string | null;
+    /** Status text shown when streaming. Set to null to hide. Default: "Streaming response" */
+    streamingStatus?: string | null;
+    /** Hide the Cmd+L focus shortcut hint */
+    hideShortcutHint?: boolean;
 }
-declare function ChatInput({ onSend, onCancel, isStreaming, disabled, placeholder, modelLabel, onModelClick, pendingFiles, onRemoveFile, onAttach, onAttachFolder, accept, dropTitle, dropDescription, className, }: ChatInputProps): react_jsx_runtime.JSX.Element;
+declare function ChatInput({ onSend, onCancel, isStreaming, disabled, placeholder, modelLabel, onModelClick, pendingFiles, onRemoveFile, onAttach, onAttachFolder, accept, dropTitle, dropDescription, className, inputLabel, idleStatus, streamingStatus, hideShortcutHint, }: ChatInputProps): react_jsx_runtime.JSX.Element;
 
 interface ChatContainerProps {
     messages: SessionMessage[];

package/dist/chat.d.ts

@@ -1,4 +1,4 @@
-export { C as ChatContainer, a as ChatContainerProps, b as ChatInput, c as ChatInputProps, P as PendingFile } from './chat-container-Cg-GwyiK.js';
+export { C as ChatContainer, a as ChatContainerProps, b as ChatInput, c as ChatInputProps, P as PendingFile } from './chat-container-f4yEs6KN.js';
 import * as React from 'react';
 import { ReactNode } from 'react';
 import * as react_jsx_runtime from 'react/jsx-runtime';
@@ -20,8 +20,18 @@ interface ChatMessageProps {
     /** Timestamp */
     timestamp?: Date;
     className?: string;
+    /** Custom user label. Default: "You" */
+    userLabel?: string;
+    /** Custom assistant label. Default: "Agent" */
+    assistantLabel?: string;
+    /** Hide the role label row entirely */
+    hideRoleLabel?: boolean;
+    /** Hide the avatar icon */
+    hideAvatar?: boolean;
+    /** Custom avatar element (replaces default User/Bot icon) */
+    avatar?: ReactNode;
 }
-declare function ChatMessage({ role, content, toolCalls, isStreaming, timestamp, className, }: ChatMessageProps): react_jsx_runtime.JSX.Element;
+declare function ChatMessage({ role, content, toolCalls, isStreaming, timestamp, className, userLabel, assistantLabel, hideRoleLabel, hideAvatar, avatar, }: ChatMessageProps): react_jsx_runtime.JSX.Element;
 
 interface MessageListProps {
     groups: GroupedMessage[];

package/dist/chat.js

@@ -1,6 +1,6 @@
 import {
   ChatMessage
-} from "./chunk-GW4GRAWJ.js";
+} from "./chunk-GSZA3TSY.js";
 import {
   AgentTimeline,
   ChatContainer,
@@ -8,17 +8,17 @@ import {
   MessageList,
   ThinkingIndicator,
   UserMessage
-} from "./chunk-RKXIRRKQ.js";
-import "./chunk-CNWVHQFY.js";
-import "./chunk-ZMWWE5RF.js";
+} from "./chunk-BUOQTBTO.js";
+import "./chunk-54SQQMMM.js";
+import "./chunk-EXSOPXIY.js";
 import "./chunk-HRMUF35V.js";
-import "./chunk-MJUDMVRU.js";
+import "./chunk-MT5FJ3ZT.js";
 import "./chunk-BX6AQMUS.js";
-import "./chunk-OVNLOE3Y.js";
-import "./chunk-JP725R4W.js";
-import "./chunk-3HW53XTH.js";
-import "./chunk-TDYQBLL5.js";
-import "./chunk-TSE423UF.js";
+import "./chunk-WXK43R62.js";
+import "./chunk-34I7UFSX.js";
+import "./chunk-T7HMZEVO.js";
+import "./chunk-ZMNSRDMH.js";
+import "./chunk-2QZ6G7NM.js";
 import "./chunk-RQHJBTEU.js";
 export {
   AgentTimeline,

package/dist/{chunk-TSE423UF.js → chunk-2QZ6G7NM.js}

@@ -12,13 +12,13 @@ var buttonVariants = cva(
   {
     variants: {
       variant: {
-        default: "bg-[var(--btn-primary-bg)] text-primary-foreground shadow-[var(--shadow-accent)] hover:bg-[var(--btn-primary-hover)] active:scale-[0.97] duration-[var(--transition-fast)]",
-        destructive: "bg-destructive/15 border border-destructive/25 text-destructive hover:bg-destructive/22 active:scale-[0.97] duration-[var(--transition-fast)]",
-        outline: "border border-[var(--border-default)] bg-transparent hover:bg-[var(--bg-hover)] hover:border-[var(--border-hover)] active:scale-[0.97] duration-[var(--transition-fast)]",
-        secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/70 active:scale-[0.97] duration-[var(--transition-fast)]",
-        ghost: "hover:bg-[var(--bg-hover)] hover:text-foreground duration-[var(--transition-fast)]",
+        default: "bg-primary/20 border border-primary/30 text-primary hover:text-primary-foreground shadow-[var(--shadow-accent)] hover:bg-primary hover:shadow-[var(--shadow-glow)] active:scale-[0.97] duration-[var(--transition-fast)]",
+        destructive: "bg-destructive/10 border border-destructive/30 text-destructive hover:text-destructive-foreground hover:bg-destructive/80 active:scale-[0.97] duration-[var(--transition-fast)]",
+        outline: "border border-border bg-card/50 backdrop-blur-xl hover:bg-muted hover:border-primary/20 active:scale-[0.97] duration-[var(--transition-fast)] text-foreground shadow-sm",
+        secondary: "bg-muted/50 border border-border text-foreground backdrop-blur-xl hover:bg-muted active:scale-[0.97] duration-[var(--transition-fast)] shadow-sm",
+        ghost: "hover:bg-muted hover:text-foreground duration-[var(--transition-fast)] text-muted-foreground border border-transparent",
         link: "text-primary underline-offset-4 hover:underline",
-        sandbox: "bg-[image:var(--accent-gradient-strong)] text-white shadow-[var(--shadow-accent)] hover:brightness-110 active:scale-[0.97] duration-[var(--transition-fast)]"
+        sandbox: "bg-[image:var(--accent-gradient-strong)] text-white shadow-[var(--shadow-accent)] backdrop-blur-2xl border border-[var(--border-accent)] hover:brightness-110 active:scale-[0.97] duration-[var(--transition-fast)]"
       },
       size: {
         default: "h-[var(--control-height)] px-4 py-2",

package/dist/{chunk-WBQ7VULC.js → chunk-34A66VBG.js}

@@ -57,7 +57,7 @@ var DropdownMenuSubTrigger = React2.forwardRef(({ className, inset, children, ..
     ref,
     className: cn(
       "flex cursor-default select-none items-center rounded-md px-2 py-1.5 text-sm outline-none",
-      "focus:bg-accent data-[state=open]:bg-[var(--depth-3)]",
+      "focus:bg-accent data-[state=open]:bg-muted/50",
       inset && "pl-8",
       className
     ),
@@ -74,7 +74,7 @@ var DropdownMenuSubContent = React2.forwardRef(({ className, ...props }, ref) =>
   {
     ref,
     className: cn(
-      "z-50 min-w-[8rem] overflow-hidden rounded-xl border border-[var(--border-subtle)] bg-[var(--depth-2)] p-1 text-[var(--text-primary)] shadow-[var(--shadow-card)]",
+      "z-50 min-w-[8rem] overflow-hidden rounded-xl border border-border bg-card p-1 text-foreground shadow-[var(--shadow-card)]",
       "data-[state=closed]:animate-out data-[state=open]:animate-in",
       "data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
       "data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95",
@@ -92,7 +92,7 @@ var DropdownMenuContent = React2.forwardRef(({ className, sideOffset = 4, ...pro
     ref,
     sideOffset,
     className: cn(
-      "z-50 min-w-[8rem] overflow-hidden rounded-xl border border-[var(--border-subtle)] bg-[var(--depth-2)] p-1 text-[var(--text-primary)] shadow-[var(--shadow-card)]",
+      "z-50 min-w-[8rem] overflow-hidden rounded-xl border border-border bg-card p-1 text-foreground shadow-[var(--shadow-card)]",
       "data-[state=closed]:animate-out data-[state=open]:animate-in",
       "data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
       "data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95",
@@ -110,7 +110,7 @@ var DropdownMenuItem = React2.forwardRef(({ className, inset, ...props }, ref) =
     ref,
     className: cn(
       "relative flex cursor-pointer select-none items-center rounded-md px-2 py-1.5 text-sm outline-none transition-colors",
-      "focus:bg-[var(--depth-3)] focus:text-[var(--text-primary)]",
+      "focus:bg-muted/50 focus:text-foreground",
       "data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
       inset && "pl-8",
       className
@@ -125,7 +125,7 @@ var DropdownMenuCheckboxItem = React2.forwardRef(({ className, children, checked
     ref,
     className: cn(
       "relative flex cursor-pointer select-none items-center rounded-md py-1.5 pr-2 pl-8 text-sm outline-none transition-colors",
-      "focus:bg-[var(--depth-3)] focus:text-[var(--text-primary)]",
+      "focus:bg-muted/50 focus:text-foreground",
       "data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
       className
     ),
@@ -144,7 +144,7 @@ var DropdownMenuRadioItem = React2.forwardRef(({ className, children, ...props }
     ref,
     className: cn(
       "relative flex cursor-pointer select-none items-center rounded-md py-1.5 pr-2 pl-8 text-sm outline-none transition-colors",
-      "focus:bg-[var(--depth-3)] focus:text-[var(--text-primary)]",
+      "focus:bg-muted/50 focus:text-foreground",
       "data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
       className
     ),
@@ -173,7 +173,7 @@ var DropdownMenuSeparator = React2.forwardRef(({ className, ...props }, ref) =>
   DropdownMenuPrimitive.Separator,
   {
     ref,
-    className: cn("-mx-1 my-1 h-px bg-[var(--border-subtle)]", className),
+    className: cn("-mx-1 my-1 h-px bg-border", className),
     ...props
   }
 ));

package/dist/{chunk-JP725R4W.js → chunk-34I7UFSX.js}

@@ -30,7 +30,7 @@ var TableFooter = React.forwardRef(({ className, ...props }, ref) => /* @__PURE_
   {
     ref,
     className: cn(
-      "border-t bg-[var(--depth-2)] font-medium [&>tr]:last:border-b-0",
+      "border-t bg-card font-medium [&>tr]:last:border-b-0",
       className
     ),
     ...props
@@ -42,7 +42,7 @@ var TableRow = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ *
   {
     ref,
     className: cn(
-      "border-border border-b transition-colors hover:bg-[var(--depth-3)] data-[state=selected]:bg-[var(--depth-3)]",
+      "border-border border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted/50",
       className
     ),
     ...props

package/dist/{chunk-YS66Q3RC.js → chunk-3CJ2SOEI.js}

@@ -16,7 +16,7 @@ var DialogOverlay = React.forwardRef(({ className, ...props }, ref) => /* @__PUR
   {
     ref,
     className: cn(
-      "fixed inset-0 z-50 bg-black/85",
+      "fixed inset-0 z-50 bg-black/80 backdrop-blur-sm",
       "data-[state=closed]:animate-out data-[state=open]:animate-in",
       "data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
       className
@@ -38,7 +38,7 @@ var DialogContent = React.forwardRef(({ className, children, variant = "default"
         ref,
         className: cn(
           "fixed top-[50%] left-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%]",
-          "gap-4 rounded-xl border bg-card p-6 shadow-xl duration-200",
+          "gap-4 rounded-2xl border bg-card/95 backdrop-blur-xl p-6 shadow-2xl duration-200",
           "data-[state=closed]:animate-out data-[state=open]:animate-in",
           "data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
           "data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95",

package/dist/{chunk-CNWVHQFY.js → chunk-54SQQMMM.js}

@@ -91,26 +91,9 @@ function useRunGroups({
 }
 
 // src/hooks/use-run-collapse-state.ts
-import { useCallback, useEffect, useRef, useState } from "react";
-var AUTO_COLLAPSE_DELAY = 1e3;
+import { useCallback, useState } from "react";
 function useRunCollapseState(runs) {
   const [collapsedMap, setCollapsedMap] = useState({});
-  const userOverrides = useRef(/* @__PURE__ */ new Set());
-  const completedRuns = useRef(/* @__PURE__ */ new Set());
-  useEffect(() => {
-    const timers = [];
-    for (const run of runs) {
-      if (run.isComplete && !completedRuns.current.has(run.id)) {
-        completedRuns.current.add(run.id);
-        if (userOverrides.current.has(run.id)) continue;
-        const timer = setTimeout(() => {
-          setCollapsedMap((prev) => ({ ...prev, [run.id]: true }));
-        }, AUTO_COLLAPSE_DELAY);
-        timers.push(timer);
-      }
-    }
-    return () => timers.forEach(clearTimeout);
-  }, [runs]);
   const isCollapsed = useCallback(
     (runId) => {
       return collapsedMap[runId] ?? false;
@@ -118,7 +101,6 @@ function useRunCollapseState(runs) {
     [collapsedMap]
   );
   const toggleCollapse = useCallback((runId) => {
-    userOverrides.current.add(runId);
     setCollapsedMap((prev) => ({ ...prev, [runId]: !prev[runId] }));
   }, []);
   return { isCollapsed, toggleCollapse };
@@ -127,20 +109,20 @@ function useRunCollapseState(runs) {
 // src/hooks/use-auto-scroll.ts
 import {
   useCallback as useCallback2,
-  useEffect as useEffect2,
-  useRef as useRef2,
+  useEffect,
+  useRef,
   useState as useState2
 } from "react";
 var BOTTOM_THRESHOLD = 40;
 function useAutoScroll(containerRef, deps = []) {
   const [isAtBottom, setIsAtBottom] = useState2(true);
-  const userScrolledUp = useRef2(false);
+  const userScrolledUp = useRef(false);
   const checkBottom = useCallback2(() => {
     const el = containerRef.current;
     if (!el) return true;
     return el.scrollHeight - el.scrollTop - el.clientHeight < BOTTOM_THRESHOLD;
   }, [containerRef]);
-  useEffect2(() => {
+  useEffect(() => {
     const el = containerRef.current;
     if (!el) return;
     const onScroll = () => {
@@ -151,7 +133,7 @@ function useAutoScroll(containerRef, deps = []) {
     el.addEventListener("scroll", onScroll, { passive: true });
     return () => el.removeEventListener("scroll", onScroll);
   }, [containerRef, checkBottom]);
-  useEffect2(() => {
+  useEffect(() => {
     if (userScrolledUp.current) return;
     const el = containerRef.current;
     if (!el) return;

package/dist/{chunk-DLCFZDGX.js → chunk-5UM2XMEJ.js}

@@ -9,7 +9,6 @@ function usePtySession({ apiUrl, token, onData }) {
   const retryCountRef = useRef(0);
   const mountedRef = useRef(true);
   const onDataRef = useRef(onData);
-  onDataRef.current = onData;
   const connectStreamRef = useRef(null);
   const abortStream = useCallback(() => {
     if (retryTimerRef.current) {
@@ -117,6 +116,7 @@ function usePtySession({ apiUrl, token, onData }) {
       }
     }
   }, [apiUrl, token, abortStream]);
+  onDataRef.current = onData;
   connectStreamRef.current = connectStream;
   const connect = useCallback(async () => {
     cleanup();
@@ -149,21 +149,46 @@ function usePtySession({ apiUrl, token, onData }) {
       }
     }
   }, [apiUrl, token, cleanup, connectStream]);
+  const resizeTerminal = useCallback(async (cols, rows) => {
+    const sid = sessionIdRef.current;
+    if (!sid || cols <= 0 || rows <= 0) return;
+    try {
+      const res = await fetch(`${apiUrl}/terminals/${sid}`, {
+        method: "PATCH",
+        headers: {
+          Authorization: `Bearer ${token}`,
+          "Content-Type": "application/json"
+        },
+        credentials: "include",
+        body: JSON.stringify({ cols, rows })
+      });
+      if (!res.ok) {
+        console.error("Failed to resize terminal:", res.status);
+      }
+    } catch (err) {
+      console.error("Failed to resize terminal", err);
+    }
+  }, [apiUrl, token]);
   const sendCommand = useCallback(async (command) => {
     const sid = sessionIdRef.current;
     if (!sid) return;
-    const res = await fetch(`${apiUrl}/terminals/${sid}/input`, {
-      method: "POST",
-      headers: {
-        Authorization: `Bearer ${token}`,
-        "Content-Type": "application/json"
-      },
-      credentials: "include",
-      body: JSON.stringify({ data: command })
-    });
-    if (!res.ok) {
-      const text = await res.text();
-      throw new Error(text || `Input failed: ${res.status}`);
+    try {
+      const res = await fetch(`${apiUrl}/terminals/${sid}/input`, {
+        method: "POST",
+        headers: {
+          Authorization: `Bearer ${token}`,
+          "Content-Type": "application/json"
+        },
+        credentials: "include",
+        body: JSON.stringify({ data: command })
+      });
+      if (!res.ok) {
+        const text = await res.text();
+        throw new Error(text || `Input failed: ${res.status}`);
+      }
+    } catch (err) {
+      console.error("Failed to send command", err);
+      throw err;
     }
   }, [apiUrl, token]);
   useEffect(() => {
@@ -174,7 +199,7 @@ function usePtySession({ apiUrl, token, onData }) {
       cleanup();
     };
   }, [connect, cleanup]);
-  return { isConnected, error, sendCommand, reconnect: connect };
+  return { isConnected, error, sendCommand, resizeTerminal, reconnect: connect };
 }
 
 export {

package/dist/{chunk-YYGECNZZ.js → chunk-66EZOYZR.js}

@@ -52,7 +52,7 @@ function Skeleton({
   return /* @__PURE__ */ jsx2(
     "div",
     {
-      className: cn("animate-pulse rounded-lg bg-[var(--depth-3)]", className),
+      className: cn("animate-pulse rounded-lg bg-muted/50", className),
       ...props
     }
   );
@@ -62,7 +62,7 @@ function SkeletonCard({ className }) {
     "div",
     {
       className: cn(
-        "space-y-4 rounded-xl border border-[var(--border-subtle)] bg-[var(--bg-card)] p-6",
+        "space-y-4 rounded-xl border border-border bg-card p-6",
         className
       ),
       children: [
@@ -79,7 +79,7 @@ function SkeletonCard({ className }) {
 }
 function SkeletonTable({ rows = 5 }) {
   return /* @__PURE__ */ jsxs2("div", { className: "space-y-3", children: [
-    /* @__PURE__ */ jsxs2("div", { className: "flex gap-4 border-[var(--border-subtle)] border-b pb-2", children: [
+    /* @__PURE__ */ jsxs2("div", { className: "flex gap-4 border-border border-b pb-2", children: [
       /* @__PURE__ */ jsx2(Skeleton, { className: "h-4 w-1/4" }),
       /* @__PURE__ */ jsx2(Skeleton, { className: "h-4 w-1/4" }),
       /* @__PURE__ */ jsx2(Skeleton, { className: "h-4 w-1/4" }),

package/dist/chunk-7U2Z23NE.js

@@ -0,0 +1,49 @@
+import {
+  cn
+} from "./chunk-RQHJBTEU.js";
+
+// src/dashboard/template-card.tsx
+import { ArrowRight } from "lucide-react";
+import { jsx, jsxs } from "react/jsx-runtime";
+function TemplateCard({ template, onUseTemplate, className }) {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "group relative flex flex-col justify-between rounded-2xl border border-border bg-card p-6 transition-all hover:border-primary/30 hover:shadow-md",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsxs("div", { children: [
+          /* @__PURE__ */ jsx("div", { className: "mb-4 flex h-12 w-12 items-center justify-center rounded-xl bg-muted border border-border", children: template.icon ?? /* @__PURE__ */ jsx("span", { className: "text-lg font-bold text-primary", children: template.name.charAt(0).toUpperCase() }) }),
+          /* @__PURE__ */ jsx("h3", { className: "mb-1 text-base font-bold text-foreground", children: template.name }),
+          /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground leading-relaxed line-clamp-2", children: template.description }),
+          template.tags && template.tags.length > 0 && /* @__PURE__ */ jsx("div", { className: "mt-3 flex flex-wrap gap-1.5", children: template.tags.map((tag, i) => /* @__PURE__ */ jsx(
+            "span",
+            {
+              className: "rounded-full bg-muted px-2 py-0.5 text-[10px] font-medium text-muted-foreground",
+              children: tag
+            },
+            `${tag}-${i}`
+          )) })
+        ] }),
+        /* @__PURE__ */ jsxs(
+          "button",
+          {
+            type: "button",
+            onClick: () => onUseTemplate(template.id),
+            className: "mt-5 inline-flex w-full items-center justify-center gap-2 rounded-xl bg-primary/10 border border-primary/20 px-4 py-2.5 text-sm font-bold text-primary transition-colors hover:bg-primary hover:text-primary-foreground active:scale-[0.98]",
+            children: [
+              "Use Template",
+              /* @__PURE__ */ jsx(ArrowRight, { className: "h-4 w-4 transition-transform group-hover:translate-x-0.5" })
+            ]
+          }
+        )
+      ]
+    }
+  );
+}
+
+export {
+  TemplateCard
+};