-
Notifications
You must be signed in to change notification settings - Fork 30
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
5af60aa
commit 727d779
Showing
187 changed files
with
26,491 additions
and
14,080 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
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
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
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
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,141 @@ | ||
| // @ts-nocheck | ||
| 'use client'; | ||
|
|
||
| import React, { createContext, useContext, useEffect, useRef, useState } from 'react'; | ||
| import { cn } from '../../lib/utils'; | ||
|
|
||
| const MouseEnterContext = createContext< | ||
| [boolean, React.Dispatch<React.SetStateAction<boolean>>] | undefined | ||
| >(undefined); | ||
|
|
||
| export const CardContainer = ({ | ||
| children, | ||
| className, | ||
| containerClassName, | ||
| }: { | ||
| children?: React.ReactNode; | ||
| className?: string; | ||
| containerClassName?: string; | ||
| }) => { | ||
| const containerRef = useRef<HTMLDivElement>(null); | ||
| const [isMouseEntered, setIsMouseEntered] = useState(false); | ||
|
|
||
| const handleMouseMove = (e: React.MouseEvent<HTMLDivElement>) => { | ||
| if (!containerRef.current) return; | ||
| const { left, top, width, height } = containerRef.current.getBoundingClientRect(); | ||
| const x = (e.clientX - left - width / 2) / 25; | ||
| const y = (e.clientY - top - height / 2) / 25; | ||
| containerRef.current.style.transform = `rotateY(${x}deg) rotateX(${y}deg)`; | ||
| }; | ||
|
|
||
| const handleMouseEnter = (e: React.MouseEvent<HTMLDivElement>) => { | ||
| setIsMouseEntered(true); | ||
| if (!containerRef.current) return; | ||
| }; | ||
|
|
||
| const handleMouseLeave = (e: React.MouseEvent<HTMLDivElement>) => { | ||
| if (!containerRef.current) return; | ||
| setIsMouseEntered(false); | ||
| containerRef.current.style.transform = `rotateY(0deg) rotateX(0deg)`; | ||
| }; | ||
| return ( | ||
| <MouseEnterContext.Provider value={[isMouseEntered, setIsMouseEntered]}> | ||
| <div | ||
| className={cn('flex items-center justify-center py-20', containerClassName)} | ||
| style={{ | ||
| perspective: '1000px', | ||
| }} | ||
| > | ||
| <div | ||
| ref={containerRef} | ||
| onMouseEnter={handleMouseEnter} | ||
| onMouseMove={handleMouseMove} | ||
| onMouseLeave={handleMouseLeave} | ||
| className={cn( | ||
| 'relative flex items-center justify-center transition-all duration-200 ease-linear', | ||
| className, | ||
| )} | ||
| style={{ | ||
| transformStyle: 'preserve-3d', | ||
| }} | ||
| > | ||
| {children} | ||
| </div> | ||
| </div> | ||
| </MouseEnterContext.Provider> | ||
| ); | ||
| }; | ||
|
|
||
| export const CardBody = ({ | ||
| children, | ||
| className, | ||
| }: { | ||
| children: React.ReactNode; | ||
| className?: string; | ||
| }) => { | ||
| return ( | ||
| <div | ||
| className={cn( | ||
| 'h-96 w-96 [transform-style:preserve-3d] [&>*]:[transform-style:preserve-3d]', | ||
| className, | ||
| )} | ||
| > | ||
| {children} | ||
| </div> | ||
| ); | ||
| }; | ||
|
|
||
| export const CardItem = ({ | ||
| as: Tag = 'div', | ||
| children, | ||
| className, | ||
| translateX = 0, | ||
| translateY = 0, | ||
| translateZ = 0, | ||
| rotateX = 0, | ||
| rotateY = 0, | ||
| rotateZ = 0, | ||
| ...rest | ||
| }: { | ||
| as?: React.ElementType; | ||
| children: React.ReactNode; | ||
| className?: string; | ||
| translateX?: number | string; | ||
| translateY?: number | string; | ||
| translateZ?: number | string; | ||
| rotateX?: number | string; | ||
| rotateY?: number | string; | ||
| rotateZ?: number | string; | ||
| [key: string]: any; | ||
| }) => { | ||
| const ref = useRef<HTMLDivElement>(null); | ||
| const [isMouseEntered] = useMouseEnter(); | ||
|
|
||
| useEffect(() => { | ||
| handleAnimations(); | ||
| }, [isMouseEntered]); | ||
|
|
||
| const handleAnimations = () => { | ||
| if (!ref.current) return; | ||
| if (isMouseEntered) { | ||
| ref.current.style.transform = `translateX(${translateX}px) translateY(${translateY}px) translateZ(${translateZ}px) rotateX(${rotateX}deg) rotateY(${rotateY}deg) rotateZ(${rotateZ}deg)`; | ||
| } else { | ||
| ref.current.style.transform = `translateX(0px) translateY(0px) translateZ(0px) rotateX(0deg) rotateY(0deg) rotateZ(0deg)`; | ||
| } | ||
| }; | ||
|
|
||
| return ( | ||
| <Tag ref={ref} className={cn('w-fit transition duration-200 ease-linear', className)} {...rest}> | ||
| {children} | ||
| </Tag> | ||
| ); | ||
| }; | ||
|
|
||
| // Create a hook to use the context | ||
| export const useMouseEnter = () => { | ||
| const context = useContext(MouseEnterContext); | ||
| if (context === undefined) { | ||
| throw new Error('useMouseEnter must be used within a MouseEnterProvider'); | ||
| } | ||
| return context; | ||
| }; |
Oops, something went wrong.