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}
13
14const { icon, name, href, tooltip } = Astro.props;
15
16const Icon = icon;
17---
18
19<a
20 href={href}
21 target="_blank"
22 {...tooltip && {
23 "data-bs-toggle": "tooltip",
24 "data-bs-title": tooltip.title,
25 "data-bs-placement": tooltip.placement || "bottom",
26 }}
27>
28 <span class="icon-hover">
29 {Icon ? <Icon style="width: 35px; height: 35px;" /> : name}
30 </span>
31</a>
32
33<style>
34 .icon-hover {
35 display: inline-block;
36 transition: transform 0.2s ease;
37 }
38 a:hover .icon-hover {
39 transform: scale(1.12);
40 }
41</style>