yarkov.tech/src/components/ProjectItem.astro

---
import { Icon } from "astro-icon/components";
import UIString from "@components/UIString.astro";
import { Project_TranslationsQuery } from "../graphql/graphql";
import { DIRECTUS_URL } from "astro:env/server";

export interface Props {
	data: Project_TranslationsQuery["project_translations"][0];
}

const { data } = Astro.props as Props;
const { icon, title, year, description, article_url, source_url, demo_url } = data;
---

<div class="project-item">
	<div class="project-item__heading">
		<h2>
			{icon && <img data-icon src={`${DIRECTUS_URL}/assets/${icon.filename_disk}`} />}
			{title}
		</h2>
		<span>{year}</span>
	</div>
	<div class="project-item__description">
		<p>{description}</p>
	</div>
	<div class="project-item__links">
		{
			article_url && (
				<a class="btn-link" href={article_url} target="_blank">
					<UIString key={"btn.article"} />
				</a>
			)
		}
		{
			source_url && (
				<a class="btn-link" href={source_url} target="_blank">
					<UIString key={"btn.sourceCode"} />
					<Icon name="mdi:link-variant" width="15" height="15" />
				</a>
			)
		}
		{
			demo_url && (
				<a class="btn-link" href={demo_url} target="_blank">
					<UIString key={"btn.demo"} />
					<Icon name="mdi:link-variant" width="15" height="15" />
				</a>
			)
		}
	</div>
</div>

<style lang="scss">
	.project-item {
		display: flex;
		flex-direction: column;
		border: 1px solid var(--border-color);
		border-radius: var(--border-radius-lg);
		padding: 15px;

		&__heading {
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-bottom: 10px;

			& h2 {
				display: flex;
				align-items: center;
				font-size: 1.2rem;
				font-weight: 600;
				column-gap: 10px;
				margin: 0;
				padding: 0;
			}

			& span {
				font-size: var(--font-size-sm);
				color: var(--font-color-gray);
			}
		}

		&__links {
			display: flex;
			margin-top: auto;
			column-gap: 5px;
		}
	}
</style>