Challenge Submission - Yuri Bruno Montez

.gitignore

@@ -0,0 +1,34 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# local env files
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+# vercel
+.vercel

README.md

@@ -1,5 +1,9 @@
 # Frontend Challenge
 
+Checkout the live version of the challenge [here](https://foton-frontend-challenge-yuribmontez.vercel.app)
+
+<hr>
+
 Clone this repository and start our challenge **right now**
 
 Use React or React Native depending on the rule you are running for.

next.config.js

@@ -0,0 +1,6 @@
+module.exports = {
+  reactStrictMode: true,
+  images: {
+    domains: ["books.google.com"]
+  }
+}

package.json

@@ -0,0 +1,26 @@
+{
+  "name": "foton",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start",
+    "lint": "next lint"
+  },
+  "dependencies": {
+    "@chakra-ui/react": "^1.6.8",
+    "@emotion/react": "^11",
+    "@emotion/styled": "^11",
+    "axios": "^0.21.4",
+    "framer-motion": "^4",
+    "next": "11.1.2",
+    "react": "17.0.2",
+    "react-dom": "17.0.2",
+    "swiper": "^7.0.6"
+  },
+  "devDependencies": {
+    "eslint": "7.32.0",
+    "eslint-config-next": "11.1.2"
+  }
+}

public/fonts/styles.css

@@ -0,0 +1,17 @@
+@import url("https://fonts.googleapis.com/css2?family=Playfair+Display&family=Roboto&display=swap");
+
+@font-face {
+  font-family: "SFProDisplay";
+  src: url("/fonts/SF-Pro-Display-Regular.otf") format("opentype");
+}
+
+@font-face {
+  font-family: "SFProDisplay";
+  src: url("/fonts/SF-Pro-Display-Bold.otf") format("opentype");
+  font-weight: bold;
+}
+
+@font-face {
+  font-family: "SFProText";
+  src: url("/fonts/SF-Pro-Text-Regular.otf") format("opentype");
+}

src/components/CardSwiper/index.jsx

@@ -0,0 +1,145 @@
+import { useState } from 'react'
+import Link from 'next/link'
+import Image from 'next/image'
+import { Swiper, SwiperSlide } from 'swiper/react'
+import SwiperCore, { Navigation, Pagination } from "swiper/core";
+import "swiper/css";
+import { motion } from "framer-motion"
+import { Box, Text, Heading, Flex } from '@chakra-ui/react'
+import { CardStatisticsIcon } from '../Icons'
+
+SwiperCore.use([Pagination, Navigation]);
+const MotionBox = motion(Box)
+const MotionFlex = motion(Flex)
+
+export const CardSwiper = ({ books }) => {
+  const [swiper, setSwiper] = useState(0)
+
+  if (!books) {
+    return null
+  }
+
+  return (
+    <Flex minHeight='140px' sx={{ ".swiper-wrapper": { alignItems: "center" } }}>
+      <Swiper
+        breakpoints={{
+          base: {
+            slidesPerView: 1.25
+          },
+          800: {
+            slidesPerView: 3
+          }
+        }}
+        onTransitionEnd={(data) => setSwiper(data.realIndex)}
+      >
+        {books.map((book, i) => {
+          const { id, volumeInfo: { authors, title, imageLinks: { thumbnail } } } = book
+          const isActive = i === swiper
+
+          return (
+            <SwiperSlide key={id}>
+              <Link href={`/book/${id}`} passHref>
+                <MotionBox
+                  as='a'
+                  title={title}
+                  display='flex'
+                  mr='10px'
+                  index={i}
+                  swiper={swiper}
+                  whileTap={{scale: .95}}
+                >
+                  <MotionFlex
+                    height='128px'
+                    width='250px'
+                    bgColor={isActive ? '#00173d' : '#451475'}
+                    p='16px 20px 20px'
+                    borderRadius='8px'
+                    cursor='pointer'
+                    sx={{
+                      backgroundImage: 'url("/images/discover-background.png")',
+                      backgroundPosition: '0 100%',
+                      backgroundRepeat: 'no-repeat',
+                      img: { borderRadius: '8px' }
+                    }}
+                    animate={{
+                      width: isActive ? '272px' : '250px',
+                      height: isActive ? '140px' : '128px',
+                      img: {
+                        height: isActive ? '112px' : '110px'
+                      },
+                    }}
+                    transition={{ ease: 'linear', duration: .1 }}
+                  >
+
+                      <Flex
+                        flexDir='column'
+                        display='inline-flex'
+                        justify='space-between'
+                        flex='1'
+                      >
+                        <Box>
+                          <Heading
+                            as='h3'
+                            color='white.100'
+                            fontWeight='bold'
+                            fontSize='28px'
+                            maxWidth={132}
+                            mb='4px'
+                            lineHeight='36px'
+                            letterSpacing='2px'
+                            isTruncated
+                          >
+                            {title}
+                          </Heading>
+                          {authors && authors.slice(0, 1).map(author => (
+                            <Text
+                              key={author}
+                              fontSize='14px'
+                              lineHeight='16px'
+                              letterSpacing='1.3px'
+                              color='white.300'
+                            >
+                              {author}
+                            </Text>
+                          ))}
+                        </Box>
+
+                        <Flex as='span' fontSize='10px' align='center' color='white.300'>
+                          <CardStatisticsIcon boxSize='16px' position='relative' top='3px'/>
+                          <Text color='white.secondary'>
+                            <Text as='span' fontWeight='bold'>120+ </Text>
+                            Read now
+                          </Text>
+                        </Flex>
+
+                      </Flex>
+
+                      <Flex flexDir='column' position='relative'>
+                        <Box position='absolute' sx={{ left: '-36px', top: '-11px', }} zIndex='2'>
+                          <Image
+                            width={60}
+                            height={100}
+                            display='block'
+                            src='/images/discover-foreground.png'
+                          />
+                        </Box>
+
+                        <Image
+                          width={72}
+                          height={111}
+                          display='block'
+                          alt={title}
+                          src={thumbnail}
+                        />
+                      </Flex>
+
+                  </MotionFlex>
+                </MotionBox>
+              </Link>
+            </SwiperSlide>
+          )
+        })}
+      </Swiper>
+    </Flex>
+  )
+}

src/components/CurrentBookCard/index.jsx

@@ -0,0 +1,80 @@
+import Image from 'next/image'
+import NextLink from 'next/link'
+import { Flex, Text, Box } from '@chakra-ui/react'
+import { CurrentlyReadingIcon } from '../Icons'
+
+export const CurrentBookCard = ({ book }) => {
+  const { id, etag, volumeInfo: { authors, title, imageLinks: { thumbnail } } } = book
+  return (
+    <NextLink href='#' passHref>
+      <Flex
+        as='a'
+        position='relative'
+        p='10px 20px 10px 20px'
+        mt='20px'
+        maxWidth='330px'
+        maxHeight='100px'
+        background='#eef5db'
+        boxShadow='0px 3px 45px rgba(121, 141, 67, 0.115084)'
+        borderRadius='0px 3px 3px 0px'
+        cursor='pointer'
+        sx={{ gap: '8px' }}
+      >
+
+        <Flex flexDir='column' justify='space-between' mr='10px'>
+          <Box m='-25px 0' maxHeight='130px'>
+            <Image
+              width={88}
+              height={130}
+              src={thumbnail}
+            />
+          </Box>
+        </Flex>
+
+        <Flex flexDir='column' justify='space-between' flex='1'>
+          <Box>
+            <Text as='h3' fontWeight='700' fontSize='20px' lineHeight='26px' color='title.700'>{title}</Text>
+            {authors && authors.slice(0, 1).map(author => (
+              <Text
+                key={author}
+                fontSize='10px'
+                color='text.800'
+              >
+                by {author}
+              </Text>
+            ))}
+          </Box>
+
+          <Flex align='center' color='title.700'>
+            <CurrentlyReadingIcon boxSize='16px' position='relative' top='2px' />
+            <Text>
+              Chapter&nbsp;
+              <Text as='span' color='highlight'>2&nbsp;</Text>
+              From 9
+            </Text>
+          </Flex>
+        </Flex>
+
+        <Flex
+          flexDir='column'
+          justify='space-between'
+          position='absolute'
+          top='0'
+          right='0'
+          width='100%'
+          height='100px'
+          overflow='hidden'
+        >
+          <Box position='absolute' top='-20px' right='-33px' zIndex='1'>
+            <Image
+              width={142}
+              height={157}
+              src='/images/currently-reading.png'
+            />
+          </Box>
+        </Flex>
+
+      </Flex>
+    </NextLink>
+  )
+}