Merge pull request #51 from fResult/ui/link-card

feat: Create CardLink as a reusable component and improve accessibility…

Author: heypoom

src/components/CardLink.astro

@@ -0,0 +1,25 @@
+---
+interface Props {
+	title: string
+	url: string
+	description: string
+	languages?: string[]
+}
+
+const { title, url, description, languages = [] } = Astro.props
+---
+
+<div class="project-card group relative">
+	<div class="grid gap-2">
+		<a href={url} class="after:absolute after:inset-0 after:content-[''] after:focus:border-2 after:focus:transition-all focus:after:border-bosf/50 group-focus:scale-[1.01]">
+			<h3 class="text-2xl font-medium transition-all">
+				{title}
+			</h3>
+		</a>
+		<p class="text-base">
+			{description}
+		</p>
+		<!-- TODO: Languages display as tags -->
+		{languages.length > 0 && <p>{languages.join(', ')}</p>}
+	</div>
+</div>