-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
dca3e10
commit 5b3d466
Showing
7 changed files
with
147 additions
and
8 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,35 @@ | ||
| "use client"; | ||
| import React from "react"; | ||
| import { AnimatedTooltip } from "./ui/animated-tooltip"; | ||
| const people = [ | ||
| { | ||
| id: 1, | ||
| name: "Neeraj Rekwar", | ||
| designation: "Passionate programmer", | ||
| image: | ||
| "/me.webp", | ||
| }, | ||
| { | ||
| id: 2, | ||
| name: "Robert Johnson", | ||
| designation: "Product Manager", | ||
| image: | ||
| "", | ||
| }, | ||
| { | ||
| id: 3, | ||
| name: "Jane Smith", | ||
| designation: "Data Scientist", | ||
| image: | ||
| "", | ||
| } | ||
|
|
||
| ]; | ||
|
|
||
| export function AnimatedTooltipPreview() { | ||
| return ( | ||
| <div className="flex flex-row items-center justify-center mb-10 w-full"> | ||
| <AnimatedTooltip items={people} /> | ||
| </div> | ||
| ); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,94 @@ | ||
| "use client"; | ||
| import Image from "next/image"; | ||
| import React, { useState } from "react"; | ||
| import { | ||
| motion, | ||
| useTransform, | ||
| AnimatePresence, | ||
| useMotionValue, | ||
| useSpring, | ||
| } from "framer-motion"; | ||
|
|
||
| export const AnimatedTooltip = ({ | ||
| items, | ||
| }: { | ||
| items: { | ||
| id: number; | ||
| name: string; | ||
| designation: string; | ||
| image: string; | ||
| }[]; | ||
| }) => { | ||
| const [hoveredIndex, setHoveredIndex] = useState<number | null>(null); | ||
| const springConfig = { stiffness: 100, damping: 5 }; | ||
| const x = useMotionValue(0); // going to set this value on mouse move | ||
| // rotate the tooltip | ||
| const rotate = useSpring( | ||
| useTransform(x, [-100, 100], [-45, 45]), | ||
| springConfig | ||
| ); | ||
| // translate the tooltip | ||
| const translateX = useSpring( | ||
| useTransform(x, [-100, 100], [-50, 50]), | ||
| springConfig | ||
| ); | ||
| const handleMouseMove = (event: any) => { | ||
| const halfWidth = event.target.offsetWidth / 2; | ||
| x.set(event.nativeEvent.offsetX - halfWidth); // set the x value, which is then used in transform and rotate | ||
| }; | ||
|
|
||
| return ( | ||
| <> | ||
| {items.map((item, idx) => ( | ||
| <div | ||
| className="-mr-4 relative group" | ||
| key={item.name} | ||
| onMouseEnter={() => setHoveredIndex(item.id)} | ||
| onMouseLeave={() => setHoveredIndex(null)} | ||
| > | ||
| <AnimatePresence mode="popLayout"> | ||
| {hoveredIndex === item.id && ( | ||
| <motion.div | ||
| initial={{ opacity: 0, y: 20, scale: 0.6 }} | ||
| animate={{ | ||
| opacity: 1, | ||
| y: 0, | ||
| scale: 1, | ||
| transition: { | ||
| type: "spring", | ||
| stiffness: 260, | ||
| damping: 10, | ||
| }, | ||
| }} | ||
| exit={{ opacity: 0, y: 20, scale: 0.6 }} | ||
| style={{ | ||
| translateX: translateX, | ||
| rotate: rotate, | ||
| whiteSpace: "nowrap", | ||
| }} | ||
| className="absolute -top-16 -left-1/2 translate-x-1/2 flex text-xs flex-col items-center justify-center rounded-md bg-black z-50 shadow-xl px-4 py-2" | ||
| > | ||
| <div className="absolute inset-x-10 z-30 w-[20%] -bottom-px bg-gradient-to-r from-transparent via-emerald-500 to-transparent h-px " /> | ||
| <div className="absolute left-10 w-[40%] z-30 -bottom-px bg-gradient-to-r from-transparent via-sky-500 to-transparent h-px " /> | ||
| <div className="font-bold text-white relative z-30 text-base"> | ||
| {item.name} | ||
| </div> | ||
| <div className="text-white text-xs">{item.designation}</div> | ||
| </motion.div> | ||
| )} | ||
| </AnimatePresence> | ||
| {item.image ? (<Image | ||
| onMouseMove={handleMouseMove} | ||
| height={100} | ||
| width={100} | ||
| src={item.image} | ||
| alt={item.name} | ||
| className="object-cover !m-0 !p-0 object-top rounded-full h-14 w-14 border-2 group-hover:scale-105 group-hover:z-30 border-white relative transition duration-500" | ||
| />) : ( | ||
| <div className="h-44 w-44"></div> | ||
| )} | ||
| </div> | ||
| ))} | ||
| </> | ||
| ); | ||
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters