feat: card-people-mentor (#97)

blocks/card-people-mentor/src/CardPeopleMentor.stories.tsx

@@ -0,0 +1,34 @@
+import React from "react";
+import type { Meta, StoryObj } from "@storybook/react";
+import storyDialog from "../../../.storybook/decorators/storyDialog";
+import Usage from "../usage.mdx";
+import CardPeopleMentor from "./CardPeopleMentor";
+
+const meta = {
+  title: "Card/People/Mentor",
+  component: CardPeopleMentor,
+  parameters: {
+    layout: "centered",
+    githubUsername: "mjkodkks",
+  },
+  decorators: [storyDialog(Usage)],
+} satisfies Meta<typeof CardPeopleMentor>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Mentor: Story = {
+  render: () => (
+    <div
+      style={{
+        width: 400,
+        padding: 20,
+        maxWidth: "100%",
+        resize: "horizontal",
+        overflow: "auto",
+      }}
+    >
+      <CardPeopleMentor />
+    </div>
+  ),
+};

blocks/card-people-mentor/src/CardPeopleMentor.tsx

@@ -0,0 +1,41 @@
+import React from "react";
+import Card from "@mui/joy/Card";
+import CardContent from "@mui/joy/CardContent";
+import Typography from "@mui/joy/Typography";
+import Avatar from "@mui/joy/Avatar";
+import Box from "@mui/joy/Box";
+
+export default function CardPeopleMentor() {
+  return (
+    <Card
+      variant="outlined"
+      sx={{ borderRadius: "xl", boxShadow: "xs", backgroundColor: "background.body" }}
+    >
+      <CardContent orientation="horizontal" sx={{ alignItems: "center" }}>
+        <Avatar
+          alt="Shawn Carter"
+          src="https://mui.com/static/images/avatar/1.jpg"
+          size="lg" />
+        <Box>
+          <Typography level="title-md" noWrap>
+            Richard Wyatt
+          </Typography>
+          <Typography level="body-sm" textColor="neutral.400" noWrap>
+            Director, Producer
+          </Typography>
+        </Box>
+        <Box sx={{
+          borderRadius: "lg",
+          marginLeft: "auto", 
+          padding: "6px 16px", 
+          backgroundColor: "#FE943C", 
+          boxShadow: "0px 6px 16px 0px rgba(255, 163, 88, 0.606);"
+        }}>
+          <Typography level="body-md" fontWeight="lg" sx={{ color: "common.white" }}>
+            MENTOR
+          </Typography>
+        </Box>
+      </CardContent>
+    </Card>
+  );
+}

blocks/card-people-mentor/src/index.ts

@@ -0,0 +1 @@
+export { default as CardPeopleMentor } from "./CardPeopleMentor";

blocks/card-people-mentor/usage.mdx

@@ -0,0 +1,14 @@
+import { Meta, Source } from "@storybook/blocks";
+import raw from "./src/CardPeopleMentor?raw";
+
+<Meta title="Card/People/Mentor" />
+
+## CLI
+
+```sh
+npx joy-treasury@latest clone card-people-mentor
+```
+
+## CardPeopleMentor
+
+<Source code={raw} language="tsx" />