From 89dfd485cb687006850f1e7b34046423bb9c9e6c Mon Sep 17 00:00:00 2001
From: Mark-Kadphol <kadphol.l@7solutions.co.th>
Date: Wed, 2 Oct 2024 14:13:40 +0700
Subject: [PATCH 1/2] feat: add card cookies alert

---
 .../src/CardCookiesAlert.stories.tsx          | 36 +++++++++
 .../src/CardCookiesAlert.tsx                  | 73 +++++++++++++++++++
 blocks/card-cookies-alert/src/index.ts        |  1 +
 blocks/card-cookies-alert/usage.mdx           | 14 ++++
 4 files changed, 124 insertions(+)
 create mode 100644 blocks/card-cookies-alert/src/CardCookiesAlert.stories.tsx
 create mode 100644 blocks/card-cookies-alert/src/CardCookiesAlert.tsx
 create mode 100644 blocks/card-cookies-alert/src/index.ts
 create mode 100644 blocks/card-cookies-alert/usage.mdx

diff --git a/blocks/card-cookies-alert/src/CardCookiesAlert.stories.tsx b/blocks/card-cookies-alert/src/CardCookiesAlert.stories.tsx
new file mode 100644
index 0000000..70b0843
--- /dev/null
+++ b/blocks/card-cookies-alert/src/CardCookiesAlert.stories.tsx
@@ -0,0 +1,36 @@
+import React from "react";
+import type { Meta, StoryObj } from "@storybook/react";
+import storyDialog from "../../../.storybook/decorators/storyDialog";
+import Usage from "../usage.mdx";
+import CardCookiesAlert from "./CardCookiesAlert";
+
+const meta = {
+  title: "Card/Cookies/Alert",
+  component: CardCookiesAlert,
+  parameters: {
+    layout: "centered",
+    githubUsername: "", // (optional) Your github username. If provided, your avatar will be displayed in the story toolbar
+  },
+  decorators: [storyDialog(Usage)],
+} satisfies Meta<typeof CardCookiesAlert>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Alert: Story = {
+  render: () => (
+    <div 
+      style={{
+        width: 340,
+        padding: 20,
+        maxWidth: "100%",
+        resize: "horizontal",
+        overflow: "auto",
+      }}
+    >
+      <CardCookiesAlert />
+    </div>
+  ),
+};
+
+
diff --git a/blocks/card-cookies-alert/src/CardCookiesAlert.tsx b/blocks/card-cookies-alert/src/CardCookiesAlert.tsx
new file mode 100644
index 0000000..faab4e3
--- /dev/null
+++ b/blocks/card-cookies-alert/src/CardCookiesAlert.tsx
@@ -0,0 +1,73 @@
+import React from "react";
+import { Alert, IconButton, SvgIcon } from "@mui/joy";
+import Button from "@mui/joy/Button";
+import Card from "@mui/joy/Card";
+import CardActions from "@mui/joy/CardActions";
+import CardContent from "@mui/joy/CardContent";
+import Typography from "@mui/joy/Typography";
+
+export default function CardCookiesAlert() {
+  return (
+    <Card
+      variant="plain"
+      sx={{
+        borderRadius: "xl",
+        boxShadow: "lg",
+        padding: "2rem",
+      }}
+      size="sm"
+    >
+      <CardContent
+        sx={{ display: "flex", flexDirection: "column", gap: "2rem" }}
+      >
+        <Alert
+          sx={{ padding: "0" }}
+          variant="plain"
+          endDecorator={
+            <IconButton variant="plain" sx={{ borderRadius: "xl" }}>
+              <SvgIcon>
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  width="24"
+                  height="24"
+                  viewBox="0 0 24 24"
+                  fill="none"
+                  stroke="currentColor"
+                  strokeWidth="2"
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  className="lucide lucide-x"
+                >
+                  <path d="M18 6 6 18" />
+                  <path d="m6 6 12 12" />
+                </svg>
+              </SvgIcon>
+            </IconButton>
+          }
+        >
+          <Typography level="title-md">We use cookies!</Typography>
+        </Alert>
+        <Typography color="neutral" level="body-sm">
+          Amet minim mollit non deserunt ullamco est sit aliqua dolor do amet
+          sint. Velit officia consequat duis enim velit mollit. Exercitation
+          veniam consequat sunt nostrud amet.
+        </Typography>
+      </CardContent>
+      <CardActions
+        sx={{
+          display: "flex",
+          gap: 1.5,
+          flexDirection: "column",
+          justifyItems: "center",
+        }}
+      >
+        <Button variant="soft" size="lg" sx={{ width: "100%" }}>
+          Configure cookies
+        </Button>
+        <Button variant="solid" size="lg" sx={{ width: "100%" }}>
+          Confirm
+        </Button>
+      </CardActions>
+    </Card>
+  );
+}
diff --git a/blocks/card-cookies-alert/src/index.ts b/blocks/card-cookies-alert/src/index.ts
new file mode 100644
index 0000000..38b5cbc
--- /dev/null
+++ b/blocks/card-cookies-alert/src/index.ts
@@ -0,0 +1 @@
+export { default as CardCookiesAlert } from "./CardCookiesAlert";
diff --git a/blocks/card-cookies-alert/usage.mdx b/blocks/card-cookies-alert/usage.mdx
new file mode 100644
index 0000000..16ddddc
--- /dev/null
+++ b/blocks/card-cookies-alert/usage.mdx
@@ -0,0 +1,14 @@
+import { Meta, Source } from "@storybook/blocks";
+import raw from "./src/CardCookiesAlert?raw";
+
+<Meta title="Card/Cookies/Alert" />
+
+## CLI
+
+```sh
+npx joy-treasury@latest clone card-cookies-alert
+```
+
+## CardCookiesAlert
+
+<Source code={raw} language="tsx" />

From ffc59239a6f35136cb271b8af3689baf191c4887 Mon Sep 17 00:00:00 2001
From: Mark-Kadphol <kadphol.l@7solutions.co.th>
Date: Wed, 2 Oct 2024 14:20:14 +0700
Subject: [PATCH 2/2] chore: add github username

---
 blocks/card-cookies-alert/src/CardCookiesAlert.stories.tsx | 6 ++----
 1 file changed, 2 insertions(+), 4 deletions(-)

diff --git a/blocks/card-cookies-alert/src/CardCookiesAlert.stories.tsx b/blocks/card-cookies-alert/src/CardCookiesAlert.stories.tsx
index 70b0843..9d916ce 100644
--- a/blocks/card-cookies-alert/src/CardCookiesAlert.stories.tsx
+++ b/blocks/card-cookies-alert/src/CardCookiesAlert.stories.tsx
@@ -9,7 +9,7 @@ const meta = {
   component: CardCookiesAlert,
   parameters: {
     layout: "centered",
-    githubUsername: "", // (optional) Your github username. If provided, your avatar will be displayed in the story toolbar
+    githubUsername: "Kadphol", // (optional) Your github username. If provided, your avatar will be displayed in the story toolbar
   },
   decorators: [storyDialog(Usage)],
 } satisfies Meta<typeof CardCookiesAlert>;
@@ -19,7 +19,7 @@ type Story = StoryObj<typeof meta>;
 
 export const Alert: Story = {
   render: () => (
-    <div 
+    <div
       style={{
         width: 340,
         padding: 20,
@@ -32,5 +32,3 @@ export const Alert: Story = {
     </div>
   ),
 };
-
-