feat: add events name ticker (#68)

* feat: add events name ticker

* fix: minor changes

* fix: ticker speed

* fix: change function call

---------

Co-authored-by: Ashish Padhy <100484401+Shurtu-gal@users.noreply.github.com>

config/content/TickerData.js

@@ -0,0 +1,32 @@
+export const tickerData = [
+  { id: 1, type: 'text', content: 'Technical Events' },
+  {
+    id: 2,
+    type: 'image',
+    content: 'https://res.cloudinary.com/dhnkuonev/image/upload/v1695746152/Group_3_x0pceh.png',
+  },
+  { id: 3, type: 'text', content: 'Exhibitions' },
+  {
+    id: 4,
+    type: 'image',
+    content: 'https://res.cloudinary.com/dhnkuonev/image/upload/v1695746152/Group_2_tuocil.png',
+  },
+  { id: 5, type: 'text', content: 'Fun Events' },
+  {
+    id: 6,
+    type: 'image',
+    content: 'https://res.cloudinary.com/dhnkuonev/image/upload/v1695746152/Group_1_mlxhs3.png',
+  },
+  { id: 7, type: 'text', content: 'Workshops' },
+  {
+    id: 8,
+    type: 'image',
+    content: 'https://res.cloudinary.com/dhnkuonev/image/upload/v1695746152/Group_2_1_ddiagd.png',
+  },
+  { id: 9, type: 'text', content: 'Lectures' },
+  {
+    id: 10,
+    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';
+
+const TickerItem = ({ 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>
+  );
+};
+
+const GenerateTickerItems = () =>
+  tickerData.map((item, index) => <TickerItem key={item.id} item={item} index={index} />);
+
+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,60 @@
+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
+  `}
+  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 />
   </>
 );