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

104
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 { ScrollArea } from "@/components/ui/scroll-area";
import Image from "next/image"; import Image from "next/image";
import { truncateText } from "@/lib/utils"; import { truncateText } from "@/lib/utils";
import SimpleTooltip from "@/components/ui/simple-tooltip";
const projects: Project[] = [ const projects: Project[] = [
{ {
@ -76,55 +77,64 @@ const MyWork = (): ReactElement => {
return ( return (
<ScrollArea className="h-[17.75rem]"> <ScrollArea className="h-[17.75rem]">
<div className="max-w-[55rem] flex flex-wrap gap-3 justify-center"> <div className="max-w-[55rem] flex flex-wrap gap-3 justify-center">
{projects.map((project, index) => ( {projects.map((project: Project, index: number) => (
<Link <SimpleTooltip
key={index} key={index}
href={project.link || "#"} content={
target="_blank" <p className="max-w-[23rem] text-center">
> {project.description}
<MagicCard
className="w-[15rem] lg:w-[25rem] p-3.5 opacity-95"
gradientColor={
theme === "dark" ? "#262626" : "#D9D9D9"
}
>
{/* Icon, Name & Years Active */}
<div className="flex flex-col lg:flex-row gap-0 md:gap-3 justify-center lg:justify-start lg:items-center">
<div className="flex gap-3">
<Image
className="rounded-full"
src={project.icon}
alt={`The ${project.name} Project Icon`}
width={24}
height={24}
/>
<h1 className="font-semibold select-none pointer-events-none">
{project.name}
</h1>
</div>
<div className="flex gap-1 text-sm">
<span className="text-green-400/80">
{project.startDate.format("MMM YYYY")}
</span>
🞄
{project.endDate ? (
<span className="text-red-400/80">
{project.endDate.format("MMM YYYY")}
</span>
) : (
<span className="text-green-400/80">
Present
</span>
)}
</div>
</div>
{/* Description */}
<p className="mt-2.5 text-black dark:!text-transparent bg-clip-text bg-gradient-to-br from-zinc-300/80 to-white">
{truncateText(project.description, 136)}
</p> </p>
</MagicCard> }
</Link> >
<Link href={project.link || "#"} target="_blank">
<MagicCard
className="w-[15rem] lg:w-[25rem] p-3.5 opacity-95"
gradientColor={
theme === "dark" ? "#262626" : "#D9D9D9"
}
>
{/* Icon, Name & Years Active */}
<div className="flex flex-col lg:flex-row gap-0 md:gap-3 justify-center lg:justify-start lg:items-center">
<div className="flex gap-3">
<Image
className="rounded-full"
src={project.icon}
alt={`The ${project.name} Project Icon`}
width={24}
height={24}
/>
<h1 className="font-semibold select-none pointer-events-none">
{project.name}
</h1>
</div>
<div className="flex gap-1 text-sm">
<span className="text-green-400/80">
{project.startDate.format(
"MMM YYYY"
)}
</span>
🞄
{project.endDate ? (
<span className="text-red-400/80">
{project.endDate.format(
"MMM YYYY"
)}
</span>
) : (
<span className="text-green-400/80">
Present
</span>
)}
</div>
</div>
{/* Description */}
<p className="mt-2.5 text-black dark:!text-transparent bg-clip-text bg-gradient-to-br from-zinc-300/80 to-white">
{truncateText(project.description, 136)}
</p>
</MagicCard>
</Link>
</SimpleTooltip>
))} ))}
</div> </div>
</ScrollArea> </ScrollArea>