Skip to content

Commit

Permalink
Merge pull request #14 from celestiaorg/hotfix/button-hover-effect-ov…
Browse files Browse the repository at this point in the history 
…erflow

Fix button hover effect overflow issue
  • Loading branch information
@gabros20
gabros20 authored Jan 7, 2025
2 parents fb0d829 + 750f75f commit 39c1e7b
Show file tree
Hide file tree
Showing 3 changed files with 126 additions and 162 deletions.
138 changes: 53 additions & 85 deletions src/components/AlternatingMediaRows/MediaRow.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,91 +3,59 @@ import PrimaryButton from "@/macros/Buttons/PrimaryButton";
import SecondaryButton from "@/macros/Buttons/SecondaryButton";
import VideoPlayer from "@/components/VideoPlayer/VideoPlayer";

const MediaRow = ({
title,
body,
buttons,
videoSrc,
className,
index,
totalRows,
}) => {
const videoRight = index % 2 === 0 ? true : false;
return (
<div className={`${className}`}>
<div
className={
"block relative w-full h-[100vw] overflow-hidden lg:w-1/2 lg:h-auto lg:overflow-visible"
}
>
<div
className={`lg:absolute lg:top-0 ${
videoRight ? "lg:left-0" : "lg:right-0"
} lg:h-full lg:w-[50vw]`}
>
<VideoPlayer src={videoSrc} />
</div>
</div>
<div
className={
"w-full lg:w-1/2 px-4 py-10 lg:py-24 xl:py-44 lg:px-20 xl:px-32"
}
>
<div className={`w-full flex`}>
<div className={"w-3/4 mb-8"}>
<Heading size={"lg"} tag={"h2"}>
{title}
</Heading>
</div>
<div className={"w-1/4"}>
<Body size="sm" className={"text-right"}>

</Body>
</div>
</div>
<div className={"mb-8"}>
{body.map((text, index) => {
return (
<Body
size={"md"}
key={index}
className={"mb-3 text-black-subtle"}
>
{text}
</Body>
);
})}
</div>
{buttons.map((button, index) => {
return (
<>
{button.type === "primary" ? (
<PrimaryButton
key={index}
href={button.url}
className={"inline-block mr-3 mb-3 group"}
lightMode
noBorder={false}
>
{button.text}
</PrimaryButton>
) : (
<SecondaryButton
key={index}
href={button.url}
className={"inline-block mr-3 mb-3 group"}
lightMode={false}
noBorder={false}
>
{button.text}
</SecondaryButton>
)}
</>
);
})}
</div>
</div>
);
const MediaRow = ({ title, body, buttons, videoSrc, className, index, totalRows }) => {
const videoRight = index % 2 === 0 ? true : false;
return (
<div className={`${className}`}>
<div className={"block relative w-full h-[100vw] overflow-hidden lg:w-1/2 lg:h-auto lg:overflow-visible"}>
<div className={`lg:absolute lg:top-0 ${videoRight ? "lg:left-0" : "lg:right-0"} lg:h-full lg:w-[50vw]`}>
<VideoPlayer src={videoSrc} />
</div>
</div>
<div className={"w-full lg:w-1/2 px-4 py-10 lg:py-24 xl:py-44 lg:px-20 xl:px-32"}>
<div className={`w-full flex`}>
<div className={"w-3/4 mb-8"}>
<Heading size={"lg"} tag={"h2"}>
{title}
</Heading>
</div>
<div className={"w-1/4"}>
<Body size='sm' className={"text-right"}></Body>
</div>
</div>
<div className={"mb-8"}>
{body.map((text, index) => {
return (
<Body size={"md"} key={index} className={"mb-3 text-black-subtle"}>
{text}
</Body>
);
})}
</div>
{buttons.map((button, index) => {
return (
<>
{button.type === "primary" ? (
<PrimaryButton key={index} href={button.url} className={"inline-block mr-3 mb-3 group"} lightMode noBorder={false}>
{button.text}
</PrimaryButton>
) : (
<SecondaryButton
key={index}
href={button.url}
className={"inline-block mr-3 mb-3 group"}
lightMode={false}
noBorder={false}
>
{button.text}
</SecondaryButton>
)}
</>
);
})}
</div>
</div>
);
};

export default MediaRow;
42 changes: 21 additions & 21 deletions src/components/VideoPlayer/VideoPlayer.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,29 +4,29 @@ import { useEffect, useState } from "react";
import "./VideoPlayer.scss";

const VideoPlayer = ({ src = "", autoPlay = true }) => {
const [isClient, setIsClient] = useState(false);
const [isClient, setIsClient] = useState(false);

useEffect(() => {
setIsClient(true);
}, []);
useEffect(() => {
setIsClient(true);
}, []);

return (
<div className={`h-full w-full absolute block top-0 left-0`}>
{isClient && (
<ReactPlayer
playsinline
muted
controls={false}
loop
playing={autoPlay}
url={src}
width={"100%"}
height={"100%"}
className={"video-player"}
/>
)}
</div>
);
return (
<div className={`h-full w-full absolute block top-0 left-0`}>
{isClient && (
<ReactPlayer
playsinline
muted
controls={false}
loop
playing={autoPlay}
url={src}
width={"100%"}
height={"100%"}
className={"video-player"}
/>
)}
</div>
);
};

export default VideoPlayer;
108 changes: 52 additions & 56 deletions src/macros/Buttons/PrimaryButton.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,65 +2,61 @@ import Link from "@/macros/Link/Link";
import { getButtonType } from "@/utils/getButtonType";

const PrimaryButton = ({
children,
className,
onClick = null,
href = null,
self = null,
lightMode = false,
noBorder = false,
hover = true,
size = "md",
isActive = false,
children,
className,
onClick = null,
href = null,
self = null,
lightMode = false,
noBorder = false,
hover = true,
size = "md",
isActive = false,
}) => {
const baseClasses = `leading-none text-center uppercase rounded-full block no-underline transform transition-all duration-150`;
const lightModeClasses = `text-black border-black ${
hover ? "hover:text-white transition-all duration-300" : null
}`;
const darkModeClasses = `bg-black text-white border-white ${
hover
? "hover:text-black hover:border-black transition-all duration-300"
: null
}`;
const borderClasses = noBorder ? `border-0` : `border`;
const sizeClasses = {
sm: `text-xs px-3 py-2`,
md: `text-xs px-5 py-3`,
lg: `text-base px-10 py-5`,
};
const baseClasses = `leading-none text-center uppercase rounded-full block no-underline transform transition-all duration-150`;
const lightModeClasses = `text-black border-black ${hover ? "hover:text-white transition-all duration-300" : null}`;
const darkModeClasses = `bg-black text-white border-white ${hover ? "hover:text-black hover:border-black transition-all duration-300" : null}`;
const borderClasses = noBorder ? `border-0` : `border`;
const sizeClasses = {
sm: `text-xs px-3 py-2`,
md: `text-xs px-5 py-3`,
lg: `text-base px-10 py-5`,
};

// define what element the button should render as
const buttonType = getButtonType(href, onClick);
const ButtonTypes = {
anchor: Link,
button: "button",
div: "div",
};
const Button = ButtonTypes[buttonType];
// define what element the button should render as
const buttonType = getButtonType(href, onClick);
const ButtonTypes = {
anchor: Link,
button: "button",
div: "div",
};
const Button = ButtonTypes[buttonType];

return (
<Button
className={`group relative block overflow-hidden
${baseClasses}
${sizeClasses[size]}
${lightMode ? lightModeClasses : darkModeClasses}
${borderClasses}
${className}
`}
onClick={onClick}
href={href}
self={self}
>
{hover && (
<div
className={`z-0 absolute w-1/2 h-full top-full left-1/2 -translate-x-1/2 block rounded-full transition-all duration-200 group-hover:top-0 group-hover:w-full group-hover:scale-125 ${
lightMode ? "bg-black" : "bg-white"
}`}
></div>
)}
<div className={`relative z-10`}>{children}</div>
</Button>
);
return (
<Button
className={`group relative
${baseClasses}
${sizeClasses[size]}
${lightMode ? lightModeClasses : darkModeClasses}
${borderClasses}
${className}
`}
onClick={onClick}
href={href}
self={self}
>
<div className='absolute inset-0 overflow-hidden rounded-full'>
{hover && (
<div
className={`absolute w-1/2 h-full top-full left-1/2 -translate-x-1/2 block rounded-full transition-all duration-200 group-hover:top-0 group-hover:w-full group-hover:scale-125 ${
lightMode ? "bg-black" : "bg-white"
}`}
></div>
)}
</div>
<div className={`relative z-10`}>{children}</div>
</Button>
);
};

export default PrimaryButton;

0 comments on commit 39c1e7b

Please sign in to comment.