feat(apps-ui-kit): add VisualAssetCard component (#1918)

* feat: add visualAssetCard component

* feat: improvements

* feat: improvemetns

* feat: rename fucntion

---------

apps/ui-kit/src/lib/components/atoms/index.ts

@@ -16,3 +16,4 @@ export * from './panel';
 export * from './tooltip';
 export * from './info-box';
 export * from './snackbar';
+export * from './visual-asset-card';

apps/ui-kit/src/lib/components/atoms/visual-asset-card/VisualAssetCard.tsx

@@ -0,0 +1,75 @@
+// Copyright (c) 2024 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+import React from 'react';
+import { VisualAssetType } from './visual-asset-card.enums';
+import { ButtonUnstyled } from '../button';
+import { MoreHoriz } from '@iota/ui-icons';
+
+export interface VisualAssetCardProps {
+    /**
+     * The type of the asset to be displayed.
+     */
+    assetType?: VisualAssetType;
+    /**
+     * The source of the image to be displayed.
+     */
+    assetSrc: string;
+    /**
+     * Alt text for the image.
+     */
+    altText: string;
+    /**
+     * The onClick event for the icon.
+     */
+    onIconClick?: (e: React.MouseEvent<HTMLButtonElement>) => void;
+    /**
+     * The onClick event for the card.
+     */
+    onClick?: (e: React.MouseEvent<HTMLDivElement>) => void;
+    /**
+     * The icon to be displayed.
+     */
+    icon: React.ReactNode;
+    /**
+     * The title text to be displayed on hover.
+     */
+    assetTitle?: string;
+}
+
+export function VisualAssetCard({
+    assetType = VisualAssetType.Image,
+    assetSrc,
+    altText,
+    onIconClick,
+    onClick,
+    icon = <MoreHoriz />,
+    assetTitle,
+}: VisualAssetCardProps): React.JSX.Element {
+    const handleIconClick = (event: React.MouseEvent<HTMLButtonElement>) => {
+        onIconClick?.(event);
+        event?.stopPropagation();
+    };
+    return (
+        <div
+            className="group relative aspect-square w-full cursor-pointer overflow-hidden rounded-xl"
+            onClick={onClick}
+        >
+            {assetType === VisualAssetType.Video ? (
+                <video src={assetSrc} className="h-full w-full object-cover" autoPlay loop muted />
+            ) : (
+                <img src={assetSrc} alt={altText} className="h-full w-full object-cover" />
+            )}
+            <div className="absolute left-0 top-0 h-full w-full bg-cover bg-center bg-no-repeat group-hover:bg-shader-neutral-light-48 group-hover:transition group-hover:duration-300 group-hover:ease-in-out group-hover:dark:bg-shader-primary-dark-48" />
+            <ButtonUnstyled
+                className="absolute right-2 top-2 h-9 w-9 cursor-pointer rounded-full p-xs opacity-0 transition-opacity duration-300 group-hover:bg-shader-neutral-light-72 group-hover:opacity-100 [&_svg]:h-5 [&_svg]:w-5 [&_svg]:text-primary-100"
+                onClick={handleIconClick}
+            >
+                {icon}
+            </ButtonUnstyled>
+            <div className="absolute bottom-0 flex items-center justify-center p-xs opacity-0 transition-opacity duration-300 group-hover:opacity-100">
+                {assetTitle && <span className="text-title-md text-neutral-100">{assetTitle}</span>}
+            </div>
+        </div>
+    );
+}

apps/ui-kit/src/lib/components/atoms/visual-asset-card/index.ts

@@ -0,0 +1,5 @@
+// Copyright (c) 2024 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+export { VisualAssetCard } from './VisualAssetCard';
+export * from './visual-asset-card.enums';

apps/ui-kit/src/lib/components/atoms/visual-asset-card/visual-asset-card.enums.ts

@@ -0,0 +1,7 @@
+// Copyright (c) 2024 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+export enum VisualAssetType {
+    Image = 'image',
+    Video = 'video',
+}

apps/ui-kit/src/storybook/stories/atoms/VisualAssetCard.stories.tsx

@@ -0,0 +1,56 @@
+// Copyright (c) 2024 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+import type { Meta, StoryObj } from '@storybook/react';
+import { VisualAssetCard, VisualAssetType } from '@/components';
+
+const meta: Meta<typeof VisualAssetCard> = {
+    component: VisualAssetCard,
+    tags: ['autodocs'],
+    render: (props) => {
+        return (
+            <div className="w-64">
+                <VisualAssetCard {...props} />
+            </div>
+        );
+    },
+} satisfies Meta<typeof VisualAssetCard>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+    args: {
+        assetSrc: 'https://d315pvdvxi2gex.cloudfront.net/528399e23c1bb7b14cced0b89.png',
+        altText: 'IOTA Logo',
+        onIconClick: () => {
+            console.log('Icon clicked');
+        },
+        onClick: () => {
+            console.log('Card clicked');
+        },
+        assetTitle: 'IOTA Logo',
+    },
+    argTypes: {
+        assetSrc: {
+            control: 'text',
+        },
+        altText: {
+            control: 'text',
+        },
+        icon: {
+            control: 'none',
+        },
+        onIconClick: {
+            control: 'none',
+        },
+        assetType: { control: 'select', options: Object.values(VisualAssetType) },
+        onClick: {
+            control: 'none',
+        },
+        assetTitle: {
+            control: 'text',
+        },
+    },
+};