Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fix flashing gradienr effect on firefox #32

Merged
merged 1 commit into from
Jan 10, 2025
Merged

Fix flashing gradienr effect on firefox #32

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
89 changes: 89 additions & 0 deletions src/components/Banner/Banner.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,89 @@
"use client";

import { useBanner } from "@/context/BannerContext";
import TertiaryButton from "@/macros/Buttons/TertiaryButton";
import { useScrollPosition } from "@/utils/scrollLock";

export default function Banner() {
const { isBannerVisible, setIsBannerVisible } = useBanner();
const { menuIsOpen } = useScrollPosition();

if (!isBannerVisible || menuIsOpen) return null;

return (
<div className='relative'>
{/* Background color */}
<div className='absolute inset-0 bg-[#1D013D]' />
{/* Content */}
<div className='relative px-3 py-3 sm:px-6 lg:px-8'>
<div className='flex flex-col justify-center gap-3 md:flex-row'>
<div className='flex justify-between md:items-center'>
<div className='flex items-center'>
<p className='font-medium text-white '>
<span className='sm:hidden'>
<span className='mr-4 text-white text-[15px]'>It&apos;s time to go bigger!</span>
<br />
<span className='text-[#D7B9FF] mr-2 text-[15px]'>Mammothon global hackathon begins</span>
<br />
<span className='mr-2 text-white text-[15px]'>Feb 1</span>
</span>
<span className='hidden sm:inline'>
<span className='text-white'>Time to go bigger!</span>{" "}
<span className='text-[#D7B9FF]'>Mammothon global hackathon begins</span>{" "}
<span className='text-white'>February 1</span>
</span>
</p>
</div>
<button
type='button'
className='flex p-2 -mt-1 -mr-1 transition-all duration-200 rounded-md h-fit md:hidden hover:bg-indigo-900 focus:outline-none focus:ring-2 focus:ring-white sm:-mr-2'
onClick={() => setIsBannerVisible(false)}
>
<span className='sr-only'>Dismiss</span>
<svg
className='w-6 h-6 text-white'
xmlns='http://www.w3.org/2000/svg'
fill='none'
viewBox='0 0 24 24'
stroke='currentColor'
>
<path strokeLinecap='round' strokeLinejoin='round' strokeWidth='2' d='M6 18L18 6M6 6l12 12' />
</svg>
</button>
</div>
<div className='flex order-3 w-auto gap-4 mt-2 sm:order-2 sm:mt-0 sm:w-auto'>
<TertiaryButton href='https://mammothon.celestia.org/' size='md'>
<div className='flex items-center justify-center w-full gap-2'>
<span className='flex-shrink-0'>Register Now</span>
<svg
className='flex-shrink-0 size-2.5 text-black transition-all duration-200 group-hover:text-[#00FFFF]'
viewBox='0 0 10 10'
fill='none'
xmlns='http://www.w3.org/2000/svg'
>
<path d='M1 1L9 1M9 1V9M9 1L1 9' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' />
</svg>
</div>
</TertiaryButton>
<button
type='button'
className='absolute flex p-2 -mr-1 transition-all duration-200 transform -translate-y-1/2 rounded-md right-6 top-1/2 h-fit max-md:hidden hover:bg-indigo-900 focus:outline-none focus:ring-2 focus:ring-white sm:-mr-2'
onClick={() => setIsBannerVisible(false)}
>
<span className='sr-only'>Dismiss</span>
<svg
className='w-6 h-6 text-white'
xmlns='http://www.w3.org/2000/svg'
fill='none'
viewBox='0 0 24 24'
stroke='currentColor'
>
<path strokeLinecap='round' strokeLinejoin='round' strokeWidth='2' d='M6 18L18 6M6 6l12 12' />
</svg>
</button>
</div>
</div>
</div>
</div>
);
}
208 changes: 88 additions & 120 deletions src/components/Cards/VerticalTitleCards/VerticalTitleCard.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,132 +7,100 @@ import { useEffect, useRef, useState } from "react";
import MovingGradients from "@/components/Animation/MovingGradient/MovingGradient";
import { motion, AnimatePresence } from "framer-motion";

const VerticalTitleCard = ({
title,
titleClamp = null,
description,
descriptionClamp = null,
url,
dark = false,
verticalTitle,
}) => {
const [minHeight, setMinHeight] = useState(0);
const verticalTitleRef = useRef(null);
const [isHovering, setIsHovering] = useState(false);
const VerticalTitleCard = ({ title, titleClamp = null, description, descriptionClamp = null, url, dark = false, verticalTitle }) => {
const [minHeight, setMinHeight] = useState(0);
const verticalTitleRef = useRef(null);
const [isHovering, setIsHovering] = useState(false);

const handleMouseEnter = () => {
if (url) {
setIsHovering(true);
}
};
const handleMouseLeave = () => {
if (url) {
setIsHovering(false);
}
};
const handleFocus = () => {
if (url) {
setIsHovering(true);
}
};
const handleBlur = () => {
if (url) {
setIsHovering(false);
}
};
const handleMouseEnter = () => {
if (url) {
setIsHovering(true);
}
};
const handleMouseLeave = () => {
if (url) {
setIsHovering(false);
}
};
const handleFocus = () => {
if (url) {
setIsHovering(true);
}
};
const handleBlur = () => {
if (url) {
setIsHovering(false);
}
};

useEffect(() => {
if (verticalTitleRef.current) {
setMinHeight(verticalTitleRef.current.clientWidth + 3 * 16); // 3rem vertical padding
}
}, [verticalTitleRef]);
useEffect(() => {
if (verticalTitleRef.current) {
setMinHeight(verticalTitleRef.current.clientWidth + 3 * 16); // 3rem vertical padding
}
}, [verticalTitleRef]);

const Tag = url ? Link : "div";
const Tag = url ? Link : "div";

return (
<Tag
href={url}
className={`flex min-w-[85%] md:min-w-0 md:w-full rounded-xl border transition-colors duration-300 delay-0 relative overflow-hidden ${
dark
? "bg-black text-white border-white"
: "bg-white text-black border-black"
}
return (
<Tag
href={url}
className={`flex min-w-[85%] md:min-w-0 md:w-full rounded-xl border transition-colors duration-300 delay-0 relative overflow-hidden ${
dark ? "bg-black text-white border-white" : "bg-white text-black border-black"
}
${url ? "group md:hover:border-black md:hover:text-black" : ""}
`}
style={{ minHeight: minHeight }}
onMouseEnter={handleMouseEnter}
onMouseLeave={handleMouseLeave}
onFocus={handleFocus}
onBlur={handleBlur}
>
<AnimatePresence>
{isHovering && (
<motion.div
initial={{ opacity: 0 }}
animate={{ opacity: 1 }}
exit={{ opacity: 0 }}
className="absolute top-0 left-0 w-full h-full bg-gradient-to-t from-transparent to-black opacity-0 md:group-hover:opacity-100 transition-opacity duration-500"
>
<MovingGradients />
</motion.div>
)}
</AnimatePresence>
<div
className={`w-[60px] relative border-r grow-0 shrink-0 flex items-end align-middle transition-all duration-300 md:group-hover:border-black z-10 ${
dark
? "border-white group-hover:border-black"
: "border-black group-hover:border-black"
}`}
>
<div ref={verticalTitleRef}>
<Heading
tag={"h3"}
size={"sm"}
className={`block whitespace-nowrap -rotate-90 origin-top-left ml-2.5 -mb-2.5 transition-none md:group-hover:text-black delay-0`}
>
{verticalTitle}
</Heading>
</div>
</div>
<div className={`py-6 px-10 flex flex-col w-full z-10`}>
{url && (
<Icon
Icon={<ArrowLongSVG dark={true} />}
hover
dark
HoverIcon={<ArrowLongSVG dark={false} />}
className={`flex-grow-0 self-end -mr-4 mb-28 md:group-hover:!bg-black`}
direction={`top-right`}
border
size={"lg"}
/>
)}
<div className={"mt-auto mb-0 self-end"}>
{title && (
<Heading
size={"sm"}
tag={"h4"}
className={`text-pretty mb-3 ${
titleClamp ? `line-clamp-${titleClamp}` : ""
}`}
>
{title}
</Heading>
)}
{description && (
<Body
size={"md"}
className={`text-pretty ${
descriptionClamp ? `line-clamp-${descriptionClamp}` : ""
}`}
>
{description}
</Body>
)}
</div>
</div>
</Tag>
);
style={{ minHeight: minHeight }}
onMouseEnter={handleMouseEnter}
onMouseLeave={handleMouseLeave}
onFocus={handleFocus}
onBlur={handleBlur}
>
<div className={`absolute top-0 left-0 w-full h-full transition-opacity duration-300 ${isHovering ? "opacity-100" : "opacity-0"}`}>
<MovingGradients />
</div>
<div
className={`w-[60px] relative border-r grow-0 shrink-0 flex items-end align-middle transition-all duration-300 md:group-hover:border-black z-10 ${
dark ? "border-white group-hover:border-black" : "border-black group-hover:border-black"
}`}
>
<div ref={verticalTitleRef}>
<Heading
tag={"h3"}
size={"sm"}
className={`block whitespace-nowrap -rotate-90 origin-top-left ml-2.5 -mb-2.5 transition-none md:group-hover:text-black delay-0`}
>
{verticalTitle}
</Heading>
</div>
</div>
<div className={`py-6 px-10 flex flex-col w-full z-10`}>
{url && (
<Icon
Icon={<ArrowLongSVG dark={true} />}
hover
dark
HoverIcon={<ArrowLongSVG dark={false} />}
className={`flex-grow-0 self-end -mr-4 mb-28 md:group-hover:!bg-black`}
direction={`top-right`}
border
size={"lg"}
/>
)}
<div className={"mt-auto mb-0 self-end"}>
{title && (
<Heading size={"sm"} tag={"h4"} className={`text-pretty mb-3 ${titleClamp ? `line-clamp-${titleClamp}` : ""}`}>
{title}
</Heading>
)}
{description && (
<Body size={"md"} className={`text-pretty ${descriptionClamp ? `line-clamp-${descriptionClamp}` : ""}`}>
{description}
</Body>
)}
</div>
</div>
</Tag>
);
};

export default VerticalTitleCard;
Loading