Empty States

import EmptyState from '@/components/composites/EmptyState'
import IconFrame from '@/components/composites/IconFrame'
import Button from '@/components/ui/Button'
import { PiFolderOpen } from 'react-icons/pi'

export default function EmptyStateIconFrame() {
    return (
        <section
            aria-labelledby="collection-empty-state-title"
            className="flex w-full items-center justify-center px-4 py-8 sm:px-8 sm:py-12"
        >
            <div className="w-full max-w-md text-center">
                <EmptyState
                    size={280}
                    illustration={
                        <IconFrame>
                            <PiFolderOpen
                                aria-hidden="true"
                                className="text-2xl"
                            />
                        </IconFrame>
                    }
                    offset={-60}
                >
                    <div>
                        <div className="mb-4">
                            <h4
                                id="collection-empty-state-title"
                                className="text-lg font-semibold text-foreground"
                            >
                                No items yet
                            </h4>
                            <p className="mx-auto max-w-sm text-muted-foreground">
                                Create an item to see it here.
                            </p>
                        </div>
                        <Button type="button" variant="solid">
                            Create item
                        </Button>
                    </div>
                </EmptyState>
            </div>
        </section>
    )
}

import EmptyState from '@/components/composites/EmptyState'
import Button from '@/components/ui/Button'

const frontPanelGradientId = 'search-results-empty-state-front-panel-gradient'

const NotFoundIllustration = () => (
    <svg
        width="124"
        height="86"
        viewBox="0 0 124 86"
        fill="none"
        xmlns="http://www.w3.org/2000/svg"
        aria-hidden="true"
        focusable="false"
    >
        <defs>
            <linearGradient
                id={frontPanelGradientId}
                x1="59.7644"
                y1="8.3401"
                x2="59.7644"
                y2="69.1341"
                gradientUnits="userSpaceOnUse"
            >
                <stop offset="0%" stopColor="var(--nui-card)" />
                <stop offset="0.9964" stopColor="var(--nui-muted)" />
            </linearGradient>
        </defs>
        <path
            className="fill-muted-foreground/40"
            d="M21.4994 0H93.5994C96.4994 0 98.6994 2.2 98.6994 5.1V50.8C98.6994 53.7 96.4994 55.9 93.5994 55.9H21.4994C18.5994 55.9 16.3994 53.7 16.3994 50.8V5.1C16.3994 2.2 18.7994 0 21.4994 0Z"
        />
        <path
            className="fill-card"
            d="M93.7996 16.7002H70.3996C68.0996 16.7002 65.8996 17.5002 64.1996 18.9002L58.0996 23.9002C56.3996 25.3002 54.1996 26.1002 51.8996 26.1002H25.4996C22.7996 26.1002 20.5996 28.3002 20.5996 31.0002C20.5996 31.2002 20.5996 31.5002 20.6996 31.7002L25.5996 57.5002C25.9996 59.9002 27.9996 61.7002 30.4996 61.7002H86.9996C89.3996 61.7002 91.4996 60.0002 91.8996 57.6002L98.6996 22.3002C99.1996 19.6002 97.3996 17.2002 94.6996 16.7002C94.2996 16.7002 93.9996 16.7002 93.7996 16.7002Z"
        />
        <path
            className="stroke-border"
            fill={`url(#${frontPanelGradientId})`}
            strokeWidth="1"
            d="M104.3 9.80019H73.9C70.9 9.80019 68.1 10.8002 65.8 12.7002L57.8 19.2002C55.6 21.0002 52.7 22.1002 49.7 22.1002H15.3C11.8 22.1002 9 25.0002 9 28.4002C9 28.7002 9 29.0002 9.1 29.3002L15.4 63.0002C15.9 66.2002 18.6 68.5002 21.7 68.5002H95.3C98.5 68.5002 101.1 66.3002 101.6 63.1002L110.5 17.0002C111.1 13.5002 108.8 10.4002 105.3 9.7002C105 9.8002 104.6 9.80019 104.3 9.80019Z"
        />
        <path
            className="fill-muted-foreground"
            d="M45.4992 44.7001C47.2992 44.7001 48.7992 43.2001 48.7992 41.4001C48.7992 39.6001 47.2992 38.1001 45.4992 38.1001C43.6992 38.1001 42.1992 39.6001 42.1992 41.4001C42.1992 43.2001 43.6992 44.7001 45.4992 44.7001Z"
        />
        <path
            className="fill-muted-foreground"
            d="M71.1994 44.6C72.9994 44.6 74.4994 43.1 74.4994 41.3C74.4994 39.5 72.9994 38 71.1994 38C69.3994 38 67.8994 39.5 67.8994 41.3C67.8994 43.2 69.3994 44.6 71.1994 44.6Z"
        />
        <path
            className="fill-muted-foreground"
            d="M61.4998 48.2002H55.2998V49.7002H61.4998V48.2002Z"
        />
        <path
            className="fill-muted"
            d="M95.57 73.314C104.609 73.314 111.937 66.4184 111.937 57.8823C111.937 49.3463 104.577 42.4507 95.57 42.4507C86.5311 42.4507 79.2031 49.3463 79.2031 57.8823C79.2031 66.4184 86.5311 73.314 95.57 73.314Z"
        />
        <path
            className="fill-muted-foreground/70"
            d="M117.208 81.467L107.073 71.3404L109.397 69.0171L119.523 79.1517L117.208 81.467Z"
        />
        <path
            className="fill-muted-foreground/70"
            d="M120.731 85.0303L112.959 77.2591C112.31 76.6102 112.31 75.5526 112.959 74.9037C113.608 74.2548 114.666 74.2548 115.315 74.9037L123.086 82.6749C123.735 83.3238 123.735 84.3813 123.086 85.0303C122.437 85.6792 121.379 85.6792 120.731 85.0303Z"
        />
        <path
            className="fill-muted-foreground/70"
            d="M120.179 85.5268L110.18 75.5284C109.948 75.296 109.948 74.9195 110.18 74.6791L112.736 72.1235C112.968 71.8911 113.345 71.8911 113.585 72.1235L123.583 82.1219C123.816 82.3542 123.816 82.7307 123.583 82.9711L121.028 85.5268C120.787 85.7591 120.411 85.7591 120.179 85.5268Z"
        />
        <path
            className="fill-muted-foreground"
            d="M95.6011 38.7095C84.9938 38.7095 76.3975 47.3059 76.3975 57.9131C76.3975 68.5124 84.9938 77.1168 95.5931 77.1168C106.2 77.1168 114.797 68.5204 114.797 57.9131C114.797 47.3059 106.2 38.7095 95.6011 38.7095ZM95.6011 73.5597C87.0848 73.5597 80.1869 66.5496 80.1869 57.9051C80.1869 49.2607 87.0848 42.2586 95.6011 42.2586C104.117 42.2586 111.015 49.2687 111.015 57.9131C111.015 66.5576 104.109 73.5597 95.6011 73.5597Z"
        />
        <path
            className="fill-muted-foreground"
            d="M93.9808 61.0024C93.9452 60.7186 93.9097 60.4347 93.9097 60.1154C93.9097 58.9446 94.4074 57.8802 95.6516 56.9577L96.7181 56.1771C97.3936 55.6804 97.678 55.1127 97.678 54.4386C97.678 53.4451 96.967 52.4872 95.4739 52.4872C93.9097 52.4872 93.2342 53.729 93.2342 54.9708C93.2342 55.2192 93.2698 55.4675 93.3053 55.6804L90.5324 55.574C90.4613 55.2546 90.4258 54.8998 90.4258 54.5805C90.4258 52.2033 92.2033 49.9326 95.4383 49.9326C98.8511 49.9326 100.629 52.0614 100.629 54.2967C100.629 56.0352 99.7399 57.2415 98.4601 58.164L97.5713 58.8026C96.7892 59.3348 96.3982 60.0444 96.3982 60.9315V61.0734H93.9808V61.0024ZM95.225 62.4216C96.1849 62.4216 96.967 63.2022 96.967 64.1601C96.967 65.1181 96.1849 65.8987 95.225 65.8987C94.2652 65.8987 93.4831 65.1181 93.4831 64.1601C93.4831 63.2022 94.2652 62.4216 95.225 62.4216Z"
        />
    </svg>
)

export default function EmptyStateIllustration() {
    return (
        <section
            aria-labelledby="search-results-empty-state-title"
            className="flex w-full items-center justify-center px-4 py-8 sm:px-8 sm:py-12"
        >
            <div className="w-full max-w-md text-center">
                <EmptyState
                    size={280}
                    illustration={
                        <div className="relative isolate">
                            <div
                                aria-hidden="true"
                                className="pointer-events-none absolute -inset-2 z-0"
                            >
                                <span className="absolute inset-0 rounded-full bg-card/70 blur-xl" />
                                <span className="absolute inset-2 rounded-full bg-card" />
                            </div>
                            <div className="relative z-1">
                                <NotFoundIllustration />
                            </div>
                        </div>
                    }
                    offset={-60}
                    variant="dots"
                >
                    <div>
                        <div className="mb-4">
                            <h4
                                id="search-results-empty-state-title"
                                className="text-lg font-semibold text-foreground"
                            >
                                No results found
                            </h4>
                            <p className="mx-auto max-w-sm text-muted-foreground">
                                Try adjusting your search or filters.
                            </p>
                        </div>
                        <Button type="button" variant="default">
                            Clear filters
                        </Button>
                    </div>
                </EmptyState>
            </div>
        </section>
    )
}

import EmptyState from '@/components/composites/EmptyState'
import Button from '@/components/ui/Button'

const assetBase = 'https://statics.nateui.com/img'

const NateUILogo = () => (
    <svg
        width="32"
        height="32"
        viewBox="0 0 12 12"
        fill="none"
        xmlns="http://www.w3.org/2000/svg"
        aria-hidden="true"
        focusable="false"
        className="size-8"
    >
        <rect
            width="12"
            height="12"
            rx="2"
            className="fill-foreground"
        />
        <path
            d="M3 5.02076V2L9 7.97924V11L3 5.02076Z"
            className="fill-background"
        />
        <path d="M3 10V7L6 10H3Z" className="fill-background" />
        <ellipse
            cx="1.31868"
            cy="1.37686"
            rx="1.31868"
            ry="1.37686"
            transform="matrix(0.999803 -0.0198504 0.0182079 0.999834 6.31299 2.45044)"
            className="fill-background"
        />
    </svg>
)

const tiles = [
    { src: 'zapier.png', left: '78.93%', top: '15.53%', size: 'size-8' },
    { src: 'slack.png', left: '25.35%', top: '73.50%', size: 'size-9' },
    { src: 'dropbox.png', left: '7.71%', top: '34.61%', size: 'size-8' },
    { src: 'figma.png', left: '34.53%', top: '6.85%', size: 'size-10' },
    { src: 'stripe.png', left: '96.76%', top: '46.52%', size: 'size-10' },
    {
        src: 'google-drive.png',
        left: '76.01%',
        top: '73.42%',
        size: 'size-8',
    },
]

const BrandCluster = () => (
    <div aria-hidden="true" className="relative size-70">
        {tiles.map((tile) => (
            <div
                key={tile.src}
                className={`absolute ${tile.size} -translate-x-1/2 -translate-y-1/2 rounded-card bg-card p-1.5 shadow-card`}
                style={{ left: tile.left, top: tile.top }}
            >
                <img
                    src={`${assetBase}/thumbs/brands/${tile.src}`}
                    alt=""
                    width={90}
                    height={90}
                    className="h-full w-full object-contain"
                />
            </div>
        ))}

        <div
            className="absolute flex size-12 -translate-x-1/2 -translate-y-1/2 items-center justify-center rounded-card shadow-card"
            style={{ left: '50.79%', top: '48.98%' }}
        >
            <NateUILogo />
        </div>
    </div>
)

export default function EmptyStateBrandLogos() {
    const headingId = 'empty-state-brand-logos-heading'

    return (
        <section
            aria-labelledby={headingId}
            className="flex w-full items-center justify-center px-4 py-8 sm:px-8 sm:py-12"
        >
            <div className="w-full max-w-md text-center">
                <EmptyState
                    variant="wave"
                    size={280}
                    illustration={<BrandCluster />}
                    offset={-21}
                >
                    <div>
                        <div className="mb-4">
                            <h4
                                id={headingId}
                                className="text-lg font-semibold text-foreground"
                            >
                                No integrations connected
                            </h4>
                            <p className="mx-auto max-w-sm text-muted-foreground">
                                Connect an app to get started.
                            </p>
                        </div>
                        <Button type="button" variant="solid">
                            Browse apps
                        </Button>
                    </div>
                </EmptyState>
            </div>
        </section>
    )
}

import Avatar from '@/components/ui/Avatar'
import Button from '@/components/ui/Button'
import EmptyState from '@/components/composites/EmptyState'
import { PiLink, PiUserPlus } from 'react-icons/pi'

const assetBase = 'https://statics.nateui.com/img'

const avatars = [
    `${assetBase}/avatars/thumb-3.jpg`,
    `${assetBase}/avatars/thumb-7.jpg`,
    `${assetBase}/avatars/thumb-11.jpg`,
    `${assetBase}/avatars/thumb-15.jpg`,
    `${assetBase}/avatars/thumb-19.jpg`,
]

const AvatarStack = () => (
    <div aria-hidden="true" className="relative isolate inline-flex">
        <div className="flex items-center -space-x-2">
            {avatars.map((avatar) => (
                <Avatar
                    key={avatar}
                    src={avatar}
                    alt=""
                    size={40}
                    className="ring-2 ring-card"
                />
            ))}
        </div>
        <span className="pointer-events-none absolute inset-y-0 left-0 z-10 w-12 bg-gradient-to-r from-card to-transparent" />
        <span className="pointer-events-none absolute inset-y-0 right-0 z-10 w-12 bg-gradient-to-l from-card to-transparent" />
    </div>
)

export default function EmptyStateAvatarGroup() {
    const headingId = 'empty-state-avatar-group-heading'

    return (
        <section
            aria-labelledby={headingId}
            className="flex w-full items-center justify-center px-4 py-8 sm:px-8 sm:py-12"
        >
            <div className="w-full max-w-md text-center">
                <EmptyState
                    variant="grid"
                    size={220}
                    illustration={<AvatarStack />}
                    offset={-80}
                />
                <h4
                    id={headingId}
                    className="mt-8 text-lg font-semibold text-foreground"
                >
                    You're the only one here so far
                </h4>
                <p className="mx-auto mt-2 max-w-sm text-muted-foreground">
                    Add teammates by email and they'll land in this workspace.
                </p>
                <div className="mt-8 flex flex-wrap justify-center gap-2">
                    <Button
                        type="button"
                        variant="solid"
                        icon={<PiUserPlus aria-hidden="true" />}
                    >
                        Start Invite
                    </Button>
                    <Button
                        type="button"
                        variant="default"
                        icon={<PiLink aria-hidden="true" />}
                    >
                        Copy link
                    </Button>
                </div>
            </div>
        </section>
    )
}

import EmptyState from '@/components/composites/EmptyState'
import FileIcon from '@/components/composites/FileIcon'
import IconFrame from '@/components/composites/IconFrame'
import Button from '@/components/ui/Button'

const FileCardFan = () => (
    <div aria-hidden="true" className="flex items-center justify-center">
        <div className="z-0 -mr-2 -mb-2 -rotate-12">
            <IconFrame size={62} variant="elavated">
                <FileIcon type="png" size={40} />
            </IconFrame>
        </div>
        <div className="z-1 -translate-y-2">
            <IconFrame size={62} variant="elavated">
                <FileIcon type="pdf" size={40} />
            </IconFrame>
        </div>
        <div className="z-0 -ml-2 -mb-2 rotate-12">
            <IconFrame size={62} variant="elavated">
                <FileIcon type="doc" size={40} />
            </IconFrame>
        </div>
    </div>
)

export default function EmptyStateFileCards()
{
    const headingId = 'empty-state-file-cards-heading'

    return (
        <section
            aria-labelledby={headingId}
            className="flex w-full items-center justify-center px-4 py-8 sm:px-8 sm:py-12"
        >
            <div className="w-full max-w-md text-center">
                <EmptyState
                    variant="grid"
                    size={280}
                    illustration={<FileCardFan />}
                    offset={-70}
                >
                    <div>
                        <div className="mb-4">
                            <h4
                                id={headingId}
                                className="text-lg font-semibold text-foreground"
                            >
                                No matching files
                            </h4>
                            <p className="mx-auto max-w-sm text-muted-foreground">
                                <span className="block">
                                    The current file view has no matches.
                                </span>
                                <span className="block">
                                    Reset the filters to browse all files.
                                </span>
                            </p>
                        </div>
                        <Button type="button" variant="default">
                            Reset file view
                        </Button>
                    </div>
                </EmptyState>
            </div>
        </section>
    )
}

import Button from '@/components/ui/Button'
import Card from '@/components/ui/Card'

const createMediaWash = (colors: string[]) =>
    [
        `radial-gradient(ellipse at 20% 15%, color-mix(in oklab, ${colors[0]} 38%, transparent) 0%, transparent 72%)`,
        `radial-gradient(ellipse at 85% 10%, color-mix(in oklab, ${colors[1]} 34%, transparent) 0%, transparent 58%)`,
        `radial-gradient(ellipse at 70% 85%, color-mix(in oklab, ${colors[2]} 30%, transparent) 0%, transparent 64%)`,
        `radial-gradient(ellipse at 8% 88%, color-mix(in oklab, ${colors[3]} 24%, transparent) 0%, transparent 60%)`,
    ].join(', ')

const firstCardWash = createMediaWash([
    '#bcacd5',
    '#d8c7f3',
    '#ffaf5c',
    '#fd9891',
])

const secondCardWash = createMediaWash([
    '#9ed4ff',
    '#e5c8f7',
    '#b3e7f6',
    '#d6f1ff',
])

const BlankCanvasIllustration = () => (
    <svg
        width={200}
        height={200}
        viewBox="0 0 424 359"
        xmlns="http://www.w3.org/2000/svg"
        aria-hidden="true"
        focusable="false"
        className="absolute left-1/2 top-0 max-w-none -translate-x-1/2 fill-none"
    >
        <rect
            x={0.500057}
            y={0.500011}
            width={423}
            height={358}
            rx={19.5}
            className="fill-card/30 stroke-border"
        />
        <rect
            x={10.4981}
            y={8.50001}
            width={403}
            height={342}
            rx={19.5}
            className="fill-card stroke-border"
        />
        <circle
            cx={56.9996}
            cy={58}
            r={23}
            className="fill-muted"
        />
        <rect
            x={390.998}
            y={327}
            width={357}
            height={232}
            rx={11}
            transform="rotate(-180 390.998 327)"
            className="fill-muted"
        />
        <rect
            x={381}
            y={75}
            width={284}
            height={33}
            rx={6}
            transform="rotate(-180 381 75)"
            className="fill-muted"
        />
    </svg>
)

const PreparedTemplateIllustration = () => (
    <svg
        width={200}
        height={200}
        viewBox="0 0 424 359"
        xmlns="http://www.w3.org/2000/svg"
        aria-hidden="true"
        focusable="false"
        className="absolute left-1/2 top-0 max-w-none -translate-x-1/2 fill-none"
    >
        <rect
            x={0.500057}
            y={0.500011}
            width={423}
            height={358}
            rx={19.5}
            className="fill-card/30 stroke-border"
        />
        <rect
            x={10.5001}
            y={8.50001}
            width={403}
            height={342}
            rx={19.5}
            className="fill-card stroke-border"
        />
        <circle
            cx={57.0015}
            cy={58}
            r={23}
            className="fill-muted"
        />
        <rect
            x={391}
            y={207}
            width={357}
            height={112}
            rx={11}
            transform="rotate(-180 391 207)"
            className="fill-muted"
        />
        <rect
            x={204}
            y={333}
            width={170}
            height={112}
            rx={11}
            transform="rotate(-180 204 333)"
            className="fill-muted"
        />
        <rect
            x={391}
            y={333}
            width={170}
            height={112}
            rx={11}
            transform="rotate(-180 391 333)"
            className="fill-muted"
        />
        <rect
            x={173}
            y={75}
            width={76}
            height={33}
            rx={6}
            transform="rotate(-180 173 75)"
            className="fill-muted"
        />
        <rect
            x={266}
            y={75}
            width={76}
            height={33}
            rx={6}
            transform="rotate(-180 266 75)"
            className="fill-muted"
        />
        <rect
            x={359}
            y={75}
            width={76}
            height={33}
            rx={6}
            transform="rotate(-180 359 75)"
            className="fill-muted"
        />
    </svg>
)


export default function EmptyStateChoiceCards() {
    const headingId = 'empty-state-choice-cards-heading'

    return (
        <section
            aria-labelledby={headingId}
            className="flex w-full items-center justify-center px-4 py-8 sm:px-8 sm:py-12"
        >
            <div className="w-full max-w-3xl">
                <div className="mb-8 text-center">
                    <h4
                        id={headingId}
                        className="text-lg font-semibold text-foreground"
                    >
                        Welcome, Dave
                    </h4>
                    <p className="mx-auto max-w-sm text-muted-foreground">
                        Choose the amount of structure you want up front.
                        Everything can be adjusted after setup.
                    </p>
                </div>

                <div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
                    <Card
                        className="flex h-full flex-col"
                        bodyClass="flex flex-1 flex-col p-0"
                    >
                        <div className="relative h-40 overflow-hidden rounded-t-card border-b">
                            <div
                                aria-hidden="true"
                                className="absolute inset-0 opacity-90 dark:opacity-70"
                                style={{ backgroundImage: firstCardWash }}
                            />
                            <BlankCanvasIllustration />
                        </div>
                        <div className="flex flex-1 flex-col p-4">
                            <div className="mb-8">
                                <h5 className="text-base font-semibold text-foreground">
                                    Blank canvas
                                </h5>
                                <p className="mt-2 text-muted-foreground">
                                    Add the structure one section at a time.
                                    Keep only what this project needs.
                                </p>
                            </div>
                            <Button
                                type="button"
                                className="mt-auto self-start"
                            >
                                Create blank project
                            </Button>
                        </div>
                    </Card>

                    <Card
                        className="flex h-full flex-col"
                        bodyClass="flex flex-1 flex-col p-0"
                    >
                        <div className="relative h-40 overflow-hidden rounded-t-card border-b">
                            <div
                                aria-hidden="true"
                                className="absolute inset-0 opacity-90 dark:opacity-70"
                                style={{ backgroundImage: secondCardWash }}
                            />
                            <PreparedTemplateIllustration />
                        </div>
                        <div className="flex flex-1 flex-col p-4">
                            <div className="mb-8">
                                <h5 className="text-base font-semibold text-foreground">
                                    Prepared template
                                </h5>
                                <p className="mt-2 text-muted-foreground">
                                    Begin with an existing set of sections.
                                    Adjust the layout to match your workflow.
                                </p>
                            </div>
                            <Button
                                type="button"
                                variant="default"
                                className="mt-auto self-start"
                            >
                                Browse templates
                            </Button>
                        </div>
                    </Card>
                </div>
            </div>
        </section>
    )
}

import Card from '@/components/ui/Card'
import Button from '@/components/ui/Button'
import IconFrame from '@/components/composites/IconFrame'
import { PiFileText, PiPlusCircle } from 'react-icons/pi'

export default function EmptyStateSplitPreview() {
    const headingId = 'empty-state-split-preview-heading'
    const assetBase = 'https://statics.nateui.com/img'

    return (
        <section
            aria-labelledby={headingId}
            className="flex w-full items-center justify-center px-4 py-8 sm:px-8 sm:py-12"
        >
            <div className="w-full max-w-5xl">
                <Card className="overflow-hidden" bodyClass="p-0">
                    <div className="grid grid-cols-1 md:min-h-100 md:grid-cols-2">
                        <div className="flex min-w-0 flex-col justify-center p-8 md:p-12">
                            <IconFrame
                                variant="muted"
                                size={32}
                                className="self-start"
                            >
                                <PiFileText
                                    aria-hidden="true"
                                    className="text-base"
                                />
                            </IconFrame>
                            <h4
                                id={headingId}
                                className="mt-4 text-lg font-semibold text-foreground"
                            >
                                Nothing to report just yet
                            </h4>
                            <p className="mt-2 text-muted-foreground">
                                Add some data and this page fills with charts,
                                totals, and whatever else you want to keep an
                                eye on.
                            </p>
                            <div className="mt-8 flex flex-wrap gap-2">
                                <Button
                                    type="button"
                                    variant="solid"
                                    icon={<PiPlusCircle aria-hidden="true" />}
                                >
                                    Add report
                                </Button>
                                <Button type="button" variant="default">
                                    See an example
                                </Button>
                            </div>
                        </div>
                        <div className="relative md:pt-12">
                            <div className="relative h-full w-full aspect-video shadow-card rounded-card border bg-card md:aspect-auto md:rounded-tl-card md:rounded-tr-none md:rounded-br-none md:rounded-bl-none md:border-l md:border-t md:border-r-0 md:border-b-0">
                                <img
                                    src={`${assetBase}/thumbs/misc/img-18.png`}
                                    alt=""
                                    className="absolute inset-y-0 left-0 h-full w-auto max-w-none rounded-card object-cover object-left dark:hidden"
                                />
                                <img
                                    src={`${assetBase}/thumbs/misc/img-19.png`}
                                    alt=""
                                    className="absolute inset-y-0 left-0 hidden h-full w-auto max-w-none rounded-card object-cover object-left dark:block"
                                />
                                <div
                                    aria-hidden="true"
                                    className="pointer-events-none absolute inset-y-0 right-0 z-10 w-24 bg-gradient-to-l from-card to-transparent"
                                />
                            </div>
                        </div>
                    </div>
                </Card>
            </div>
        </section>
    )
}