66 lines
2.0 KiB
Plaintext
66 lines
2.0 KiB
Plaintext
---
|
|
import Tag from '../ui/Tag.astro';
|
|
|
|
export interface Props {
|
|
year: string;
|
|
role: string;
|
|
company: string;
|
|
description: string;
|
|
tech: string[];
|
|
slug?: string;
|
|
}
|
|
|
|
const { year, role, company, description, tech, slug } = Astro.props;
|
|
---
|
|
|
|
{slug ? (
|
|
<a href={`/work/${slug}`} class="block">
|
|
<div
|
|
class="group grid lg:grid-cols-12 gap-4 sm:gap-8 py-6 sm:py-8 border-b border-border/50 hover:border-border transition-colors duration-500 cursor-pointer"
|
|
>
|
|
<div class="lg:col-span-2">
|
|
<div class="text-xl sm:text-2xl font-light text-muted-foreground group-hover:text-foreground transition-colors duration-500">
|
|
{year}
|
|
</div>
|
|
</div>
|
|
|
|
<div class="lg:col-span-6 space-y-3">
|
|
<div>
|
|
<h3 class="text-lg sm:text-xl font-medium">{role}</h3>
|
|
<div class="text-muted-foreground">{company}</div>
|
|
</div>
|
|
<p class="text-muted-foreground leading-relaxed max-w-lg">{description}</p>
|
|
</div>
|
|
|
|
<div class="lg:col-span-4 flex flex-wrap gap-2 lg:justify-end mt-2 lg:mt-0">
|
|
{tech.map((technology) => (
|
|
<Tag text={technology} variant="tech" />
|
|
))}
|
|
</div>
|
|
</div>
|
|
</a>
|
|
) : (
|
|
<div
|
|
class="group grid lg:grid-cols-12 gap-4 sm:gap-8 py-6 sm:py-8 border-b border-border/50 hover:border-border transition-colors duration-500"
|
|
>
|
|
<div class="lg:col-span-2">
|
|
<div class="text-xl sm:text-2xl font-light text-muted-foreground group-hover:text-foreground transition-colors duration-500">
|
|
{year}
|
|
</div>
|
|
</div>
|
|
|
|
<div class="lg:col-span-6 space-y-3">
|
|
<div>
|
|
<h3 class="text-lg sm:text-xl font-medium">{role}</h3>
|
|
<div class="text-muted-foreground">{company}</div>
|
|
</div>
|
|
<p class="text-muted-foreground leading-relaxed max-w-lg">{description}</p>
|
|
</div>
|
|
|
|
<div class="lg:col-span-4 flex flex-wrap gap-2 lg:justify-end mt-2 lg:mt-0">
|
|
{tech.map((technology) => (
|
|
<Tag text={technology} variant="tech" />
|
|
))}
|
|
</div>
|
|
</div>
|
|
)} |