My personal site hosted @ https://indexx.dev
indexx.dev
1---
2import type { JSX } from "astro/jsx-runtime";
3
4interface Props {
5 icon?: any;
6 name: string;
7 href: string;
8 tooltip?: {
9 title: string;
10 placement?: string;
11 };
12 rel?: string;
13}
14
15const { icon, name, href, tooltip, rel } = Astro.props;
16
17const Icon = icon;
18---
19
20<a
21 rel={rel}
22 href={href}
23 target="_blank"
24 {...tooltip && {
25 "data-bs-toggle": "tooltip",
26 "data-bs-title": tooltip.title,
27 "data-bs-placement": tooltip.placement || "bottom",
28 }}
29>
30 <span class="icon-hover">
31 {Icon ? <Icon style="width: 35px; height: 35px;" /> : name}
32 </span>
33</a>
34
35<style>
36 .icon-hover {
37 display: inline-block;
38 transition: transform 0.2s ease;
39 }
40 a:hover .icon-hover {
41 transform: scale(1.12);
42 }
43</style>