feat: add sample 13

src/components/icons/SuitcaseFill.tsx

@@ -0,0 +1,16 @@
+import type { SVGProps } from "react";
+function SvgSuitcaseFill(props: SVGProps<SVGSVGElement>) {
+  return (
+    <svg height="1em" viewBox="0 0 24 24" width="1em" xmlns="http://www.w3.org/2000/svg" {...props}>
+      <g fill="none" fillRule="evenodd">
+        <path d="M24 0v24H0V0zM12.594 23.258l-.012.002-.071.035-.02.004-.014-.004-.071-.036c-.01-.003-.019 0-.024.006l-.004.01-.017.428.005.02.01.013.104.074.015.004.012-.004.104-.074.012-.016.004-.017-.017-.427c-.002-.01-.009-.017-.016-.018m.264-.113-.014.002-.184.093-.01.01-.003.011.018.43.005.012.008.008.201.092c.012.004.023 0 .029-.008l.004-.014-.034-.614c-.003-.012-.01-.02-.02-.022m-.715.002a.023.023 0 0 0-.027.006l-.006.014-.034.614c0 .012.007.02.017.024l.015-.002.201-.093.01-.008.003-.011.018-.43-.003-.012-.01-.01z" />
+        <path
+          d="M10 4a3 3 0 0 0-3 3H4a2 2 0 0 0-2 2v10a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V9a2 2 0 0 0-2-2h-3a3 3 0 0 0-3-3zm0 2a1 1 0 0 0-1 1h6a1 1 0 0 0-1-1zm-6 7a1 1 0 1 0 0 2h16a1 1 0 1 0 0-2z"
+          fill="currentColor"
+        />
+      </g>
+    </svg>
+  );
+}
+
+export default SvgSuitcaseFill;

src/components/icons/index.ts

@@ -20,6 +20,8 @@ export { default as PencilFill } from "./PencilFill";
 
 export { default as SettingsFill } from "./SettingsFill";
 
+export { default as SuitcaseFill } from "./SuitcaseFill";
+
 export { default as UnhappyFill } from "./UnhappyFill";
 
 export { default as UploadLine } from "./UploadLine";

src/components/samples-preview/sample-13.tsx

@@ -0,0 +1,71 @@
+import { css } from "@root/styled-system/css";
+import { circle } from "@root/styled-system/patterns";
+
+import { SuitcaseFill } from "@/components/icons";
+
+import { applyStyle, cssFgVar } from "./utils";
+
+const classes = {
+  root: css({
+    position: "relative",
+    gap: "4",
+    p: "6",
+    rounded: "xl",
+    display: "flex",
+    alignItems: "center",
+  }),
+  heading: css({ textStyle: "body-lg", fontWeight: "500" }),
+  icon: circle({ size: "16", fontSize: "icon-32" }),
+  body: css({ textStyle: "body-base", mt: "1" }),
+  decorator: css({ position: "absolute", top: "-4", right: "-3" }),
+};
+
+export function Sample13() {
+  return (
+    <article className={classes.root} style={{ ...applyStyle("bg"), ...applyStyle("color") }}>
+      <div className={classes.icon} style={applyStyle("bg", { fromVar: cssFgVar, alpha: "0.16" })}>
+        <SuitcaseFill style={applyStyle("color", { alpha: "1" })} />
+      </div>
+      <div>
+        <p className={classes.heading}>Dear Client</p>
+        <p className={classes.body}>
+          Join our online community. It helps in managing your projects
+        </p>
+      </div>
+      <Decorator />
+    </article>
+  );
+}
+
+function Decorator() {
+  return (
+    <svg
+      className={classes.decorator}
+      fill="none"
+      height="81"
+      style={applyStyle("color", { alpha: ".6" })}
+      viewBox="0 0 75 81"
+      width="75"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M32.7002 6.80787C37.656 18.7733 29.9084 34.9035 41.3047 44.952C47.8754 50.7456 57.7286 51.9261 67.7055 51.0387"
+        stroke="currentColor"
+        strokeLinecap="round"
+        strokeWidth="4"
+      />
+      <path
+        d="M17.2605 10.443C31.298 22.2685 17.1271 43.2831 30.8944 55.4221C40.2347 63.6577 56.2077 62.5718 69.7404 59.4751"
+        stroke="currentColor"
+        strokeLinecap="round"
+        strokeWidth="4"
+      />
+      <path
+        d="M2 15.5912C4.39599 16.5454 6.58754 17.7868 8.47393 19.376C22.5114 31.2014 8.34054 52.216 22.1078 64.355C34.1978 75.0151 57.4006 70.0575 72.0396 65.3369"
+        stroke="currentColor"
+        strokeLinecap="round"
+        strokeWidth="4"
+      />
+    </svg>
+  );
+}

src/components/samples-preview/sample-preview.stories.tsx

@@ -14,6 +14,7 @@ import { Sample9 } from "./sample-9";
 import { Sample10 } from "./sample-10";
 import { Sample11 } from "./sample-11";
 import { Sample12 } from "./sample-12";
+import { Sample13 } from "./sample-13";
 import { bgVar, fgVar } from "./utils";
 
 export default {
@@ -95,3 +96,8 @@ export const Sample_12: Story = {
   name: "Sample 12",
   render: () => <Sample12 />,
 };
+
+export const Sample_13: Story = {
+  name: "Sample 13",
+  render: () => <Sample13 />,
+};