[WIP] homepage news

components/_common/Card.tsx

@@ -0,0 +1,15 @@
+import { Box } from '@chakra-ui/react'
+import styled from '@emotion/styled'
+
+const Card = styled(Box)`
+  padding: 16px 24px;
+  border-radius: 12px;
+  border: 1px solid #333a40;
+  background: linear-gradient(
+    180deg,
+    rgba(28, 28, 29, 0.5) 0,
+    rgba(51, 58, 64, 0.5) 100%
+  );
+`
+
+export default Card

components/_common/nav-bar.tsx

@@ -138,8 +138,7 @@ const MenuIcon = () => (
     width='24px'
     viewBox='0 0 20 20'
     xmlns='http://www.w3.org/2000/svg'
-    fill='white'
-  >
+    fill='white'>
     <title>Menu</title>
     <path d='M0 3h20v2H0V3zm0 6h20v2H0V9zm0 6h20v2H0v-2z' />
   </svg>
@@ -154,8 +153,7 @@ const MenuToggle = ({ toggle, isOpen }) => {
         '@media (max-width: 1040px)': {
           display: 'block',
         },
-      }}
-    >
+      }}>
       {isOpen ? <CloseIcon /> : <MenuIcon />}
     </Box>
   )
@@ -180,8 +178,7 @@ const MenuItem = ({ children, to = '/', ...rest }) => {
           paddingTop: '16px',
         },
       }}
-      isExternal={to.includes('http')}
-    >
+      isExternal={to.includes('http')}>
       <Text
         display='block'
         fontWeight={600}
@@ -190,8 +187,7 @@ const MenuItem = ({ children, to = '/', ...rest }) => {
           color: 'white',
           borderBottom: 'solid 4px white',
         }}
-        borderBottom={onPage ? 'solid 4px red' : 'solid 4px transparent'}
-      >
+        borderBottom={onPage ? 'solid 4px red' : 'solid 4px transparent'}>
         {children}
       </Text>
     </Link>
@@ -214,8 +210,7 @@ const DropDownItem = ({ children, to = '/', ...rest }) => {
         '@media (max-width: 1040px)': {
           paddingTop: '1px',
         },
-      }}
-    >
+      }}>
       <Text
         display='block'
         fontWeight={600}
@@ -229,8 +224,7 @@ const DropDownItem = ({ children, to = '/', ...rest }) => {
           '@media (max-width: 1040px)': {
             fontSize: '100%',
           },
-        }}
-      >
+        }}>
         {children}
       </Text>
     </Link>
@@ -251,22 +245,23 @@ const DropdownMenu = ({ linksData }) => {
       className={`${styles['dropdown']}`}
       textAlign={'center'}
       transition='all 1s ease-in-out'
+      backgroundColor='black'
+      paddingX='20px'
+      borderBottomRadius='10px'
       zIndex='dropdown'
       sx={{
         '@media (max-width: 1040px)': {
           textAlign: 'start',
         },
-      }}
-    >
+      }}>
       <Stack
         spacing={1}
         marginBottom={'1rem'}
         sx={{
           '@media (max-width: 1040px)': {
             marginLeft: '20%',
           },
-        }}
-      >
+        }}>
         {linksData.map(({ href, title }: Link) => {
           return (
             <DropDownItem key={ulid()} to={href}>
@@ -289,8 +284,7 @@ const MenuLinks = ({ isOpen }) => {
           display: isOpen ? 'block' : 'none',
           'flex-basis': '100%',
         },
-      }}
-    >
+      }}>
       <Stack
         spacing={8}
         className='linkStack'
@@ -307,8 +301,7 @@ const MenuLinks = ({ isOpen }) => {
             paddingTop: '16px',
             gap: '0.4rem',
           },
-        }}
-      >
+        }}>
         {NAV_LINKS.map((_navLink, idx) => {
           const isAboutUs = _navLink.name === 'About Us'
           const isToken = _navLink.name === 'Token'
@@ -326,8 +319,7 @@ const MenuLinks = ({ isOpen }) => {
                   marginInlineStart: '0px!important',
                   marginTop: '0px!important',
                 },
-              }}
-            >
+              }}>
               <MenuItem to={_navLink.href}>{_navLink.name}</MenuItem>
               {isAboutUs && <DropdownMenu linksData={aboutUsLinksData} />}
               {isWork && <DropdownMenu linksData={workWithUsLinksData} />}
@@ -361,8 +353,7 @@ const NavBarContainer = ({ children, ...props }) => {
           background: 'primary.500',
           color: 'white',
         },
-      }}
-    >
+      }}>
       {children}
     </Flex>
   )

components/home/index.tsx

@@ -6,9 +6,11 @@ import Section2 from './section2'
 import Section3 from './section3'
 import NewsLetterAboutUs from 'components/_common/newsletter-section'
 import SnapshotSection from './Snapshot/SnapshotSection'
+import News from './news'
 
 const Home = () => (
   <VStack rowGap='2rem'>
+    <News />
     <Section1 />
     <Section2 />
     <Section3 />

components/home/news.tsx

@@ -0,0 +1,210 @@
+import React, { useEffect, useState } from 'react'
+import { Image, Box, Heading, Link } from '@chakra-ui/react'
+import styled from '@emotion/styled'
+import { Swiper, SwiperSlide } from 'swiper/react'
+import {
+  Mousewheel,
+  Keyboard,
+  Autoplay,
+  Pagination,
+  Navigation,
+} from 'swiper/modules'
+import 'swiper/css'
+import 'swiper/css/pagination'
+import 'swiper/css/navigation'
+
+import Card from 'components/_common/Card'
+
+export interface FeedType {
+  title: string
+  link: string
+  pubDate: string
+  website: string
+  image?: string
+}
+
+export interface NewsType {
+  announcement: string
+  feed: FeedType[]
+  featured: FeedType[]
+}
+
+const Announcement = styled(Card)`
+  a {
+    text-decoration: underline;
+  }
+`
+
+const FeaturedNews = styled(Box)`
+  * {
+    --swiper-theme-color: red;
+  }
+  .mySwiper {
+    border-radius: 12px;
+    border: 1px solid #333a40;
+    overflow: hidden;
+  }
+  .swiper {
+    width: 100%;
+    height: 100%;
+  }
+
+  .swiper-slide {
+    text-align: center;
+
+    /* Center slide text vertically */
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+  .swiper-slide img {
+    display: block;
+    width: 100%;
+    object-fit: cover;
+  }
+  .swiper-pagination {
+    /* bottom: -20px; */
+  }
+  .swiper-pagination-bullet {
+    width: 11px;
+    height: 11px;
+    background: white;
+    opacity: 0.8;
+  }
+  .swiper-pagination-bullet-active {
+    background: red !important;
+  }
+`
+
+const formatDateDescription = targetDate => {
+  const currentDate = new Date()
+  const timeDifference =
+    currentDate.getTime() - Date.parse(targetDate).valueOf()
+  const daysDifference = Math.floor(timeDifference / (1000 * 60 * 60 * 24))
+
+  if (daysDifference === 0) {
+    return 'today'
+  } else if (daysDifference === 1) {
+    return 'yesterday'
+  } else if (daysDifference <= 7) {
+    return `${daysDifference} days ago`
+  } else if (daysDifference <= 14) {
+    return 'last week'
+  } else {
+    const weeksDifference = Math.floor(daysDifference / 7)
+    return `${weeksDifference} weeks ago`
+  }
+}
+
+const News = (): React.ReactElement => {
+  const [latestNews, setLatestNews] = useState<NewsType>({
+    announcement: '<p>&nbsp;</p>',
+    feed: [],
+    featured: [
+      {
+        title: '',
+        link: '/',
+        pubDate: 'now',
+        website: '',
+        image:
+          'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=',
+      },
+    ],
+  })
+
+  useEffect(() => {
+    try {
+      fetch(`https://app.banklessacademy.com/api/cache/bankless-dao-news`)
+        .then(response => response.json())
+        .then(response => {
+          console.log(response)
+          setLatestNews(response.data)
+        })
+        .catch(rejected => {
+          console.log(rejected)
+        })
+    } catch (error) {
+      console.error(error)
+    }
+  }, [])
+
+  return (
+    <Box zIndex={1} w='100%'>
+      <Announcement mb='6' minH='120px'>
+        <Heading
+          color='white'
+          size={{ base: 'lg' }}
+          dangerouslySetInnerHTML={{
+            __html: latestNews.announcement,
+          }}></Heading>
+      </Announcement>
+      <Box display={{ base: 'block', xl: 'flex' }} w='100%'>
+        <Box
+          display='block'
+          width={{ base: '100%', xl: '70%' }}
+          mr={{ base: '0', xl: '4' }}
+          mb={{ base: '4', xl: '0' }}>
+          <FeaturedNews>
+            <Swiper
+              spaceBetween={30}
+              centeredSlides={true}
+              autoplay={{
+                delay: 2500,
+                disableOnInteraction: true,
+              }}
+              pagination={{
+                clickable: true,
+              }}
+              navigation={false}
+              modules={[Mousewheel, Keyboard, Autoplay, Pagination, Navigation]}
+              className='mySwiper'>
+              {latestNews.featured.map((news, index) => (
+                <SwiperSlide key={`news-${index}`}>
+                  <Link href={news.link} isExternal w='100%'>
+                    <Box
+                      textAlign='left'
+                      background='whiteAlpha.200'
+                      p='4'
+                      fontSize='md'
+                      minH='68px'>
+                      <Heading as='h2' size='lg' color='white'>
+                        {news.title}
+                      </Heading>
+                      {news.website}
+                    </Box>
+                    <Image
+                      src={news.image}
+                      w='100%'
+                      aspectRatio='1.9'
+                      alt={`${news.website} - ${news.title}`}
+                    />
+                  </Link>
+                </SwiperSlide>
+              ))}
+            </Swiper>
+          </FeaturedNews>
+        </Box>
+        <Box w='100%'>
+          <Card minH='538px'>
+            <Heading as='h2' size='lg' color='white'>
+              Latest News
+            </Heading>
+            {latestNews.feed.map((news, index) => (
+              <Box key={`news-${index}`} mt={3}>
+                <Link href={news.link} isExternal color='white' fontSize='lg'>
+                  {news.title}
+                  <br />
+                  <Box color='whiteAlpha.500'>
+                    {news.website} • {formatDateDescription(news.pubDate)}
+                  </Box>
+                </Link>
+              </Box>
+            ))}
+          </Card>
+        </Box>
+      </Box>
+    </Box>
+  )
+}
+
+export default News