Card

<template>
  <CCard>
    <CCardText>
      <CCardTitle
        title="Example title"
        subtitle="Subtitle content can go here"
      />
      <CCardBody>
        <CTextInput placeholder="example" />
      </CCardBody>
    </CCardText>
    <CCardFooter to="/components/card">
      <CCardAction label="Go to example" />
    </CCardFooter>
  </CCard>
</template>

<template>
  <CCard>
    <CCardText>
      <CCardTitle
        title="Example title"
        subtitle="Subtitle content can go here"
      />
      <CCardBody>
        <CTextInput placeholder="example" />
      </CCardBody>
    </CCardText>
    <CCardFooter to="/components/card">
      <CCardAction label="Go to example" />
    </CCardFooter>
  </CCard>
</template>

<template>
  <CCard to="/">
    <CCardText>
      <CCardTitle
        title="Example title"
        subtitle="Subtitle content can go here"
      />
      <CCardBody>
        Example body content
      </CCardBody>
    </CCardText>
  </CCard>
</template>

<template>
  <CCard to="/">
    <CCardText large>
      <CCardTitle
        large
        title="Example title"
        subtitle="Subtitle content can go here"
      />
      <CCardBody large>
        Example body content
      </CCardBody>
    </CCardText>
    <CCardFooter large>
      <CCardAction
        size="lg"
        label="Go to example"
      />
    </CCardFooter>
  </CCard>
</template>

<template>
  <CCard>
    <CCardText>
      <CCardTitle
        title="Example title"
        subtitle="Subtitle content can go here"
      />
      <CCardBody>
        Example body content
      </CCardBody>
    </CCardText>
    <CCardMedia left>
      <img
        src="/api-light.webp"
        alt="A terminal using a curl command to interact with the Cudo Compute API"
        class="inline-block rounded-tl-lg shadow-lg dark:hidden"
      >
      <img
        src="/api-dark.webp"
        alt="A terminal using a curl command to interact with the Cudo Compute API"
        class="hidden dark:inline-block"
      >
    </CCardMedia>
    <CCardFooter to="/">
      <CCardAction label="Go to example" />
    </CCardFooter>
  </CCard>
</template>

<template>
  <CCard>
    <CCardText large>
      <CCardTitle
        large
        title="Example title"
        subtitle="Subtitle content can go here"
      />
      <CCardBody large>
        Example body content
      </CCardBody>
    </CCardText>
    <CCardMedia
      large
      left
    >
      <img
        src="/api-light.webp"
        alt="A terminal using a curl command to interact with the Cudo Compute API"
        class="inline-block rounded-tl-lg shadow-lg dark:hidden"
      >
      <img
        src="/api-dark.webp"
        alt="A terminal using a curl command to interact with the Cudo Compute API"
        class="hidden dark:inline-block"
      >
    </CCardMedia>
    <CCardFooter
      large
      to="/components/card"
    >
      <CCardAction
        size="lg"
        label="Go to example"
      />
    </CCardFooter>
  </CCard>
</template>

<template>
  <CCard
    to="/"
    layout="landscape"
  >
    <CCardText>
      <CCardTitle
        title="Example title"
        subtitle="Subtitle content can go here"
      />
      <CCardBody>
        Example body content
      </CCardBody>
      <CCardAction label="Go to example" />
    </CCardText>
    <CCardMedia top>
      <img
        src="/api-light.webp"
        alt="A terminal using a curl command to interact with the Cudo Compute API"
        class="inline-block rounded-tl-lg shadow-lg dark:hidden"
      >
      <img
        src="/api-dark.webp"
        alt="A terminal using a curl command to interact with the Cudo Compute API"
        class="hidden dark:inline-block"
      >
    </CCardMedia>
  </CCard>
</template>

<script lang="ts" setup>
import { defaultFocusClasses } from '#cudo-components/classes'

const isHovered = ref(false)
const isFocused = ref(false)
const debouncedFocus = debouncedRef(isFocused, 100)
</script>

<template>
  <CCard
    to="/"
    @mouseover="isHovered = true"
    @mouseleave="isHovered = false"
    @focus="isFocused = true"
    @focusout="isFocused = false"
  >
    <template #action>
      <div
        class="absolute right--4 top--4 z-10 border-2 border-canvas-100 rounded-full dark:border-canvas-950"
        :class="[isHovered || debouncedFocus ? 'block' : 'hidden']"
      >
        <CTooltip>
          <button
            class="group/close z-10 flex items-center justify-center gap-1 border border-lm-border-1 rounded-full bg-white px-2 py-2 text-xs text-canvas-800 dark:border-dm-border hover:border-canvas-400 dark:bg-dm-bg-1 dark:text-white hover:shadow-xl dark:hover:border-canvas-500"
            :class="{ [defaultFocusClasses]: true }"
            type="button"
            @focus="isFocused = true"
            @focusout="isFocused = false"
          >
            <CIcon
              name="i-heroicons-solid-x"
              size="sm"
            />
          </button>
          <template #content>
            Remove from recent projects
          </template>
        </CTooltip>
      </div>
    </template>
    <CCardText>
      <CCardTitle title="Example title" />
      <CCardBody>
        Example body content
      </CCardBody>
    </CCardText>
  </CCard>
</template>