linkedunion-design-kit 1.9.2 → 1.9.4

package/dist/src/components/Button/Button/Button.stories.jsx

@@ -0,0 +1,283 @@
+import { Button, variant } from "./Button";
+import { buttonStyles } from "..";
+var meta = {
+    title: "Components/Button",
+    component: Button,
+    tags: ["autodocs"],
+    parameters: {
+        docs: {
+            description: {
+                component: "Button component with default variants: color: blue, size: md, shape: rounded-sm, variant: default",
+            },
+        },
+        controls: {
+            expanded: true,
+            sort: "requiredFirst",
+            hideNoControlsWarning: true,
+            exclude: [],
+        },
+    },
+    args: {
+        // Default values for all stories
+        color: "blue",
+        size: "md",
+        shape: "rounded-sm",
+        variant: "fill",
+    },
+    argTypes: {
+        color: {
+            control: {
+                type: "select",
+            },
+            options: Object.keys(buttonStyles.fillColor),
+            description: "The color and visual style of the button",
+            defaultValue: "blue",
+            table: {
+                defaultValue: { summary: "blue" },
+            },
+        },
+        size: {
+            control: {
+                type: "select",
+            },
+            options: Object.keys(buttonStyles.size),
+            description: "The size of the button",
+            defaultValue: "md",
+            table: {
+                defaultValue: { summary: "md" },
+            },
+        },
+        shape: {
+            control: {
+                type: "select",
+            },
+            options: Object.keys(buttonStyles.shape),
+            description: "The shape of the button",
+            defaultValue: "rounded-sm",
+            table: {
+                defaultValue: { summary: "rounded-sm" },
+            },
+        },
+        variant: {
+            control: {
+                type: "select",
+            },
+            options: Object.keys(variant),
+            description: "The variant of the button (default or link)",
+            defaultValue: "fill",
+            table: {
+                defaultValue: { summary: "fill" },
+            },
+        },
+        startIcon: {
+            control: "text",
+            description: "Icon to display at the start of the button",
+        },
+        endIcon: {
+            control: "text",
+            description: "Icon to display at the end of the button",
+        },
+        disabled: {
+            control: "boolean",
+            description: "Whether the button is disabled",
+        },
+        asChild: {
+            control: "boolean",
+            description: "Whether to render as a child component",
+        },
+        onClick: {
+            action: "clicked",
+            description: "Function called when button is clicked",
+        },
+    },
+    decorators: [
+        function (Story, context) {
+            var currentVariant = context.args.variant;
+            var isLink = currentVariant === "link";
+            var isOutline = currentVariant === "outline";
+            var isGhost = currentVariant === "ghost";
+            var isFill = currentVariant === "fill";
+            if (context.argTypes) {
+                // ✅ Update Link color and size options
+                if (context.argTypes.color) {
+                    context.argTypes.color.options = isLink
+                        ? Object.keys(buttonStyles.linkColor)
+                        : isOutline
+                            ? Object.keys(buttonStyles.outlineColor)
+                            : isGhost
+                                ? Object.keys(buttonStyles.ghostColor)
+                                : isFill
+                                    ? Object.keys(buttonStyles.fillColor)
+                                    : undefined;
+                }
+                if (context.argTypes.size) {
+                    context.argTypes.size.options = isLink
+                        ? Object.keys(buttonStyles.linkSize)
+                        : Object.keys(buttonStyles.size);
+                }
+                // ✅ Hide shape control if variant is link
+                if (context.argTypes.shape) {
+                    context.argTypes.shape.table = context.argTypes.shape.table || {};
+                    context.argTypes.shape.table.disable = isLink;
+                }
+            }
+            return <Story {...context}/>;
+        },
+    ],
+};
+export default meta;
+// Display Default button with explicit default values
+export var Default = {
+    args: {
+        children: "Button Text",
+        color: "blue",
+        size: "md",
+        shape: "rounded-sm",
+        variant: "fill",
+        onClick: function () {
+            alert("Button clicked!");
+        },
+    },
+};
+export var Blue = {
+    args: {
+        children: "Blue Button",
+        color: "blue",
+        size: "md",
+    },
+};
+export var Red = {
+    args: {
+        children: "Red Button",
+        color: "red",
+        size: "md",
+    },
+};
+export var Green = {
+    args: {
+        children: "Green Button",
+        color: "green",
+        size: "md",
+    },
+};
+export var Yellow = {
+    args: {
+        children: "Yellow Button",
+        color: "yellow",
+        size: "md",
+    },
+};
+export var Indigo = {
+    args: {
+        children: "Indigo Button",
+        color: "indigo",
+        size: "md",
+    },
+};
+export var Gray = {
+    args: {
+        children: "Gray Button",
+        color: "gray",
+        size: "md",
+    },
+};
+export var WithStartIcon = {
+    args: {
+        children: "Button with Start Icon",
+        startIcon: "arrow-right",
+        size: "md",
+    },
+};
+export var WithEndIcon = {
+    args: {
+        children: "Button with End Icon",
+        endIcon: "arrow-right",
+        size: "md",
+    },
+};
+export var WithBothIcons = {
+    args: {
+        children: "Button with Icons",
+        startIcon: "plus",
+        endIcon: "arrow-right",
+        size: "md",
+    },
+};
+export var Small = {
+    args: {
+        children: "Small Button",
+        size: "sm",
+    },
+};
+export var Medium = {
+    args: {
+        children: "Medium Button",
+        size: "md",
+    },
+};
+export var Large = {
+    args: {
+        children: "Large Button",
+        size: "lg",
+    },
+};
+export var ExtraLarge = {
+    args: {
+        children: "Extra Large Button",
+        size: "xl",
+    },
+};
+export var DefaultVariant = {
+    args: {
+        children: "Default Variant Button",
+        variant: "fill",
+    },
+};
+export var LinkVariant = {
+    args: {
+        children: "Link Style Button",
+        variant: "link",
+        color: "blue",
+    },
+};
+export var LinkVariantRed = {
+    args: {
+        children: "Red Link Button",
+        variant: "link",
+        color: "red",
+    },
+};
+export var LinkVariantGreen = {
+    args: {
+        children: "Green Link Button",
+        variant: "link",
+        color: "green",
+    },
+};
+export var RoundedSmall = {
+    args: {
+        children: "Rounded Small",
+        shape: "rounded-sm",
+    },
+};
+export var RoundedFull = {
+    args: {
+        children: "Rounded Full",
+        shape: "rounded-full",
+    },
+};
+export var Disabled = {
+    args: {
+        children: "Disabled Button",
+        disabled: true,
+    },
+};
+// Color variants
+// Example of color with different button states
+export var DisabledButton = {
+    args: {
+        children: "Disabled Button",
+        color: "blue",
+        disabled: true,
+    },
+};

package/dist/src/components/Button/Button/Button.test.jsx

@@ -0,0 +1,73 @@
+import { render, screen } from "@testing-library/react";
+import { Dummy_label } from "../../../utils/constants";
+import { Button } from "./Button";
+describe("Button Component", function () {
+    it("renders default button component", function () {
+        render(<Button>{Dummy_label}</Button>);
+        expect(screen.getByRole("button")).toBeInTheDocument();
+    });
+});
+//   it("renders button with a custom label", () => {
+//     render(<Button>{Dummy_label}</Button>);
+//     expect(
+//       screen.getByRole("button", { name: Dummy_label }),
+//     ).toBeInTheDocument();
+//   });
+//   it("calls onClick handler when clicked", () => {
+//     const handleClick = jest.fn();
+//     render(<Button onClick={handleClick}>Click</Button>);
+//     fireEvent.click(screen.getByRole("button"));
+//     expect(handleClick).toHaveBeenCalledTimes(1);
+//   });
+//   it("renders startIcon when provided", () => {
+//     render(<Button startIcon={<span>*</span>}>{Dummy_label}</Button>);
+//     expect(screen.getByTestId("start-icon")).toBeInTheDocument();
+//   });
+//   it("renders endIcon when provided", () => {
+//     render(<Button endIcon={<span>*</span>}>{Dummy_label}</Button>);
+//     expect(screen.getByTestId("end-icon")).toBeInTheDocument();
+//   });
+//   it("applies correct color, shape, and size classes", () => {
+//     render(
+//       <Button color="primary" shape="rounded-full" size="lg">
+//         {Dummy_label}
+//       </Button>,
+//     );
+//     const buttonElement = screen.getByRole("button");
+//     expect(buttonElement).toHaveClass(
+//       buttonColors["primary"],
+//       buttonShapes["rounded-full"],
+//       buttonSizes["lg"],
+//     );
+//   });
+//   it("applies additional className when provided", () => {
+//     render(<Button className="custom-class">{Dummy_label}</Button>);
+//     expect(screen.getByRole("button")).toHaveClass("custom-class");
+//   });
+//   it("renders without crashing when no props are provided", () => {
+//     render(<Button>{Dummy_label}</Button>);
+//     expect(screen.getByRole("button")).toBeInTheDocument();
+//   });
+//   it("renders button with both startIcon and endIcon", () => {
+//     render(
+//       <Button startIcon={<span>*</span>} endIcon={<span>*</span>}>
+//         {Dummy_label}
+//       </Button>,
+//     );
+//     expect(screen.getByTestId("start-icon")).toBeInTheDocument();
+//     expect(screen.getByTestId("end-icon")).toBeInTheDocument();
+//   });
+//   it("does not render startIcon when not provided", () => {
+//     render(<Button>{Dummy_label}</Button>);
+//     expect(screen.queryByTestId("start-icon")).not.toBeInTheDocument();
+//   });
+//   it("does not render endIcon when not provided", () => {
+//     render(<Button>{Dummy_label}</Button>);
+//     expect(screen.queryByTestId("end-icon")).not.toBeInTheDocument();
+//   });
+//   it("renders correctly without a className prop", () => {
+//     render(<Button>{Dummy_label}</Button>);
+//     const buttonElement = screen.getByRole("button");
+//     expect(buttonElement).not.toHaveClass("custom-class");
+//   });
+// });

package/dist/src/components/Button/IconButton/IconButton.jsx

@@ -0,0 +1,63 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import * as React from "react";
+import { Slot } from "@radix-ui/react-slot";
+import { cva } from "class-variance-authority";
+import { cn } from "../../../lib/utils";
+import LUIcon from "../../Icons/LUIcon";
+import { buttonStyles } from "..";
+export var variant = {
+    fill: "",
+    outline: "border bg-transparent",
+    ghost: "bg-transparent border-none",
+};
+var buttonVariants = cva("inline-flex items-center justify-center whitespace-nowrap rounded-md transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-blue-200 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive cursor-pointer", {
+    variants: {
+        color: buttonStyles.fillColor,
+        size: buttonStyles.iconButtonSize,
+        shape: buttonStyles.shape,
+        variant: variant,
+    },
+    defaultVariants: {
+        color: "blue",
+        size: "md",
+        shape: "rounded-sm",
+        variant: "fill",
+    },
+});
+function IconButton(_a) {
+    var className = _a.className, _b = _a.color, color = _b === void 0 ? "blue" : _b, size = _a.size, shape = _a.shape, _c = _a.variant, variant = _c === void 0 ? "fill" : _c, _d = _a.asChild, asChild = _d === void 0 ? false : _d, icon = _a.icon, props = __rest(_a, ["className", "color", "size", "shape", "variant", "asChild", "icon"]);
+    var Comp = asChild ? Slot : "button";
+    // Map button size to appropriate icon sizes for the icon
+    var getIconSize = function () {
+        if (size === "xl" || size === "lg") {
+            return "xl";
+        }
+        else if (size === "md") {
+            return "lg";
+        }
+        else if (size === "sm") {
+            return "md";
+        }
+    };
+    // Apply appropriate text color for link variant
+    var extraClasses = variant === "outline" && color
+        ? buttonStyles.outlineColor[color]
+        : variant === "ghost" && color
+            ? buttonStyles.ghostColor[color]
+            : buttonStyles.fillColor[color];
+    var iconSize = getIconSize();
+    return (<Comp data-slot="button" className={cn(buttonVariants({ color: color, size: size, shape: shape, variant: variant, className: className }), extraClasses)} {...props}>
+      <LUIcon size={iconSize} data-testid="icon" icon={icon !== null && icon !== void 0 ? icon : "info"}/>
+    </Comp>);
+}
+export { IconButton, buttonVariants };

package/dist/src/components/Button/IconButton/IconButton.stories.jsx

@@ -0,0 +1,128 @@
+import { iconList } from "../../../utils/iconList";
+import { IconButton, variant } from "./IconButton";
+import { buttonStyles } from "..";
+var meta = {
+    title: "Components/Button/IconButton",
+    component: IconButton,
+    tags: ["autodocs"],
+    parameters: {
+        docs: {
+            description: {
+                component: "Icon Button component with default variants: color: blue, size: md, shape: rounded-sm, variant: default",
+            },
+        },
+        controls: {
+            expanded: true,
+            sort: "requiredFirst",
+            hideNoControlsWarning: true,
+            exclude: [],
+        },
+        className: "",
+    },
+    args: {
+        // Default values for all stories
+        color: "blue",
+        size: "md",
+        shape: "rounded-sm",
+        variant: "fill",
+        icon: "chart-simple",
+    },
+    argTypes: {
+        color: {
+            control: {
+                type: "select",
+                labels: Object.keys(buttonStyles.fillColor),
+            },
+            options: Object.keys(buttonStyles.fillColor),
+        },
+        shape: {
+            control: {
+                type: "select",
+                labels: Object.keys(buttonStyles.shape),
+            },
+            options: Object.keys(buttonStyles.shape),
+            description: "Select the shape of the button",
+            table: {
+                defaultValue: { summary: "rounded-sm" },
+                type: { summary: "string" },
+            },
+        },
+        variant: {
+            control: {
+                type: "select",
+            },
+            options: Object.keys(variant),
+            description: "The variant of the button (default or link)",
+            defaultValue: "fill",
+            table: {
+                defaultValue: { summary: "fill" },
+            },
+        },
+        size: {
+            control: {
+                type: "select",
+                labels: Object.keys(buttonStyles.iconButtonSize),
+            },
+            options: Object.keys(buttonStyles.iconButtonSize),
+            description: "Select the size of the button",
+            table: {
+                defaultValue: { summary: "md" },
+                type: { summary: "string" },
+            },
+        },
+        icon: {
+            control: {
+                type: "select",
+                labels: Object.fromEntries(Object.keys(iconList).map(function (key) { return [key, key]; })),
+            },
+            options: Object.keys(iconList),
+            description: "Icon (React component)",
+        },
+        className: {
+            control: { type: "text" },
+            description: "Custom class name for the IconButton",
+            table: {
+                type: { summary: "string" },
+                defaultValue: { summary: "" },
+            },
+        },
+        onClick: {
+            action: "clicked",
+            description: "Function called when button is clicked",
+        },
+    },
+    decorators: [
+        function (Story, context) {
+            var currentVariant = context.args.variant;
+            var isOutline = currentVariant === "outline";
+            var isGhost = currentVariant === "ghost";
+            var isFill = currentVariant === "fill";
+            if (context.argTypes) {
+                // ✅ Update Link color and size options
+                if (context.argTypes.color) {
+                    context.argTypes.color.options = isOutline
+                        ? Object.keys(buttonStyles.outlineColor)
+                        : isGhost
+                            ? Object.keys(buttonStyles.ghostColor)
+                            : isFill
+                                ? Object.keys(buttonStyles.fillColor)
+                                : Object.keys(buttonStyles.fillColor);
+                }
+            }
+            return <Story {...context}/>;
+        },
+    ],
+};
+export default meta;
+// Display Default button with explicit default values
+export var Default = {
+    args: {
+        color: "blue",
+        size: "md",
+        shape: "rounded-sm",
+        variant: "fill",
+        onClick: function () {
+            alert("Button clicked!");
+        },
+    },
+};

package/dist/src/components/Button/IconButton/IconButton.test.jsx

@@ -0,0 +1,28 @@
+import { fireEvent, render, screen } from "@testing-library/react";
+import { IconButton } from "./IconButton";
+import { buttonStyles } from "..";
+describe("Icon Button Component", function () {
+    it("renders icon button with required icon prop", function () {
+        render(<IconButton icon="chart-simple"/>);
+        expect(screen.getByRole("button")).toBeInTheDocument();
+    });
+    it("calls onClick handler when clicked", function () {
+        var handleClick = jest.fn();
+        render(<IconButton onClick={handleClick} icon="chart-simple"/>);
+        fireEvent.click(screen.getByRole("button"));
+        expect(handleClick).toHaveBeenCalledTimes(1);
+    });
+    it("applies correct color, shape, and size classes", function () {
+        render(<IconButton color="blue" shape="rounded-full" size="lg" icon="chart-simple"/>);
+        var buttonElement = screen.getByRole("button");
+        expect(buttonElement).toHaveClass(buttonStyles.fillColor["blue"], buttonStyles.shape["rounded-full"], buttonStyles.iconButtonSize["lg"]);
+    });
+    it("applies additional className when provided", function () {
+        render(<IconButton className="custom-class" icon="chart-simple"/>);
+        expect(screen.getByRole("button")).toHaveClass("custom-class");
+    });
+    it("renders without crashing when all required props are provided", function () {
+        render(<IconButton icon="chart-simple"/>);
+        expect(screen.getByRole("button")).toBeInTheDocument();
+    });
+});

package/dist/src/components/Button/index.js

@@ -56,8 +56,8 @@ export var buttonStyles = {
         "light-red": "bg-red-100 text-red-600 hover:bg-red-700 hover:text-red-50 active:bg-red-800 active:text-red-50",
         indigo: "text-indigo-600 hover:bg-indigo-700 hover:text-indigo-50 active:bg-indigo-800 active:text-indigo-50",
         "light-indigo": "bg-indigo-100 text-indigo-600 hover:bg-indigo-700 hover:text-indigo-50 active:bg-indigo-800 active:text-indigo-50",
-        gray: "bg-gray-100 text-gray-950 hover:bg-gray-100 hover:text-gray-950 active:bg-gray-300 active:text-gray-950",
-        "light-gray": "text-gray-950 hover:bg-gray-100 hover:text-gray-950 active:bg-gray-300",
+        gray: "bg-gray-50 border-gray-200 text-gray-950 hover:bg-gray-100 hover:text-gray-950 active:bg-gray-300 active:text-gray-950",
+        "light-gray": "text-gray-900 border-gray-900 bg-gray-100 hover:text-gray-950 active:bg-gray-300 active:text-gray-950",
         disabled: "text-gray-300",
     },
     ghostColor: {
@@ -66,6 +66,6 @@ export var buttonStyles = {
         yellow: "text-yellow-500 hover:bg-yellow-600 hover:text-yellow-950 active:bg-yellow-500 active:text-yellow-950",
         red: "text-red-600 hover:bg-red-100 active:bg-red-600 active:text-red-50",
         indigo: "text-indigo-600 hover:bg-indigo-100 active:bg-indigo-600 active:text-indigo-50",
-        gray: "text-gray-950 hover:bg-gray-50 active:bg-gray-950 active:text-gray-950",
+        gray: "text-gray-950 hover:bg-gray-50 active:bg-gray-950 active:text-gray-50",
     },
 };

package/dist/src/components/Card/MultipleNews/MultiNews.jsx

@@ -0,0 +1,80 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import LuImage from "../../Images/LuImage";
+import Link from "next/link";
+import { Button } from "../../Button/Button/Button";
+import { Body } from "../../Typography/Body/body";
+import { Heading } from "../../Typography/Heading/heading";
+export var MultiNews = function (_a) {
+    var item = _a.item, image = _a.image, _b = _a.href, href = _b === void 0 ? "https://www.google.com/" : _b, _c = _a.btnLabel, btnLabel = _c === void 0 ? "View More" : _c, editor = _a.editor, _d = _a.mediaPosition, mediaPosition = _d === void 0 ? "right" : _d, orientation = _a.orientation;
+    // Use destructuring to create cleaner code
+    var modifiedItem = item;
+    var modifiedEditor = editor;
+    // Only swap for middle position
+    if (mediaPosition === "middle") {
+        // Swap for item
+        modifiedItem = __assign(__assign({}, item), { description: item === null || item === void 0 ? void 0 : item.short_description, short_description: item === null || item === void 0 ? void 0 : item.description });
+        // Swap for editor
+        modifiedEditor = __assign(__assign({}, editor), { cardText: editor === null || editor === void 0 ? void 0 : editor.shortDescription, shortDescription: editor === null || editor === void 0 ? void 0 : editor.cardText });
+    }
+    // Common card media component
+    var CardMedia = function (_a) {
+        var _b = _a.className, className = _b === void 0 ? "" : _b;
+        return (<LuImage src={image} width={240} height={240} className={" object-cover w-full ".concat(className, " ").concat(modifiedEditor === null || modifiedEditor === void 0 ? void 0 : modifiedEditor.cardImage)} alt="Image"/>);
+    };
+    // Common content section
+    var CardContent = function (_a) {
+        var _b = _a.className, className = _b === void 0 ? "" : _b;
+        return (<div className={"flex flex-col !gap-1 ".concat(className)}>
+      <Heading variant="h4-600" className={"line-clamp-1 capitalize ".concat(modifiedEditor === null || modifiedEditor === void 0 ? void 0 : modifiedEditor.cardTitle)}>
+        {modifiedItem === null || modifiedItem === void 0 ? void 0 : modifiedItem.title}
+      </Heading>
+      <Body variant="body-xl" className={"".concat(mediaPosition === "middle" ? "line-clamp-1" : "line-clamp-2 h-16", " ").concat(modifiedEditor === null || modifiedEditor === void 0 ? void 0 : modifiedEditor.cardText)}>
+        {modifiedItem === null || modifiedItem === void 0 ? void 0 : modifiedItem.description}
+      </Body>
+    </div>);
+    };
+    // Common button component with conditional shape
+    var ActionButton = function (_a) {
+        var _b = _a.className, className = _b === void 0 ? "" : _b;
+        return (<Link href={href} passHref className={className}>
+      <Button endIcon={"angle-right"} size={mediaPosition === "middle" ? "xl" : "sm"} {...(mediaPosition === "middle" && { shape: "rounded-full" })} className={"".concat(modifiedEditor === null || modifiedEditor === void 0 ? void 0 : modifiedEditor.cardBtn)}>
+        {btnLabel}
+      </Button>
+    </Link>);
+    };
+    // Optional subtitle component
+    var Subtitle = function () { return (<>
+      {mediaPosition === "middle" && (<Body variant="body-xl" className={"line-clamp-4 h-32 ".concat(modifiedEditor === null || modifiedEditor === void 0 ? void 0 : modifiedEditor.shortDescription)} dangerouslySetInnerHTML={{
+                __html: modifiedItem.short_description || "",
+            }}/>)}
+    </>); };
+    // Horizontal layout
+    if (orientation === "horizontal") {
+        return (<div className={"!p-5 bg-white rounded-2xl flex ".concat(mediaPosition === "right" ? "flex-row-reverse" : "", " !gap-5 items-center shadow-lg ").concat(modifiedEditor === null || modifiedEditor === void 0 ? void 0 : modifiedEditor.card)}>
+        <CardMedia className="max-w-48 aspect-square rounded-lg"/>
+        <div className="flex flex-col !gap-5 w-full">
+          <CardContent />
+          <ActionButton />
+        </div>
+      </div>);
+    }
+    // Vertical layout
+    return (<div className={"p-8 bg-white rounded-2xl flex flex-col !gap-5 max-w-md shadow-lg ".concat(modifiedEditor === null || modifiedEditor === void 0 ? void 0 : modifiedEditor.card)}>
+      <div className={"flex ".concat(mediaPosition === "top" ? "flex-col" : "flex-col-reverse", " !gap-4")}>
+        <Subtitle />
+        <CardMedia className="aspect-16/10"/>
+        <CardContent />
+      </div>
+      <ActionButton />
+    </div>);
+};