sites/main/src/components/Challenge.astro

---

import active from '../images/active.svg';
import wip from '../images/wip.svg';
import { Status } from './Project.astro';


interface Props {
    name: string,
    url: 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;
    }
	default:
	case Status.Inactive:
    case Status.WIP: {
        color = "bg-yellow";
        icon = wip.src;
        break;
    }
}
---

<a href={url} class="w-max h-fit 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 gap-2">
        <p class="text-text text-lg">{name}</p>
		<img src={icon} alt="cross" class="h-8 self-start"/>
    </div>
</a>