Add tooltip support to project tags
This commit is contained in:
@@ -1,12 +1,14 @@
|
||||
---
|
||||
import { Icon } from "astro-icon/components";
|
||||
import Section from "./ui/Section.astro";
|
||||
import Tooltip from "./ui/Tooltip.astro";
|
||||
|
||||
const { projects } = Astro.props;
|
||||
|
||||
interface ProjectTag {
|
||||
name: string;
|
||||
icon?: string;
|
||||
tooltip?: string;
|
||||
}
|
||||
|
||||
interface ProjectProps {
|
||||
@@ -40,11 +42,14 @@ interface ProjectProps {
|
||||
<div class="flex flex-wrap gap-2 mb-6">
|
||||
{project.tags.map((tag: ProjectTag) => (
|
||||
<span class="inline-flex items-center px-3 py-1 bg-gray-800 text-gray-300 text-sm rounded-full">
|
||||
<Icon
|
||||
name={tag.icon}
|
||||
class="w-6 h-6 mr-2"
|
||||
data-inline="false"
|
||||
/>
|
||||
<div class="relative group">
|
||||
<Icon
|
||||
name={tag.icon}
|
||||
class="w-6 h-6 mr-2"
|
||||
data-inline="false"
|
||||
/>
|
||||
<Tooltip tooltip={tag.tooltip} />
|
||||
</div>
|
||||
</span>
|
||||
))}
|
||||
{project.liveUrl && (
|
||||
|
||||
Reference in New Issue
Block a user