blob: d5a9fa71567539c4fdad94d3bffbb28dc3436491 (
plain) (
blame)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
|
---
import { componentIsHTMLElement } from "astro/runtime/server/render/dom.js";
import Dribbble from "./icons/Dribbble.astro";
import Facebook from "./icons/Facebook.astro";
import Instagram from "./icons/Instagram.astro";
import Linkedin from "./icons/Linkedin.astro";
import Shop from "./icons/Shop.astro";
import Twitch from "./icons/Twitch.astro";
import Url from "./icons/Url.astro";
import XTwitter from "./icons/X-twitter.astro";
import Youtube from "./icons/Youtube.astro";
interface Props {
icon: string;
title: string;
description: string;
url: string;
}
const { icon, title, description, url } = Astro.props;
---
<a href={url} class="link">
<span class="link-icon">
{icon === 'dribble' && <Dribbble></Dribbble>}
{icon === 'facebook' && <Facebook></Facebook>}
{icon === 'instagram' && <Instagram></Instagram>}
{icon === 'linkedin' && <Linkedin></Linkedin>}
{icon === 'shop' && <Shop></Shop>}
{icon === 'twitch' && <Twitch></Twitch>}
{icon === 'url' && <Url></Url>}
{icon === 'xtwitter' && <XTwitter></XTwitter>}
{icon === 'youtube' && <Youtube></Youtube>}
</span>
<div class="link-content">
<h2 class="link-title">{title}</h2>
<p class="link-description">{description}</p>
</div>
</a>
<style>
.link {
padding: 0.75rem;
display: flex;
border: 1px solid var(--zinc-800);
border-radius: 1rem;
text-decoration: none;
}
.link-icon {
width: 3rem;
height: 3rem;
margin-right: 1.125rem;
background: var(--zinc-900);
border-radius: 0.5rem;
display: flex;
justify-content: center;
align-items: center;
}
.link-title, .link-description {
font-size: 1rem;
}
.link-title {
color: var(--zinc-50);
font-weight: normal;
}
.link-description {
color: var(--zinc-400);
margin-top: 0.125rem;
}
</style>
|
