kremalicious/blog

---
import type React from 'react'

type Props = {
  title: string
  text: string
  icon: React.FunctionComponent
  url?: string
}

const { title, text, url, icon } = Astro.props
const Icon = icon
---

<style>
  .actionTitle {
    font-size: var(--font-size-base);
    color: var(--text-color);
    margin: 0;
    transition: 0.2s ease-out;
  }

  .actionText {
    font-size: var(--font-size-small);
    color: var(--text-color-light);
    margin-bottom: 0;
    transition: color 0.2s ease-out;
  }

  .action {
    display: block;
    margin: 0;
    padding: var(--spacer) calc(var(--spacer) / 2) var(--spacer)
      calc(var(--spacer) * 1.5);
    position: relative;
    text-align: left;
    text-decoration: none;
  }

  .action:hover .actionTitle,
  .action:focus .actionTitle {
    color: var(--link-color-hover);
    text-decoration: underline;
  }

  .action svg {
    width: 20px;
    height: 20px;
    position: absolute;
    left: calc(var(--spacer) / 1.5);
    top: calc(var(--spacer) / 1.05);
    stroke: var(--text-color-light);
  }
</style>

<a class="action" href={url}>
  <Icon />
  <h1 class="actionTitle">{title}</h1>
  <p class="actionText">{text}</p>
</a>