sites/main/src/components/Project.astro

---

import active from '../images/active.svg';
import wip from '../images/wip.svg';
import inactive from '../images/inactive.svg';

export enum Status {
    Active,
    Inactive,
    WIP
}

interface Props {
    name: string,
    url: string,
    children: string;
    status: Status;
}

const { name, url, status } = Astro.props;

let color: string;
let icon: string;

switch (status) {
    case Status.Active: {
        color = "bg-green";
        icon = active.src;
        break;
    }
    case Status.WIP: {
        color = "bg-yellow";
        icon = wip.src;
        break;
    }
    default:
    case Status.Inactive: {
        color = "bg-red";
        icon = inactive.src;
        break;
    }
}
---

<a href={url} class="w-72 h-36 flex flex-col rounded-lg p-2 m-2 bg-surface0 shadow-md shadow-crust transition-transform hover:bg-surface1 hover:drop-shadow-md hover:-translate-y-1">
    <div class="flex justify-between mr-1 mb-1 items-end">
        <p class="text-text text-lg">{name}</p>
        <img src={icon} alt="cross" class="h-8"/>
    </div>
    <div class={`h-[2px] w-full mb-1 ${color}`}/>
    <p class="text-text text-sm text-ellipsis overflow-hidden"><slot /></p>
</a>