mirror of https://github.com/gabehf/mnrva.dev.git
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
63 lines
1.7 KiB
63 lines
1.7 KiB
---
|
|
import type { Project } from "@/data/projects";
|
|
|
|
type Props = Project;
|
|
|
|
const { title, techs, link, isComingSoon } = Astro.props;
|
|
|
|
const formatTechs = (values: string[]) =>
|
|
values.toString().replaceAll(",", " • ");
|
|
---
|
|
|
|
<>
|
|
{
|
|
isComingSoon && (
|
|
<div class="t group flex w-full flex-col justify-between gap-2 rounded-md border border-neutral-700 p-4 md:flex-row md:items-center">
|
|
<div class="flex flex-col gap-2 md:flex-row md:items-center md:gap-4">
|
|
<p class="text-neutral-100">{title}</p>
|
|
<p>{formatTechs(techs)}</p>
|
|
</div>
|
|
|
|
<p class="w-fit rounded-md bg-neutral-900 px-4 py-1">Soon</p>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
{
|
|
!isComingSoon && (
|
|
<a
|
|
class="group flex w-full cursor-pointer flex-col justify-between gap-2 rounded-md border border-neutral-700 p-4 transition-all duration-300 hover:-translate-y-2 hover:border-neutral-400 md:flex-row md:items-center"
|
|
href={link}
|
|
target="_blank"
|
|
rel="noreferrer"
|
|
>
|
|
<div class="flex flex-col gap-4 md:flex-row md:items-center">
|
|
<p class="text-neutral-100">{title}</p>
|
|
<p>{formatTechs(techs)}</p>
|
|
</div>
|
|
|
|
<svg
|
|
width="18"
|
|
height="18"
|
|
viewBox="0 0 18 18"
|
|
fill="none"
|
|
class="transition-all duration-300 group-hover:translate-x-1"
|
|
>
|
|
<path
|
|
d="M5.25 12.75L12.75 5.25"
|
|
stroke="#999999"
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
/>
|
|
<path
|
|
d="M5.25 5.25H12.75V12.75"
|
|
stroke="#999999"
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
/>
|
|
</svg>
|
|
</a>
|
|
)
|
|
}
|
|
</>
|