Skip to content

Commit

Permalink
add the tooltips to the staffcard
Browse files Browse the repository at this point in the history
  • Loading branch information
@Lumi-works
Lumi-works committed Aug 2, 2024
1 parent 2f32037 commit ff97760
Show file tree
Hide file tree
Showing 4 changed files with 101 additions and 101 deletions.
12 changes: 4 additions & 8 deletions src/app/page.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,20 +17,16 @@ export default function Home() {
<div className="flex flex-col col-span-2 justify-center p-4">
<h3 className="text-xl font-semibold text-center">MP</h3>
<hr className="border-gray/70 my-2" />
<h4 className="text-lg text-center mb-2">First MP Name</h4>
<p className="text-gray/80 text-md text-center">
Due Sep 15th, 23:59 CST
</p>
<h4 className="text-lg text-center mb-2">Come back later!</h4>
<p className="text-gray/80 text-md text-center">In the future</p>
</div>
</div>
<div className="border-4 border-yellow-500 rounded-lg shadow-md w-80 h-40 ml-12">
<div className="flex flex-col col-span-2 justify-center p-4">
<h3 className="text-xl font-semibold text-center">Lab</h3>
<hr className="border-gray/70 my-2" />
<h4 className="text-lg text-center mb-2">First Lab Name</h4>
<p className="text-gray/80 text-md text-center">
Due Sep 15th, 23:59 CST
</p>
<h4 className="text-lg text-center mb-2">Come back later!</h4>
<p className="text-gray/80 text-md text-center">In the future</p>
</div>
</div>
</div>
Expand Down
56 changes: 56 additions & 0 deletions src/app/support/StaffCard.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,56 @@
import Image from "next/image";
import Tooltip from "./Tooltip";

import squ from "public/profile_img/squ.jpg";

const StaffCard = () => {
return (
<div className="flex flex-col col-span-1 justify-center bg-white p-4 rounded-lg shadow-md w-60">
<div>
<Image
src={squ}
alt="Profile Image"
className="w-60 h-60 rounded-md mb-2"
width={60}
height={60}
/>
</div>
<div>
<h3 className="text-lg font-semibold">Squirrel Snow</h3>
<h4 className="text-gray-700 text-md">She/Her</h4>
<hr className="border-gray-700 my-2" />
</div>
<div className="flex items-center justify-around space-x-2">
<Tooltip text="Loves painting">
<span
role="img"
aria-label="hobby1"
className="text-2xl cursor-pointer"
>
🎨
</span>
</Tooltip>
<Tooltip text="Avid reader">
<span
role="img"
aria-label="hobby2"
className="text-2xl cursor-pointer"
>
📚
</span>
</Tooltip>
<Tooltip text="Enjoys running">
<span
role="img"
aria-label="hobby3"
className="text-2xl cursor-pointer"
>
🏃‍♀️
</span>
</Tooltip>
</div>
</div>
);
};

export default StaffCard;
37 changes: 37 additions & 0 deletions src/app/support/Tooltip.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,37 @@
"use client";

import { useState } from "react";

const Tooltip = ({ text, children }) => {
const [showTooltip, setShowTooltip] = useState(false);
const [hoverTimeout, setHoverTimeout] = useState(null);

const handleMouseEnter = () => {
const timeout = setTimeout(() => {
setShowTooltip(true);
}, 1000); // 1 second
setHoverTimeout(timeout);
};

const handleMouseLeave = () => {
clearTimeout(hoverTimeout);
setShowTooltip(false);
};

return (
<div
className="relative inline-block"
onMouseEnter={handleMouseEnter}
onMouseLeave={handleMouseLeave}
>
{children}
{showTooltip && (
<div className="absolute bottom-full left-1/2 transform -translate-x-1/2 mb-2 w-32 bg-black text-white text-center text-sm rounded py-1 px-2 ">
{text}
</div>
)}
</div>
);
};

export default Tooltip;
97 changes: 4 additions & 93 deletions src/app/support/page.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@ import Image from "next/image";
import React from "react";

import squ from "public/profile_img/squ.jpg";
import StaffCard from "./StaffCard";

const SupportPage = () => {
return (
Expand Down Expand Up @@ -72,99 +73,9 @@ const SupportPage = () => {
Meet Staffs
</h1>
<div className="grid grid-cols-3 gap-4">
<div className="flex flex-col col-span-1 justify-center bg-white p-4 rounded-lg shadow-md w-60">
<div>
<Image
src={squ}
alt="Profile Image"
className="w-60 h-60 rounded-md mb-2"
width={60}
height={60}
/>
</div>
<div>
<h3 className="text-lg font-semibold ">Squirrel Snow</h3>
<h4 className="text-gray/70 text-md">She/Her</h4>
<hr className="border-gray/70 my-2" />
</div>
<div className="flex items-center justify-around space-x-2">
<span role="img" aria-label="hobby1" className="text-2xl">
🎨
</span>{" "}
{/* Example emoji for hobby */}
<span role="img" aria-label="hobby2" className="text-2xl">
📚
</span>{" "}
{/* Example emoji for hobby */}
<span role="img" aria-label="hobby3" className="text-2xl">
🏃‍♀️
</span>{" "}
{/* Example emoji for hobby */}
</div>
{/* <div className="flex items-center justify-center"></div> */}
</div>
<div className="flex flex-col col-span-1 justify-center bg-white p-4 rounded-lg shadow-md w-60">
<div>
<Image
src={squ}
alt="Profile Image"
className="w-60 h-60 rounded-md mb-2"
width={60}
height={60}
/>
</div>
<div>
<h3 className="text-lg font-semibold ">Squirrel Snow</h3>
<h4 className="text-gray/70 text-md">She/Her</h4>
<hr className="border-gray/70 my-2" />
</div>
<div className="flex items-center justify-around space-x-2">
<span role="img" aria-label="hobby1" className="text-2xl">
🎨
</span>{" "}
{/* Example emoji for hobby */}
<span role="img" aria-label="hobby2" className="text-2xl">
📚
</span>{" "}
{/* Example emoji for hobby */}
<span role="img" aria-label="hobby3" className="text-2xl">
🏃‍♀️
</span>{" "}
{/* Example emoji for hobby */}
</div>
{/* <div className="flex items-center justify-center"></div> */}
</div>
<div className="flex flex-col col-span-1 justify-center bg-white p-4 rounded-lg shadow-md w-60">
<div>
<Image
src={squ}
alt="Profile Image"
className="w-60 h-60 rounded-md mb-2"
width={60}
height={60}
/>
</div>
<div>
<h3 className="text-lg font-semibold ">Squirrel Snow</h3>
<h4 className="text-gray/70 text-md">She/Her</h4>
<hr className="border-gray/70 my-2" />
</div>
<div className="flex items-center justify-around space-x-2">
<span role="img" aria-label="hobby1" className="text-2xl">
🎨
</span>{" "}
{/* Example emoji for hobby */}
<span role="img" aria-label="hobby2" className="text-2xl">
📚
</span>{" "}
{/* Example emoji for hobby */}
<span role="img" aria-label="hobby3" className="text-2xl">
🏃‍♀️
</span>{" "}
{/* Example emoji for hobby */}
</div>
{/* <div className="flex items-center justify-center"></div> */}
</div>
<StaffCard />
<StaffCard />
<StaffCard />
</div>
</div>
</div>
Expand Down

0 comments on commit ff97760

Please sign in to comment.