feat: add events name ticker

config/content/TickerData.js

@@ -0,0 +1,42 @@
+export const tickerData = [
+  {
+    type: 'text',
+    content: 'Technical Events',
+  },
+  {
+    type: 'image',
+    content: 'https://res.cloudinary.com/dhnkuonev/image/upload/v1695746152/Group_3_x0pceh.png',
+  },
+  {
+    type: 'text',
+    content: 'Exhibitions',
+  },
+  {
+    type: 'image',
+    content: 'https://res.cloudinary.com/dhnkuonev/image/upload/v1695746152/Group_2_tuocil.png',
+  },
+  {
+    type: 'text',
+    content: 'Fun Events',
+  },
+  {
+    type: 'image',
+    content: 'https://res.cloudinary.com/dhnkuonev/image/upload/v1695746152/Group_1_mlxhs3.png',
+  },
+  {
+    type: 'text',
+    content: 'Workshops',
+  },
+  {
+    type: 'image',
+    content: 'https://res.cloudinary.com/dhnkuonev/image/upload/v1695746152/Group_2_1_ddiagd.png',
+  },
+  {
+    type: 'text',
+    content: 'Lectures',
+  },
+  {
+    type: 'image',
+    content: 'https://res.cloudinary.com/dhnkuonev/image/upload/v1695746152/Group_3_x0pceh.png',
+  },
+];

src/components/Ticker/Ticker.jsx

@@ -0,0 +1,49 @@
+import React from 'react';
+
+import { tickerData } from '../../../config/content/TickerData';
+import { TickerContainer, TickerMover, ItemContainer, TickerIcon } from './styles';
+import { Heading1 } from '../shared';
+
+function generateTickerItems() {
+  return tickerData.map((item, index) => {
+    let key;
+    if (item.type === 'text') {
+      key = `text-${item.content}`;
+    } else {
+      key = `image-${index}`;
+    }
+
+    return (
+      <ItemContainer key={key}>
+        {item.type === 'text' ? (
+          <Heading1>{item.content}</Heading1>
+        ) : (
+          <TickerIcon style={{ paddingTop: '20px' }} src={item.content} alt={`divider-${index}`} />
+        )}
+      </ItemContainer>
+    );
+  });
+}
+
+function Ticker() {
+  return (
+    <div>
+      <TickerContainer>
+        <TickerMover>
+          {generateTickerItems()}
+          {generateTickerItems()}
+          {generateTickerItems()}
+        </TickerMover>
+      </TickerContainer>
+      <TickerContainer>
+        <TickerMover reverse>
+          {generateTickerItems()}
+          {generateTickerItems()}
+          {generateTickerItems()}
+        </TickerMover>
+      </TickerContainer>
+    </div>
+  );
+}
+
+export default Ticker;

src/components/Ticker/styles.jsx

@@ -0,0 +1,63 @@
+import styled, { keyframes } from 'styled-components';
+import tw from 'twin.macro';
+
+export const TickerContainer = styled.div`
+  ${tw`
+    w-full 
+    overflow-hidden
+    py-1
+  `}
+`;
+
+export const ItemContainer = styled.div`
+  ${tw`
+    inline-block
+    mx-12
+    h-16
+    mb-4
+    `}
+  @media (max-width: 768px) {
+    margin: 0.5rem 0.5rem;
+    height: 2.5rem;
+  }
+`;
+
+export const TickerIcon = styled.img`
+  ${tw`
+    my-auto
+`}
+  @media (max-width: 720px) {
+    width: 30px;
+  }
+`;
+const ticker = keyframes`
+  0% {
+    transform: translate(0, 0);
+  }
+  100% {
+    transform: translate(-200%, 0);
+  }
+`;
+const reverseTicker = keyframes`
+  0% {
+    transform: translate(-100%, 0);
+  }
+  100% {
+    transform: translate(200%, 0);
+  }
+`;
+
+export const TickerMover = styled.div`
+  ${tw`
+    inline-block
+    whitespace-nowrap
+  `}
+  &:hover {
+    animation-play-state: paused;
+  }
+  animation: ${({ reverse }) => (reverse ? reverseTicker : ticker)} 160s linear infinite;
+
+  @media (max-width: 720px) {
+    animation: ${({ reverse }) => (reverse ? reverseTicker : ticker)} 110s linear infinite;
+  }
+`;

src/pages/playground.js

@@ -1,7 +1,7 @@
 /* eslint-disable jsx-a11y/click-events-have-key-events */
 import React from 'react';
 import { Helmet } from 'react-helmet';
-import FAQSection from '../components/FAQSection/FAQSection';
+import Ticker from '../components/Ticker/Ticker';
 
 const Playground = () => (
   <>
@@ -10,7 +10,7 @@ const Playground = () => (
       <title>Playground</title>
       <meta name='description' content='This is playground' />
     </Helmet>
-    <FAQSection />
+    <Ticker />
   </>
 );