83 lines
4.1 KiB
TypeScript
83 lines
4.1 KiB
TypeScript
'use client'
|
|
import { FC } from "react";
|
|
import useColorShift, { UseColorShiftReturnType, type ColorListType } from "../../hooks/useColorShift";
|
|
import { useRouter } from "next/navigation";
|
|
export { default as useColorShift } from "../../hooks/useColorShift";
|
|
|
|
const DEFAULT_SHIFT_INTERVAL = 3000;
|
|
|
|
interface LogoProps {
|
|
shiftInterval?: number,
|
|
customColorList?: ColorListType[],
|
|
disableShift?: boolean,
|
|
customHookInstance?: UseColorShiftReturnType
|
|
}
|
|
|
|
export const StackedLogo: FC<LogoProps> = ({ shiftInterval, customColorList, customHookInstance, disableShift = false }) => {
|
|
const hookProps = [
|
|
shiftInterval ?? DEFAULT_SHIFT_INTERVAL,
|
|
disableShift,
|
|
customColorList,
|
|
] as const;
|
|
|
|
const { firstColor, secondColor, thirdColor, shift } = useColorShift(...hookProps);
|
|
|
|
return (
|
|
<div id="venn-diagram-logo-container" className="flex w-full h-auto justify-center">
|
|
<div onMouseEnter={shift} onMouseOut={shift} className={`absolute flex flex-col z-40 items-center justify-center animate-logo-throw-left h-16 w-16 bg-opacity-75 ${firstColor} transition-colors duration-[5000ms] ease rounded-full`}>
|
|
<p className="text-6xl font-bold opacity-100">M</p>
|
|
</div>
|
|
<div onMouseEnter={shift} onMouseOut={shift} className={`absolute flex flex-col items-center justify-center animate-logo-throw-down h-16 w-16 bg-opacity-75 ${secondColor} transition-colors duration-[5000ms] ease rounded-full`}>
|
|
<p className="text-6xl font-bold opacity-100 z-50">C</p>
|
|
</div>
|
|
<div onMouseEnter={shift} onMouseOut={shift} className={`absolute flex flex-col items-center justify-center animate-logo-throw-right h-16 w-16 bg-opacity-75 ${thirdColor} transition-colors duration-[5000ms] ease rounded-full`}>
|
|
<p className="text-6xl font-bold opacity-100">D</p>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export const InlineLogo: FC<LogoProps> = ({ shiftInterval, customColorList, customHookInstance, disableShift = false }) => {
|
|
const router = useRouter();
|
|
|
|
const hookProps = [
|
|
shiftInterval ?? DEFAULT_SHIFT_INTERVAL,
|
|
disableShift,
|
|
customColorList,
|
|
] as const;
|
|
|
|
const { firstColor, secondColor, thirdColor, shift } = useColorShift(...hookProps);
|
|
|
|
if (customHookInstance) return (
|
|
<button onClick={() => router.push('/')} id="inline-logo-container" className="flex w-auto h-auto justify-center">
|
|
<div className={`flex flex-col items-center justify-center h-16 w-16 bg-opacity-75 ${customHookInstance.firstColor} transition-colors duration-[5000ms] rounded-full`}>
|
|
<p className="text-2xl font-bold opacity-100">M</p>
|
|
</div>
|
|
|
|
<div className={`flex flex-col -ml-3 items-center justify-center h-16 w-16 bg-opacity-75 ${customHookInstance.secondColor} transition-colors duration-[5000ms] rounded-full`}>
|
|
<p className="text-2xl font-bold opacity-100">C</p>
|
|
</div>
|
|
|
|
<div className={`flex flex-col -ml-3 items-center justify-center h-16 w-16 bg-opacity-75 ${customHookInstance.thirdColor} transition-colors duration-[5000ms] rounded-full`}>
|
|
<p className="text-2xl font-bold opacity-100">D</p>
|
|
</div>
|
|
</button>
|
|
)
|
|
|
|
return (
|
|
<button onClick={() => router.push('/')} id="inline-logo-container" className="flex w-auto h-auto justify-center">
|
|
<div className={`flex flex-col items-center justify-center h-16 w-16 bg-opacity-75 ${firstColor} transition-colors duration-[5000ms] rounded-full`}>
|
|
<p className="text-2xl font-bold opacity-100">M</p>
|
|
</div>
|
|
|
|
<div className={`flex flex-col -ml-3 items-center justify-center h-16 w-16 bg-opacity-75 ${secondColor} transition-colors duration-[5000ms] rounded-full`}>
|
|
<p className="text-2xl font-bold opacity-100">C</p>
|
|
</div>
|
|
|
|
<div className={`flex flex-col -ml-3 items-center justify-center h-16 w-16 bg-opacity-75 ${thirdColor} transition-colors duration-[5000ms] rounded-full`}>
|
|
<p className="text-2xl font-bold opacity-100">D</p>
|
|
</div>
|
|
</button>
|
|
)
|
|
}
|