Unverified Commit f57a14bc authored by Michal Čaniga's avatar Michal Čaniga
Browse files

Finish layout of home carousel

parent bd4bafd2
import { Typography } from 'antd';
import usePageTitle from '../../hooks/usePageTitle'; import usePageTitle from '../../hooks/usePageTitle';
import { HomeCarousel } from './HomeCarousel'; import { HomeCarousel } from './HomeCarousel';
...@@ -7,13 +5,7 @@ import { HomeCarousel } from './HomeCarousel'; ...@@ -7,13 +5,7 @@ import { HomeCarousel } from './HomeCarousel';
const Home = () => { const Home = () => {
usePageTitle('Home'); usePageTitle('Home');
return ( return <HomeCarousel />;
<>
<Typography>Add text</Typography>
<HomeCarousel />
<Typography>Add text</Typography>
</>
);
}; };
export default Home; export default Home;
import { Carousel } from 'antd'; import { Carousel, Typography } from 'antd';
import { useMemo, useState } from 'react'; import { useMemo, useState } from 'react';
import { useLoggedInUser } from '../../hooks/useLoggedInUser'; import { useLoggedInUser } from '../../hooks/useLoggedInUser';
...@@ -15,6 +15,7 @@ type SlideProps = { ...@@ -15,6 +15,7 @@ type SlideProps = {
isLoggedIn: boolean; isLoggedIn: boolean;
setAuthModalType: SetAuthModalType; setAuthModalType: SetAuthModalType;
setIsAuthModalVisible: SetIsAuthModalVisible; setIsAuthModalVisible: SetIsAuthModalVisible;
text: string;
imagePath: string; imagePath: string;
}; };
...@@ -22,10 +23,11 @@ const Slide = ({ ...@@ -22,10 +23,11 @@ const Slide = ({
isLoggedIn, isLoggedIn,
setAuthModalType, setAuthModalType,
setIsAuthModalVisible, setIsAuthModalVisible,
text,
imagePath imagePath
}: SlideProps) => { }: SlideProps) => {
const containerStyle = { const containerStyle = {
height: '800px', height: '95vh',
backgroundImage: `url("${imagePath}")`, backgroundImage: `url("${imagePath}")`,
backgroundSize: 'cover', backgroundSize: 'cover',
backgroundPosition: 'center', backgroundPosition: 'center',
...@@ -37,27 +39,47 @@ const Slide = ({ ...@@ -37,27 +39,47 @@ const Slide = ({
return ( return (
<div style={containerStyle}> <div style={containerStyle}>
{!isLoggedIn ? ( {!isLoggedIn ? (
<> <div
<SignInButton style={{
setAuthModalType={setAuthModalType} background: '#eeeeee',
setIsAuthModalVisible={setIsAuthModalVisible} padding: 50,
/> display: 'flex',
<SignUpButton flexDirection: 'column',
setAuthModalType={setAuthModalType} justifyContent: 'center',
setIsAuthModalVisible={setIsAuthModalVisible} alignItems: 'center'
/> }}
</> >
<Typography
style={{ fontSize: 65, fontWeight: 'bold', textAlign: 'center' }}
>
{text}
</Typography>
<div
style={{
display: 'flex'
}}
>
<SignInButton
setAuthModalType={setAuthModalType}
setIsAuthModalVisible={setIsAuthModalVisible}
/>
<SignUpButton
setAuthModalType={setAuthModalType}
setIsAuthModalVisible={setIsAuthModalVisible}
/>
</div>
</div>
) : null} ) : null}
</div> </div>
); );
}; };
// replace placeholders with website screenshots // TODO: replace placeholders with website screenshots
const imagePaths = [ const slideData = [
'/placeholder.png', { imagePath: '/placeholder.png', text: 'Fight pokemons' }, // TODO: place image from game
'/placeholder.png', { imagePath: '/placeholder.png', text: 'Buy items' }, // TODO: place image from store
'/placeholder.png', { imagePath: '/placeholder.png', text: 'Reach the top' }, // TODO: place image from leaderboard
'/placeholder.png' { imagePath: '/placeholder.png', text: 'Know your enemies' } // TODO: place image from encyclopedia
]; ];
export const HomeCarousel = () => { export const HomeCarousel = () => {
...@@ -70,13 +92,14 @@ export const HomeCarousel = () => { ...@@ -70,13 +92,14 @@ export const HomeCarousel = () => {
return ( return (
<> <>
<Carousel autoplay> <Carousel autoplay>
{imagePaths.map((path, idx) => ( {slideData.map(({ imagePath, text }, idx) => (
<Slide <Slide
key={idx} key={idx}
text={text}
setIsAuthModalVisible={setIsAuthModalVisible} setIsAuthModalVisible={setIsAuthModalVisible}
setAuthModalType={setAuthModalType} setAuthModalType={setAuthModalType}
isLoggedIn={isLoggedIn} isLoggedIn={isLoggedIn}
imagePath={path} imagePath={imagePath}
/> />
))} ))}
</Carousel> </Carousel>
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment