feat: downloadable asset card

refs acid-info/logos-brand-guidelines#15

packages/logos-docusaurus-theme/src/client/components/Icon/Icon.tsx

@@ -31,6 +31,7 @@ import DiscordWhiteSvg from '../../static/icons/discord-white.svg'
 import TelegramWhiteSvg from '../../static/icons/telegram-white.svg'
 import XSvg from '../../static/icons/x.svg'
 import Avatar from '../../static/icons/avatar.svg'
+import DownloadSvg from '../../static/icons/download.svg'
 
 type TIconProps = {
   size?: 's' | 'm' | 'l'
@@ -227,3 +228,9 @@ export const IconAvatar = (props: TIconProps): JSX.Element => (
     <Avatar />
   </Icon>
 )
+
+export const IconDownload = (props: TIconProps): JSX.Element => (
+  <Icon {...props}>
+    <DownloadSvg />
+  </Icon>
+)

packages/logos-docusaurus-theme/src/client/components/mdx/AssetCard/AssetCard.scss

@@ -0,0 +1,70 @@
+@use '../../../css/utils';
+@use '../../../css/lsd';
+
+.mdx-asset-card {
+  width: 216px;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  border: 1px solid rgb(var(--lsd-border-primary));
+  border-bottom: none;
+  text-decoration: none !important;
+  min-height: 144px;
+}
+
+.mdx-asset-card__inner {
+  width: 100%;
+  padding: 16px 16px 32px 16px;
+}
+
+.mdx-asset-card__title {
+  margin-bottom: 16px;
+}
+
+.mdx-asset-card__image {
+  img {
+    width: 100%;
+    height: 100%;
+    object-fit: contain;
+    object-position: center center;
+  }
+}
+
+.mdx-asset-card__downloadables {
+  width: 100%;
+  display: flex;
+  flex-direction: row;
+  align-items: flex-start;
+  justify-content: stretch;
+
+  & > * {
+    flex-grow: 1;
+    font-size: 12px;
+    text-decoration: none !important;
+    text-underline-offset: unset !important;
+
+    button {
+      width: 100%;
+      justify-content: space-between;
+      text-decoration: none;
+    }
+
+    &:first-child button {
+      border-left: none;
+    }
+
+    &:last-child button {
+      border-right: none;
+    }
+
+    &:not(:last-child) button {
+      border-right: none;
+    }
+  }
+}
+
+.mdx-asset-card:not(.mdx-asset-card--downloadable) {
+  .mdx-asset-card__inner {
+    border-bottom: 1px solid rgb(var(--lsd-border-primary));
+  }
+}

packages/logos-docusaurus-theme/src/client/components/mdx/AssetCard/AssetCard.tsx

@@ -0,0 +1,77 @@
+import { Button, Typography } from '@acid-info/lsd-react'
+import clsx from 'clsx'
+import React from 'react'
+import { KeepRatio } from '../../KeepRatio'
+import './AssetCard.scss'
+import { IconDownload } from '../../Icon'
+
+export type AssetCardProps = Omit<React.HTMLProps<HTMLDivElement>, 'title'> & {
+  title?: React.ReactNode
+  previewSrc: string
+  downloadable?: {
+    src: string
+    title: React.ReactNode
+  }[]
+}
+
+export const AssetCard: React.FC<AssetCardProps> = ({
+  title,
+  previewSrc,
+  downloadable,
+  ...props
+}) => {
+  const isDownloadable = downloadable && downloadable.length > 0
+
+  return (
+    <div
+      {...props}
+      className={clsx(
+        props.className,
+        'mdx-asset-card',
+        isDownloadable && 'mdx-asset-card--downloadable',
+      )}
+    >
+      <div className="mdx-asset-card__inner">
+        {title && (
+          <Typography
+            component="div"
+            variant="subtitle1"
+            className="mdx-asset-card__title"
+          >
+            {title}
+          </Typography>
+        )}
+        <KeepRatio
+          width={16}
+          height={9}
+          fullWidth
+          rootProps={{ className: 'mdx-asset-card__image' }}
+        >
+          <img
+            src={previewSrc}
+            alt={(typeof title === 'string' && title) || 'asset image'}
+          />
+        </KeepRatio>
+      </div>
+      {
+        // TODO: use LSD ButtonGroup
+      }
+      {isDownloadable && (
+        <div className="mdx-asset-card__downloadables">
+          {downloadable.map((downloadable, index) => (
+            <a href={downloadable.src} download>
+              <Button
+                key={index}
+                variant="outlined"
+                size="small"
+                icon={<IconDownload />}
+              >
+                {downloadable.title}
+              </Button>
+            </a>
+          ))}
+        </div>
+      )}
+    </div>
+  )
+}

packages/logos-docusaurus-theme/src/client/components/mdx/AssetCard/index.ts

@@ -0,0 +1 @@
+export * from './AssetCard'

packages/logos-docusaurus-theme/src/client/components/mdx/index.ts

@@ -1,4 +1,5 @@
 export * from './AppCard'
+export * from './AssetCard'
 export * from './Box'
 export * from './CallToActionButton'
 export * from './CallToActionSection'

packages/logos-docusaurus-theme/src/client/static/icons/download.svg

@@ -0,0 +1,3 @@
+<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M7.00001 9.33337L4.08334 6.41671L4.90001 5.57087L6.41668 7.08754V2.33337H7.58334V7.08754L9.10001 5.57087L9.91668 6.41671L7.00001 9.33337ZM3.50001 11.6667C3.17918 11.6667 2.90443 11.5524 2.67576 11.3237C2.44709 11.095 2.33296 10.8205 2.33334 10.5V8.75004H3.50001V10.5H10.5V8.75004H11.6667V10.5C11.6667 10.8209 11.5523 11.0956 11.3237 11.3243C11.095 11.553 10.8205 11.6671 10.5 11.6667H3.50001Z" fill="white"/>
+</svg>