Skip to content

Commit

Permalink
Merge pull request #65 from drumst0ck/main
Browse files Browse the repository at this point in the history 
Troubleshoot warnings, deprecated code and Sponsors animation
  • Loading branch information
@afordigital
afordigital authored Aug 7, 2024
2 parents 7def471 + e231fdf commit d63721c
Show file tree
Hide file tree
Showing 5 changed files with 172 additions and 69 deletions.
97 changes: 70 additions & 27 deletions app/components/Nav.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@ import Image from "next/image";
import { useOnClickOutside } from "@/hooks/useOnClickOutside";
import { useEffect, useRef, useState } from "react";
import { useRouter } from "next/navigation";
import { Menu, X } from "lucide-react";

export const Nav = () => {
const router = useRouter();
Expand All @@ -20,6 +21,7 @@ export const Nav = () => {
const [isOpen, setIsOpen] = useState(false);
const [showNavbar, setShowNavbar] = useState(true);
const [lastScrollY, setLastScrollY] = useState(0);
const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
const modalRef = useRef<HTMLDivElement | null>(null);
const trigger = useOnClickOutside<HTMLDivElement>(
modalRef,
Expand All @@ -33,15 +35,14 @@ export const Nav = () => {
"relative rounded-full h-8 w-8 ring-2 ring-white overflow-hidden group-hover:ring-[3px]"
);

// Effect to handle scroll event
useEffect(() => {
const handleScroll = () => {
const currentScrollY = window.scrollY;

if (currentScrollY > lastScrollY) {
setShowNavbar(false); // Scrolling down
setShowNavbar(false);
} else {
setShowNavbar(true); // Scrolling up
setShowNavbar(true);
}

setLastScrollY(currentScrollY);
Expand All @@ -56,29 +57,31 @@ export const Nav = () => {

return (
<nav
className={`fixed w-full z-30 bg-slate-900/20 backdrop-blur-sm flex justify-center items-center h-16 transition-transform duration-300 ${
className={`fixed w-full z-30 bg-slate-900/20 backdrop-blur-sm flex justify-center items-center h-16 transition-all duration-300 ${
showNavbar ? "translate-y-0" : "-translate-y-full"
}`}
>
<div className="relative flex w-full max-w-6xl mx-auto justify-between">
<div className="relative flex w-full max-w-6xl mx-auto justify-between px-4 md:px-6">
<a href="/" className="flex items-center gap-1 cursor-pointer">
<Logo />
<h1 className="text-2xl text-white font-semibold">Aforshow</h1>
<h1 className="text-xl md:text-2xl text-white font-semibold transition-all duration-300">Aforshow</h1>
</a>
<div className="flex items-center gap-5 h-full">
<div className="hidden md:flex items-center gap-5 h-full">
<div
className={cn(
"group flex -space-x-3 hover:cursor-pointer overflow-hidden p-2",
"group flex -space-x-3 hover:cursor-pointer overflow-hidden p-2 transition-opacity duration-300",
{ "opacity-70": disabled }
)}
onClick={() => {
if (setDisabled) setDisabled((prev) => !prev);
}}
>
{cursorsSlice.map((cursor) => (
<div key={cursor.id} className={imgCircleClass}>
<img
className="scale-[1.7] absolute top-0 left-0"
{cursorsSlice.map((cursor, index) => (
<div key={cursor.id} className={`${imgCircleClass} transition-transform duration-300 hover:scale-110`} style={{transform: `translateX(${index * 5}px)`}}>
<Image
width={20}
height={20}
className="scale-[1.7] w-full h-full absolute top-0 left-0"
src={cursor.flagUrl}
alt="Flag cursor depending on user country"
/>
Expand All @@ -88,16 +91,17 @@ export const Nav = () => {
<div
className={cn(
imgCircleClass,
"flex items-center justify-center bg-[#121112]"
"flex items-center justify-center bg-[#121112] transition-transform duration-300 hover:scale-110"
)}
style={{transform: `translateX(${slice * 5}px)`}}
>
<span className="text-white font-semibold">
+{cursors.length - slice}
</span>
</div>
)}
</div>
<Button>Inscribirse</Button>
<Button className="transition-all duration-300 hover:scale-105">Inscribirse</Button>
{user ? (
<div ref={trigger}>
<button
Expand All @@ -110,21 +114,19 @@ export const Nav = () => {
alt="user avatar image"
width={40}
height={40}
className="relative rounded-full border-2 border-caSecondary-500 hover:scale-105 cursor-pointer"
className="relative rounded-full border-2 border-caSecondary-500 hover:scale-105 cursor-pointer transition-all duration-300"
/>
</button>
{isOpen && (
<div ref={modalRef}>
<div className="bg-slate-900 absolute border-1 border-slate-700 -z-1 px-8 py-3 rounded-md">
<button
onClick={() => {
signOut();
}}
className="w-full text-slate-300 font-semibold hover:text-white whitespace-nowrap rounded-sm"
>
Sign Out
</button>
</div>
<div ref={modalRef} className="absolute right-0 mt-2 w-48 rounded-md shadow-lg py-1 bg-slate-900 ring-1 ring-black ring-opacity-5 transition-all duration-300">
<button
onClick={() => {
signOut();
}}
className="block px-4 py-2 text-sm text-slate-300 hover:bg-slate-800 w-full text-left transition-colors duration-200"
>
Sign Out
</button>
</div>
)}
</div>
Expand All @@ -135,12 +137,53 @@ export const Nav = () => {
router.push("/");
signInWithDiscord();
}}
className="transition-all duration-300 hover:scale-105"
>
Log In con Discord
</Button>
)}
</div>
<div className="md:hidden flex items-center">
<Button

onClick={() => setMobileMenuOpen(!mobileMenuOpen)}
className="transition-all duration-300 hover:bg-slate-800"
>
{mobileMenuOpen ? <X className="h-6 w-6" /> : <Menu className="h-6 w-6" />}
</Button>
</div>
</div>
<div
className={`absolute top-16 left-0 w-full bg-slate-900 p-4 md:hidden transition-all duration-300 ease-in-out ${
mobileMenuOpen ? 'max-h-64 opacity-100' : 'max-h-0 opacity-0 overflow-hidden'
}`}
>
<Button className="w-full mb-2 transition-all duration-300 hover:scale-105">Inscribirse</Button>
{user ? (
<Button
variant="secondary"
className="w-full transition-all duration-300 hover:scale-105"
onClick={() => {
signOut();
setMobileMenuOpen(false);
}}
>
Sign Out
</Button>
) : (
<Button
variant="secondary"
className="w-full transition-all duration-300 hover:scale-105"
onClick={() => {
router.push("/");
signInWithDiscord();
setMobileMenuOpen(false);
}}
>
Log In con Discord
</Button>
)}
</div>
</nav>
);
};
};
88 changes: 51 additions & 37 deletions app/components/Sponsors.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,44 +1,58 @@
import Image from "next/image";
import React from 'react';
import Image from 'next/image';

interface SponsorImage {
src: string;
alt: string;
}

interface MarqueeProps {
sponsors: SponsorImage[];
speed?: number;
direction?: 'left' | 'right';
}

const Marquee: React.FC<MarqueeProps> = ({
sponsors,
speed = 50,
direction = 'left'
}) => {
return (
<div className="marquee-container">
<div
className={`marquee ${direction}`}
style={{ '--speed': `${speed}s` } as React.CSSProperties}
>
{[...sponsors, ...sponsors].map((sponsor, index) => (
<div key={index} className="marquee-item">
<Image
src={sponsor.src}
alt={sponsor.alt}
width={200}
height={200}
/>
</div>
))}
</div>
</div>
);
};

export const Sponsors: React.FC = () => {
const sponsors: SponsorImage[] = [
{ src: "/imgs/afordin-sponsor.png", alt: "afordin-logo-sponsor" },
{ src: "/imgs/afordin-sponsor.png", alt: "afordin-logo-sponsor" },
{ src: "/imgs/afordin-sponsor.png", alt: "afordin-logo-sponsor" },
{ src: "/imgs/afordin-sponsor.png", alt: "afordin-logo-sponsor" },
{ src: "/imgs/afordin-sponsor.png", alt: "afordin-logo-sponsor" },
];

export const Sponsors = () => {
return (
<section className="w-full justify-center pb-[72px] mx-auto max-w-6xl flex flex-col gap-6">
<section className="w-full pb-[72px] mx-auto max-w-6xl flex flex-col gap-6 overflow-hidden">
<p className="text-2xl text-center font-bold bg-clip-text text-transparent bg-gradient-to-br from-caPrimary-500 to-caSecondary-500">
Evento sponsorizado gracias a
</p>
<div
className="flex flex-col sm:flex-row justify-around items-center gap-12 [mask-image:linear-gradient(to_left,_transparent_0%,_black_20%,_black_80%,_transparent_95%)] [&>*]:animate-logo-cloud">
<Image
src="/imgs/afordin-sponsor.png"
alt="afordin-logo-sponsor"
width="200"
height="200"
/>
<Image
src="/imgs/afordin-sponsor.png"
alt="afordin-logo-sponsor"
width="200"
height="200"
/>
<Image
src="/imgs/afordin-sponsor.png"
alt="afordin-logo-sponsor"
width="200"
height="200"
/>
<Image
src="/imgs/afordin-sponsor.png"
alt="afordin-logo-sponsor"
width="200"
height="200"
/>
<Image
src="/imgs/afordin-sponsor.png"
alt="afordin-logo-sponsor"
width="200"
height="200"
/>
</div>
<Marquee sponsors={sponsors} speed={30} direction="left" />
</section>
);
};
};
4 changes: 2 additions & 2 deletions app/components/icons/Logo.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,8 +23,8 @@ const Logo = (props: SVGProps<SVGSVGElement>) => (
y2="28.5"
gradientUnits="userSpaceOnUse"
>
<stop stop-color="#FC1C37" />
<stop offset="1" stop-color="#AD40E1" />
<stop stopColor="#FC1C37" />
<stop offset="1" stopColor="#AD40E1" />
</linearGradient>
</defs>
</svg>
Expand Down
37 changes: 37 additions & 0 deletions app/globals.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -157,3 +157,40 @@ html {
--ease-in-out-expo: cubic-bezier(1, 0, 0, 1);
--ease-in-out-circ: cubic-bezier(0.785, 0.135, 0.15, 0.86);
}

/************************************************/
/* Sponsors Marquee ANIMATION */
/************************************************/

.marquee-container {
overflow: hidden;
width: 100%;
}

.marquee {
display: flex;
width: max-content;
animation: scroll var(--speed) linear infinite;
}

.marquee.left {
animation-direction: normal;
}

.marquee.right {
animation-direction: reverse;
}

.marquee-item {
flex-shrink: 0;
margin: 0 1rem;
}

@keyframes scroll {
from {
transform: translateX(0);
}
to {
transform: translateX(-50%);
}
}
15 changes: 12 additions & 3 deletions next.config.mjs
View file
Original file line number Diff line number Diff line change
@@ -1,8 +1,17 @@
/** @type {import('next').NextConfig} */
const nextConfig = {
images: {
domains: ['cdn.discordapp.com'],
},
images: {
remotePatterns: [
{
protocol: "https",
hostname: "cdn.discordapp.com",
},
{
protocol: "https",
hostname: "cdn.jsdelivr.net",
},
],
},
};

export default nextConfig;

0 comments on commit d63721c

Please sign in to comment.