Card

<HvCard className="w-440px" bgcolor="bgContainer">
  <HvCardHeader
    title={<HvTypography variant="title4">Card Title</HvTypography>}
    icon={
      <HvStatusIcon
        variant="default"
        customIcon={<div className="i-ph-tree-structure" />}
      />
    }
    subheader={
      <HvTypography variant="caption1">
        Optional description or hint text
      </HvTypography>
    }
  />


  <HvCardContent>
    <HvTypography>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean finibus,
      odio sed scelerisque tempor, diam libero consectetur leo, ac tristique
      lectus velit in nisl. Cras eu consectetur turpis, in imperdiet nulla.
    </HvTypography>
  </HvCardContent>
  <HvActionBar>
    <HvButton variant="primarySubtle">Button</HvButton>
  </HvActionBar>
</HvCard>

<HvCard className="w-240px" bgcolor="bgContainer">
  <HvCardMedia
    component="img"
    alt="Schedule New Job"
    height={120}
    image="https://s7d9.scene7.com/is/image/hitachivantara/take-charge-of-your-hybrid-cloud-estate-everflex-control-square:mediumvertical?fmt=webp"
  />
  <HvCardContent>
    <HvTypography>
      Use the live code editor to change the position of the `HvCardMedia`
      component in the card.
    </HvTypography>
  </HvCardContent>
</HvCard>

<>
  <HvCard className="w-380px" bgcolor="bgContainer">
    <HvCardHeader
      title={
        <HvTypography variant="title4">Start using UI Kit now</HvTypography>
      }
      subheader={
        <HvTypography variant="caption1">
          Get started with the UI Kit and build your next project.
        </HvTypography>
      }
    />
    <HvActionBar className="flex-1 gap-xs">
      <HvButton startIcon={<Code />} variant="secondarySubtle">
        Github
      </HvButton>
      <HvButton startIcon={<Doc />}>Get Started</HvButton>
    </HvActionBar>
  </HvCard>
</>

<HvCard className="w-240px" bgcolor="bgContainer" statusColor="negative">
  <HvCardHeader title={<HvTypography variant="title4">Error</HvTypography>} />
  <HvCardContent>
    <HvTypography>Something went wrong. Please try again later.</HvTypography>
  </HvCardContent>
</HvCard>

<HvCard
  className="w-440px"
  bgcolor="bgContainer"
  icon={<HvStatusIcon variant="success" weight="duotone" type="simple" />}
>
  <HvCardHeader
    title={<HvTypography variant="title4">Card Title</HvTypography>}
    icon={
      <HvStatusIcon
        variant="default"
        customIcon={<div className="i-ph-tree-structure" />}
      />
    }
    subheader={
      <HvTypography variant="caption1">
        Optional description or hint text
      </HvTypography>
    }
  />
  <HvCardContent>
    <HvTypography>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean finibus,
      odio sed scelerisque tempor, diam libero consectetur leo, ac tristique
      lectus velit in nisl. Cras eu consectetur turpis, in imperdiet nulla.
    </HvTypography>
  </HvCardContent>
  <HvActionBar>
    <HvButton variant="primarySubtle">Button</HvButton>
  </HvActionBar>
</HvCard>

import { useState } from "react";
import { Cloud, Storage } from "@hitachivantara/uikit-react-icons";


export default function Demo() {
  const [checked, setChecked] = useState(null);


  return (
    <div className="flex flex-row gap-sm w-full">
      {storages.map((p, idx) => (
        <StorageCard
          key={idx}
          selected={checked === idx}
          title={p.name}
          icon={p.icon}
          description={p.description}
          onSelect={() => setChecked(idx)}
        />
      ))}
    </div>
  );
}


function StorageCard({
  selected,
  title,
  icon,
  description,
  onSelect,
  ...others
}: StorageCardProps) {
  return (
    <HvCard
      bgcolor="bgContainer"
      className="flex-1"
      selectable
      selected={selected}
      {...others}
    >
      <button
        type="button"
        onClick={onSelect}
        aria-label={`Press enter or space to select the ${title}.`}
        className="w-full text-left"
      >
        <HvCardHeader
          title={
            <div className="flex justify-between items-center">
              <div className="flex gap-xs items-center">
                {icon}
                <HvTypography variant="title4">{title}</HvTypography>
              </div>
              <HvRadio
                onChange={onSelect}
                checked={selected}
                value="value"
                aria-label={`Tick to select the ${title} payment.`}
              />
            </div>
          }
        />
        <HvCardContent>{description}</HvCardContent>
      </button>
    </HvCard>
  );
}


interface StorageCardProps extends HvCardProps {
  title: string;
  icon: React.ReactNode;
  description: string;
  onSelect?: () => void;
}


const storages = [
  {
    name: "Local Storage",
    icon: <HvStatusIcon customIcon={<Storage size="S" />} />,
    description: "Use local storage for quick access to user settings.",
  },
  {
    name: "Cloud Storage",
    icon: <HvStatusIcon customIcon={<Cloud size="S" />} />,
    description: "Use cloud storage for secure, scalable data access.",
  },
];