feat: arrows for scroll + small fixes

yearn · Aug 6, 2024 · f70a5bd · f70a5bd
1 parent 2976e61
commit f70a5bd
Show file tree

Hide file tree

Showing 4 changed files with 60 additions and 37 deletions.
diff --git a/apps/common/components/AppsCarousel.tsx b/apps/common/components/AppsCarousel.tsx
@@ -1,47 +1,32 @@
-import {useEffect, useRef, useState} from 'react';
-import {motion} from 'framer-motion';
+import {type ForwardedRef, forwardRef, type ReactElement} from 'react';
 
 import {FeaturedApp} from './FeaturedApp';
 
 import type {TApp} from 'pages/home/[category]';
-import type {ReactElement} from 'react';
-
-export function AppsCarousel(props: {apps: TApp[]}): ReactElement {
-	const targetRef = useRef<HTMLDivElement | null>(null);
-	const [width, set_width] = useState(0);
-
-	useEffect(() => {
-		set_width(Number(targetRef.current?.scrollWidth) - Number(targetRef.current?.offsetWidth));
-	}, []);
 
+export const AppsCarousel = forwardRef((props: {apps: TApp[]}, ref: ForwardedRef<HTMLDivElement>): ReactElement => {
 	return (
-		<section
-			ref={targetRef}
-			className={'relative'}>
+		<section className={'left-0 -mx-1 w-full md:absolute'}>
 			<div
 				className={
-					'pointer-events-none absolute -left-36 top-0 z-10 h-full w-1/6 bg-gradient-to-r from-gray-900 to-transparent'
+					'pointer-events-none absolute left-0 top-0 z-10 h-full w-1/6 bg-gradient-to-r from-gray-900 to-transparent'
 				}
 			/>
 			<div
 				className={
 					'pointer-events-none absolute right-0 top-0 z-10 h-full w-1/5 bg-gradient-to-l from-gray-900 to-transparent'
 				}
 			/>
-			<motion.div
-				drag={'x'}
-				dragConstraints={{
-					right: 0,
-					left: -width
-				}}
-				className={'flex gap-x-6'}>
+			<div
+				ref={ref}
+				className={'flex  gap-x-6 overflow-x-auto pb-1 pr-1 scrollbar-none md:pl-28 lg:pl-36'}>
 				{props.apps.map((app, i) => (
 					<FeaturedApp
 						key={app.name + i}
 						app={app}
 					/>
 				))}
-			</motion.div>
+			</div>
 		</section>
 	);
-}
+});
diff --git a/apps/common/components/FeaturedApp.tsx b/apps/common/components/FeaturedApp.tsx
@@ -1,4 +1,5 @@
 import Image from 'next/image';
+import Link from 'next/link';
 import {cl} from '@builtbymom/web3/utils';
 import {IconShare} from '@common/icons/IconShare';
 
@@ -7,17 +8,19 @@ import type {ReactElement} from 'react';
 
 export function FeaturedApp(props: {app: TApp}): ReactElement {
 	return (
-		<div
+		<Link
+			href={props.app.appURI}
+			target={'_blank'}
 			className={cl(
-				'group relative flex h-[376px] w-full min-w-[280px] cursor-pointer flex-col justify-end overflow-hidden px-6 py-10 outline outline-1 outline-gray-500/50  md:h-[520px] md:min-w-[384px]'
+				'group relative flex h-[376px] w-full min-w-[280px] cursor-pointer flex-col justify-end px-6 py-10 z-20 overflow-hidden outline outline-1 outline-gray-500/50  md:h-[520px] md:min-w-[384px]'
 			)}>
 			<Image
 				src={props.app.logoURI}
 				alt={props.app.name}
 				width={1400}
 				height={2000}
 				className={
-					'absolute right-0 top-0 size-full bg-center object-cover transition-all group-hover:scale-105'
+					'absolute right-0 top-0 size-full bg-center object-cover transition-shadow duration-200 group-hover:scale-105'
 				}
 			/>
 			<div
@@ -28,7 +31,7 @@ export function FeaturedApp(props: {app: TApp}): ReactElement {
 			</div>
 			<div className={'absolute left-0 top-0 size-full bg-gradient-to-b from-transparent to-gray-900'} />
 			<p className={'z-20 text-xl font-bold text-white'}>{props.app.name}</p>
-			<p className={'z-20 hidden text-gray-400 group-hover:block'}>{props.app.description}</p>
-		</div>
+			<p className={'z-20 text-gray-400 group-hover:block md:hidden'}>{props.app.description}</p>
+		</Link>
 	);
 }
diff --git a/pages/_app.tsx b/pages/_app.tsx
@@ -57,7 +57,7 @@ const WithLayout = memo(function WithLayout(props: {supportedNetworks: Chain[]}
 			<SearchContextApp>
 				<div
 					id={'app'}
-					className={cl('mb-0 scrollbar-none bg-gray-900 justify-center min-h-screen flex font-aeonik')}>
+					className={'mb-0 flex min-h-screen justify-center bg-gray-900 font-aeonik'}>
 					<div className={'flex w-full max-w-[1480px] justify-start'}>
 						<motion.nav className={'fixed z-50 w-full md:hidden'}>
 							<MobileTopNav
@@ -92,7 +92,7 @@ const WithLayout = memo(function WithLayout(props: {supportedNetworks: Chain[]}
 									transition={{duration: 1.2}} // Adjust duration as needed
 									variants={variants}
 									className={cl(
-										'w-full overflow-x-hidden md:ml-[305px] scrollbar-none',
+										'w-full overflow-x-hidden md:ml-[305px]',
 										isSearchOpen ? 'mt-16' : ''
 									)}>
 									<Component

diff --git a/pages/home/index.tsx b/pages/home/index.tsx
@@ -5,6 +5,7 @@ import {AppsCarousel} from '@common/components/AppsCarousel';
 import {CategorySection} from '@common/components/CategorySection';
 import {Cutaway} from '@common/components/Cutaway';
 import {useSearch} from '@common/contexts/useSearch';
+import {IconChevron} from '@common/icons/IconChevron';
 import {LogoDiscord} from '@common/icons/LogoDiscord';
 import {LogoTwitter} from '@common/icons/LogoTwitter';
 import {COMMUNITY_APPS, FEATURED_APPS, YEARN_X_APPS} from '@common/utils/constants';
@@ -106,13 +107,25 @@ export default function Home(): ReactElement {
 	const router = useRouter();
 	const {dispatch} = useSearch();
 
+	const carouselRef = useRef<HTMLDivElement | null>(null);
+
+	const scrollBack = (): void => {
+		if (!carouselRef.current) return;
+		carouselRef.current.scrollLeft -= 400;
+	};
+
+	const scrollForward = (): void => {
+		if (!carouselRef.current) return;
+		carouselRef.current.scrollLeft += 400;
+	};
+
 	useMountEffect(() => {
 		dispatch({type: 'SET_SEARCH', payload: ''});
 	});
 
 	return (
-		<div className={'mb-4 mt-20 flex w-full justify-center'}>
-			<div className={'w-full p-6 md:max-w-6xl md:p-0 md:pl-28 lg:pl-36'}>
+		<div className={'relative mb-4 mt-20 flex w-full justify-center'}>
+			<div className={'w-full p-6 pb-24 pt-0 md:max-w-6xl md:px-2 md:pl-28 lg:pl-36'}>
 				<div className={'flex flex-col gap-y-6'}>
 					<div
 						className={
@@ -130,12 +143,34 @@ export default function Home(): ReactElement {
 						</p>
 					</div>
 
-					<div>
-						<h1 className={'mb-6 text-lg text-white'}>{'Featured Apps'}</h1>
-						<AppsCarousel apps={FEATURED_APPS} />
+					<div className={''}>
+						<div className={'flex w-full justify-between'}>
+							<h1 className={'mb-6 text-lg text-white'}>{'Featured Apps'}</h1>
+							<div className={'hidden gap-3 md:flex'}>
+								<button
+									onClick={scrollBack}
+									className={
+										'flex !h-8 items-center px-4 text-white outline !outline-1 outline-white hover:!outline-[3px]'
+									}>
+									<IconChevron className={'rotate-90'} />
+								</button>
+								<button
+									onClick={scrollForward}
+									className={
+										'flex !h-8 items-center px-4 text-white outline !outline-1 outline-white hover:!outline-[3px]'
+									}>
+									<IconChevron className={' -rotate-90'} />
+								</button>
+							</div>
+						</div>
+
+						<AppsCarousel
+							ref={carouselRef}
+							apps={FEATURED_APPS}
+						/>
 					</div>
 
-					<div className={'flex flex-col gap-[64px]'}>
+					<div className={'flex flex-col  gap-[64px] md:mt-[520px]'}>
 						<CategorySection
 							title={'Community Apps'}
 							onExpandClick={() => router.push('/home/community')}