37 lines
1.1 KiB
Vue
37 lines
1.1 KiB
Vue
<template>
|
|
<a
|
|
:href="url"
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
class="group block border border-white/10 rounded-lg p-6 transition-all duration-300 hover:border-white/30 hover:bg-white/[0.03]"
|
|
>
|
|
<div class="flex items-start justify-between gap-4">
|
|
<div>
|
|
<h3 class="font-mono font-medium text-lg text-white group-hover:text-white transition-colors">
|
|
{{ title }}
|
|
</h3>
|
|
<p class="mt-1 text-sm text-white/50 font-mono">{{ domain }}</p>
|
|
<p class="mt-3 text-white/60 leading-relaxed">{{ description }}</p>
|
|
</div>
|
|
<svg
|
|
class="w-5 h-5 text-white/20 group-hover:text-white/60 transition-all duration-300 group-hover:translate-x-0.5 group-hover:-translate-y-0.5 shrink-0 mt-1"
|
|
fill="none"
|
|
viewBox="0 0 24 24"
|
|
stroke="currentColor"
|
|
stroke-width="1.5"
|
|
>
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="M4.5 19.5l15-15m0 0H8.25m11.25 0v11.25" />
|
|
</svg>
|
|
</div>
|
|
</a>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
defineProps<{
|
|
title: string
|
|
domain: string
|
|
url: string
|
|
description: string
|
|
}>()
|
|
</script>
|