@tipp/ui 2.3.18 → 2.3.19

package/dist/index.cjs

@@ -6136,26 +6136,28 @@ function TrainingInfoGuidelineItem({
 }) {
   const [isLoading, setIsLoading] = (0, import_react46.useState)(true);
   if (value.type === "file") {
-    return /* @__PURE__ */ (0, import_jsx_runtime92.jsxs)(
-      Button,
+    return /* @__PURE__ */ (0, import_jsx_runtime92.jsx)(
+      TrainingInfoGuidelineButton,
       {
+        description: value.filename,
+        icon: /* @__PURE__ */ (0, import_jsx_runtime92.jsx)(import_react_icons9.FileTextIcon, {}),
         onClick: () => {
           onClickFileDownload({ url: value.url, filename: value.filename });
         },
-        variant: "surface",
-        children: [
-          /* @__PURE__ */ (0, import_jsx_runtime92.jsx)(import_react_icons9.FileTextIcon, {}),
-          value.downloadButtonName
-        ]
+        title: value.downloadButtonName
       }
     );
   }
   if (value.type === "video") {
     return /* @__PURE__ */ (0, import_jsx_runtime92.jsxs)(Dialog.Root, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime92.jsx)(Dialog.Trigger, { children: /* @__PURE__ */ (0, import_jsx_runtime92.jsxs)(Button, { variant: "surface", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime92.jsx)(import_react_icons9.VideoIcon, {}),
-        value.videoTitle
-      ] }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime92.jsx)(Dialog.Trigger, { children: /* @__PURE__ */ (0, import_jsx_runtime92.jsx)(
+        TrainingInfoGuidelineButton,
+        {
+          description: "\uC601\uC0C1",
+          icon: /* @__PURE__ */ (0, import_jsx_runtime92.jsx)(import_react_icons9.VideoIcon, {}),
+          title: value.videoTitle
+        }
+      ) }),
       /* @__PURE__ */ (0, import_jsx_runtime92.jsx)(
         Dialog.Content,
         {
@@ -6218,6 +6220,29 @@ function TrainingInfoGuidelineItem({
   }
   return null;
 }
+function TrainingInfoGuidelineButton({
+  icon,
+  title,
+  description,
+  onClick
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime92.jsx)(
+    Button,
+    {
+      onClick,
+      style: { width: "100%", height: "48px", textAlign: "left" },
+      variant: "outline",
+      children: /* @__PURE__ */ (0, import_jsx_runtime92.jsxs)(import_themes22.Flex, { align: "center", gap: "2", width: "100%", children: [
+        icon,
+        /* @__PURE__ */ (0, import_jsx_runtime92.jsx)(import_themes39.Separator, { orientation: "vertical", size: "2" }),
+        /* @__PURE__ */ (0, import_jsx_runtime92.jsxs)(import_themes6.Box, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime92.jsx)(Typo, { as: "div", children: title }),
+          typeof description === "string" && description !== "" ? /* @__PURE__ */ (0, import_jsx_runtime92.jsx)(Typo, { variant: "caption", children: description }) : null
+        ] })
+      ] })
+    }
+  );
+}
 
 // src/theme/use-theme.tsx
 var import_themes56 = require("@radix-ui/themes");