components: card-grid-course (#66)

blocks/card-grid-course/src/CardGridCourse.stories.tsx

@@ -0,0 +1,49 @@
+import React from "react";
+import type { Meta, StoryObj } from "@storybook/react";
+import { Box } from "@mui/joy";
+import storyDialog from "../../../.storybook/decorators/storyDialog";
+import Usage from "../usage.mdx";
+import CardGridCourse, { CardGridCourseProps, COLORS } from "./CardGridCourse";
+import IconScience from "./IconScience";
+import IconWrapper from "./IconWrapper";
+
+const meta: Meta<typeof CardGridCourse> = {
+  title: "Card/Grid/Course",
+  component: CardGridCourse,
+  parameters: {
+    layout: "centered",
+    githubUsername: "fResult", // (optional) Your github username. If provided, your avatar will be displayed in the story toolbar
+  },
+  decorators: [storyDialog(Usage)],
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+const props: CardGridCourseProps = {
+  icon: (
+    <IconWrapper bgColor="#E3F7FA">
+      <IconScience className="card--icon" sx={{ color: '#54C7D7' }} />
+    </IconWrapper>
+  ),
+  title: "Human Computer Interaction",
+  description:
+    "How to carry out the design process involved in interaction design, navigation design, and screen design.",
+  url: "#test",
+};
+
+export const Course: Story = {
+  render: () => (
+    <div
+      style={{
+        width: 340,
+        padding: 20,
+        maxWidth: "100%",
+        resize: "horizontal",
+        overflow: "auto",
+      }}
+    >
+      <CardGridCourse {...props} />
+    </div>
+  ),
+};

blocks/card-grid-course/src/CardGridCourse.tsx

@@ -0,0 +1,103 @@
+import React from 'react'
+import type { FC, ReactNode } from "react";
+import { Link, SvgIcon } from "@mui/joy";
+import Card from "@mui/joy/Card";
+import Typography from "@mui/joy/Typography";
+
+export const COLORS = {
+  white: "#FFF",
+  vodka: "#B6B9EE",
+  iris: "#434BD2",
+  coolGrey: "#8D8EAD",
+} satisfies Record<string, `#${string}`>;
+
+export type CardGridCourseProps = {
+  icon: ReactNode;
+  title: string;
+  description: string;
+  url: string;
+};
+
+const TRANSITION_ALL = "all .25s ease-out";
+
+const CardGridCourse: FC<CardGridCourseProps> = ({
+  icon,
+  title,
+  description,
+  url = "#",
+}) => {
+  return (
+    <Card
+      variant="solid"
+      sx={{
+        transition: TRANSITION_ALL,
+        bgcolor: COLORS.white,
+        "&:focus-within": {
+          transform: "scale(1.05)",
+        },
+        ":hover": {
+          bgcolor: COLORS.iris,
+
+          ".card--title > a, .card--icon-arrow": {
+            color: COLORS.white,
+          },
+
+          ".card--description": {
+            color: COLORS.vodka,
+          },
+        },
+      }}
+    >
+      {icon}
+      {/* <icon className="card--icon" sx={{ color: COLORS.iris }} /> */}
+      <Typography // <span>
+        className="card--title"
+        level="h3"
+        sx={{ color: COLORS.iris }}
+      >
+        <Link // <a>
+          overlay
+          href={url}
+          sx={{
+            color: COLORS.iris,
+            ":hover": { textDecoration: "none" },
+          }}
+        >
+          {title}
+        </Link>
+      </Typography>
+      <Typography
+        className="card--description"
+        level="body-sm"
+        sx={{
+          color: COLORS.coolGrey,
+          "-webkit-hyphen": "auto",
+        }}
+      >
+        {description}
+      </Typography>
+
+      <SvgIcon
+        className="card--icon-arrow"
+        sx={{ color: COLORS.iris, ml: "auto" }}
+      >
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          fill="none"
+          viewBox="0 0 24 24"
+          strokeWidth={1.5}
+          stroke="currentColor"
+          className="w-6 h-6"
+        >
+          <path
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            d="M13.5 4.5L21 12m0 0l-7.5 7.5M21 12H3"
+          />
+        </svg>
+      </SvgIcon>
+    </Card>
+  );
+};
+
+export default CardGridCourse;

blocks/card-grid-course/src/IconScience.tsx

@@ -0,0 +1,26 @@
+import React from "react";
+import type { ComponentProps, FC } from "react";
+import { SvgIcon } from "@mui/joy";
+
+const IconScience: FC<ComponentProps<typeof SvgIcon>> = (props) => {
+  return (
+    <SvgIcon {...props}>
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        fill="none"
+        viewBox="0 0 24 24"
+        strokeWidth={1.5}
+        stroke="currentColor"
+        className="w-6 h-6"
+      >
+        <path
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          d="M16.712 4.33a9.027 9.027 0 011.652 1.306c.51.51.944 1.064 1.306 1.652M16.712 4.33l-3.448 4.138m3.448-4.138a9.014 9.014 0 00-9.424 0M19.67 7.288l-4.138 3.448m4.138-3.448a9.014 9.014 0 010 9.424m-4.138-5.976a3.736 3.736 0 00-.88-1.388 3.737 3.737 0 00-1.388-.88m2.268 2.268a3.765 3.765 0 010 2.528m-2.268-4.796a3.765 3.765 0 00-2.528 0m4.796 4.796c-.181.506-.475.982-.88 1.388a3.736 3.736 0 01-1.388.88m2.268-2.268l4.138 3.448m0 0a9.027 9.027 0 01-1.306 1.652c-.51.51-1.064.944-1.652 1.306m0 0l-3.448-4.138m3.448 4.138a9.014 9.014 0 01-9.424 0m5.976-4.138a3.765 3.765 0 01-2.528 0m0 0a3.736 3.736 0 01-1.388-.88 3.737 3.737 0 01-.88-1.388m2.268 2.268L7.288 19.67m0 0a9.024 9.024 0 01-1.652-1.306 9.027 9.027 0 01-1.306-1.652m0 0l4.138-3.448M4.33 16.712a9.014 9.014 0 010-9.424m4.138 5.976a3.765 3.765 0 010-2.528m0 0c.181-.506.475-.982.88-1.388a3.736 3.736 0 011.388-.88m-2.268 2.268L4.33 7.288m6.406 1.18L7.288 4.33m0 0a9.024 9.024 0 00-1.652 1.306A9.025 9.025 0 004.33 7.288"
+        />
+      </svg>
+    </SvgIcon>
+  );
+};
+
+export default IconScience;

blocks/card-grid-course/src/IconWrapper.tsx

@@ -0,0 +1,34 @@
+import React from "react";
+import type { FC, ReactNode } from "react";
+import { Box } from "@mui/joy";
+import { COLORS } from "./CardGridCourse";
+
+type IconWrapperProps = {
+  className?: string;
+  children: ReactNode;
+  bgColor: string;
+};
+
+const IconWrapper: FC<IconWrapperProps> = ({
+  className = "",
+  children,
+  bgColor = "transparent",
+}) => {
+  return (
+    <Box
+      className={`icon--wrapper ${className}`}
+      sx={{
+        p: 1,
+        borderRadius: '0.25rem',
+        bgcolor: bgColor,
+        width: '2.5rem',
+        height: '2.5rem',
+      }}
+    >
+      {children}
+    </Box>
+  );
+};
+
+IconWrapper.displayName = "IconWrapper";
+export default IconWrapper;

blocks/card-grid-course/src/index.ts

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

blocks/card-grid-course/usage.mdx

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