Rainnny/rainnny.club
Rainnny/rainnny.club
1
0
Fork 0
Code Issues 1 Pull Requests 4 Actions Activity

Add tooltip to projects in the my work section
All checks were successful
Deploy Site / docker (ubuntu-latest, 2.44.0) (push) Successful in 1m15s
Details

Browse Source
This commit is contained in:
Braydon 2024-09-25 18:02:14 -04:00
parent 8347793ec9
commit 606a58be1b
1 changed files with 57 additions and 47 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
src/components/landing/nav-content/my-work.tsx
View File

@ -10,6 +10,7 @@ import Project from "@/types/project";
import { ScrollArea } from "@/components/ui/scroll-area";
import Image from "next/image";
import { truncateText } from "@/lib/utils";
import SimpleTooltip from "@/components/ui/simple-tooltip";
const projects: Project[] = [
{
@ -76,12 +77,16 @@ const MyWork = (): ReactElement => {
return (
<ScrollArea className="h-[17.75rem]">
<div className="max-w-[55rem] flex flex-wrap gap-3 justify-center">
{projects.map((project, index) => (
<Link
{projects.map((project: Project, index: number) => (
<SimpleTooltip
key={index}
href={project.link || "#"}
target="_blank"
content={
<p className="max-w-[23rem] text-center">
{project.description}
</p>
}
>
<Link href={project.link || "#"} target="_blank">
<MagicCard
className="w-[15rem] lg:w-[25rem] p-3.5 opacity-95"
gradientColor={
@ -104,12 +109,16 @@ const MyWork = (): ReactElement => {
</div>
<div className="flex gap-1 text-sm">
<span className="text-green-400/80">
{project.startDate.format("MMM YYYY")}
{project.startDate.format(
"MMM YYYY"
)}
</span>
🞄
{project.endDate ? (
<span className="text-red-400/80">
{project.endDate.format("MMM YYYY")}
{project.endDate.format(
"MMM YYYY"
)}
</span>
) : (
<span className="text-green-400/80">
@ -125,6 +134,7 @@ const MyWork = (): ReactElement => {
</p>
</MagicCard>
</Link>
</SimpleTooltip>
))}
</div>
</ScrollArea>