From c06d246685549ffff82f6f97a53ccb82c2884422 Mon Sep 17 00:00:00 2001 From: Lucif3r-in Date: Wed, 27 Sep 2023 07:54:03 +0530 Subject: [PATCH 1/4] feat: add events name ticker --- .env.sample | 8 ----- config/content/TickerData.js | 38 ++++++++++++++++++++ src/components/Ticker/Ticker.jsx | 49 +++++++++++++++++++++++++ src/components/Ticker/styles.jsx | 61 ++++++++++++++++++++++++++++++++ src/pages/playground.js | 4 +-- 5 files changed, 150 insertions(+), 10 deletions(-) delete mode 100644 .env.sample create mode 100644 config/content/TickerData.js create mode 100644 src/components/Ticker/Ticker.jsx create mode 100644 src/components/Ticker/styles.jsx diff --git a/.env.sample b/.env.sample deleted file mode 100644 index 4fd828c..0000000 --- a/.env.sample +++ /dev/null @@ -1,8 +0,0 @@ -GATSBY_FIREBASE_API_KEY=SOME_API_KEY -GATSBY_FIREBASE_AUTH_DOMAIN=SOME_AUTH_DOMAIN -GATSBY_FIREBASE_PROJECT_ID=SOME_PROJECT_ID -GATSBY_FIREBASE_STORAGE_BUCKET=SOME_STORAGE_BUCKET -GATSBY_FIREBASE_MESSAGING_SENDER_ID=SOME_MESSAGING_SENDER_ID -GATSBY_FIREBASE_APP_ID=SOME_APP_ID -GATSBY_FIREBASE_MEASUREMENT_ID=SOME_MEASUREMENT_ID -GATSBY_API_URL=https://avenue-api.nitrkl.in/ \ No newline at end of file diff --git a/config/content/TickerData.js b/config/content/TickerData.js new file mode 100644 index 0000000..70fe912 --- /dev/null +++ b/config/content/TickerData.js @@ -0,0 +1,38 @@ +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_3_x0pceh.png', + }, + { + type: 'text', + content: 'Fun Events', + }, + { + type: 'image', + content: 'https://res.cloudinary.com/dhnkuonev/image/upload/v1695746152/Group_3_x0pceh.png', + }, + { + type: 'text', + content: 'Workshops', + }, + { + type: 'image', + content: 'https://res.cloudinary.com/dhnkuonev/image/upload/v1695746152/Group_3_x0pceh.png', + }, + { + type: 'text', + content: 'Lectures', + }, +]; diff --git a/src/components/Ticker/Ticker.jsx b/src/components/Ticker/Ticker.jsx new file mode 100644 index 0000000..d045d59 --- /dev/null +++ b/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 ( + + {item.type === 'text' ? ( + {item.content} + ) : ( + + )} + + ); + }); +} + +function Ticker() { + return ( +
+ + + {generateTickerItems()} + {generateTickerItems()} + {generateTickerItems()} + + + + + {generateTickerItems()} + {generateTickerItems()} + {generateTickerItems()} + + +
+ ); +} + +export default Ticker; diff --git a/src/components/Ticker/styles.jsx b/src/components/Ticker/styles.jsx new file mode 100644 index 0000000..ca5d9e4 --- /dev/null +++ b/src/components/Ticker/styles.jsx @@ -0,0 +1,61 @@ +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-10 + `} + @media (max-width: 768px) { + margin: 0.5rem 0.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)} 70s linear infinite; + + @media (max-width: 720px) { + animation: ${({ reverse }) => (reverse ? reverseTicker : ticker)} 50s linear infinite; + } +`; diff --git a/src/pages/playground.js b/src/pages/playground.js index 45bf690..72e9e0e 100644 --- a/src/pages/playground.js +++ b/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 = () => ( Playground - + ); From d44c4cdfe1e4472e1c8f82791ecf6cd2e4a88a6e Mon Sep 17 00:00:00 2001 From: Lucif3r-in Date: Wed, 27 Sep 2023 10:56:17 +0530 Subject: [PATCH 2/4] fix: minor changes --- config/content/TickerData.js | 10 +++++++--- src/components/Ticker/styles.jsx | 4 +++- 2 files changed, 10 insertions(+), 4 deletions(-) diff --git a/config/content/TickerData.js b/config/content/TickerData.js index 70fe912..8ebba86 100644 --- a/config/content/TickerData.js +++ b/config/content/TickerData.js @@ -13,7 +13,7 @@ export const tickerData = [ }, { type: 'image', - content: 'https://res.cloudinary.com/dhnkuonev/image/upload/v1695746152/Group_3_x0pceh.png', + content: 'https://res.cloudinary.com/dhnkuonev/image/upload/v1695746152/Group_2_tuocil.png', }, { type: 'text', @@ -21,7 +21,7 @@ export const tickerData = [ }, { type: 'image', - content: 'https://res.cloudinary.com/dhnkuonev/image/upload/v1695746152/Group_3_x0pceh.png', + content: 'https://res.cloudinary.com/dhnkuonev/image/upload/v1695746152/Group_1_mlxhs3.png', }, { type: 'text', @@ -29,10 +29,14 @@ export const tickerData = [ }, { type: 'image', - content: 'https://res.cloudinary.com/dhnkuonev/image/upload/v1695746152/Group_3_x0pceh.png', + 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', + }, ]; diff --git a/src/components/Ticker/styles.jsx b/src/components/Ticker/styles.jsx index ca5d9e4..0bea2ed 100644 --- a/src/components/Ticker/styles.jsx +++ b/src/components/Ticker/styles.jsx @@ -13,10 +13,12 @@ export const ItemContainer = styled.div` ${tw` inline-block mx-12 - h-10 + h-16 + mb-4 `} @media (max-width: 768px) { margin: 0.5rem 0.5rem; + height: 2.5rem; } `; From 59bedd561faebc490b0d60ebee8d65f80657a020 Mon Sep 17 00:00:00 2001 From: Lucif3r-in Date: Wed, 27 Sep 2023 18:48:35 +0530 Subject: [PATCH 3/4] fix: ticker speed --- src/components/Ticker/styles.jsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/Ticker/styles.jsx b/src/components/Ticker/styles.jsx index 0bea2ed..81d5e01 100644 --- a/src/components/Ticker/styles.jsx +++ b/src/components/Ticker/styles.jsx @@ -55,9 +55,9 @@ export const TickerMover = styled.div` &:hover { animation-play-state: paused; } - animation: ${({ reverse }) => (reverse ? reverseTicker : ticker)} 70s linear infinite; + animation: ${({ reverse }) => (reverse ? reverseTicker : ticker)} 160s linear infinite; @media (max-width: 720px) { - animation: ${({ reverse }) => (reverse ? reverseTicker : ticker)} 50s linear infinite; + animation: ${({ reverse }) => (reverse ? reverseTicker : ticker)} 110s linear infinite; } `; From 06df8cbf6186cb9c0adcb57b234348c1c9538276 Mon Sep 17 00:00:00 2001 From: Lucif3r-in Date: Thu, 28 Sep 2023 07:37:24 +0530 Subject: [PATCH 4/4] fix: change function call --- .env.sample | 8 +++++ config/content/TickerData.js | 30 ++++++------------ src/components/Ticker/Ticker.jsx | 52 ++++++++++++++++---------------- src/components/Ticker/styles.jsx | 3 -- 4 files changed, 44 insertions(+), 49 deletions(-) create mode 100644 .env.sample diff --git a/.env.sample b/.env.sample new file mode 100644 index 0000000..4fd828c --- /dev/null +++ b/.env.sample @@ -0,0 +1,8 @@ +GATSBY_FIREBASE_API_KEY=SOME_API_KEY +GATSBY_FIREBASE_AUTH_DOMAIN=SOME_AUTH_DOMAIN +GATSBY_FIREBASE_PROJECT_ID=SOME_PROJECT_ID +GATSBY_FIREBASE_STORAGE_BUCKET=SOME_STORAGE_BUCKET +GATSBY_FIREBASE_MESSAGING_SENDER_ID=SOME_MESSAGING_SENDER_ID +GATSBY_FIREBASE_APP_ID=SOME_APP_ID +GATSBY_FIREBASE_MEASUREMENT_ID=SOME_MEASUREMENT_ID +GATSBY_API_URL=https://avenue-api.nitrkl.in/ \ No newline at end of file diff --git a/config/content/TickerData.js b/config/content/TickerData.js index 8ebba86..0e70ce5 100644 --- a/config/content/TickerData.js +++ b/config/content/TickerData.js @@ -1,41 +1,31 @@ export const tickerData = [ + { id: 1, type: 'text', content: 'Technical Events' }, { - 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' }, { - 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' }, { - 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' }, { - 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' }, { - type: 'text', - content: 'Lectures', - }, - { + id: 10, type: 'image', content: 'https://res.cloudinary.com/dhnkuonev/image/upload/v1695746152/Group_3_x0pceh.png', }, diff --git a/src/components/Ticker/Ticker.jsx b/src/components/Ticker/Ticker.jsx index d045d59..21fcc05 100644 --- a/src/components/Ticker/Ticker.jsx +++ b/src/components/Ticker/Ticker.jsx @@ -1,45 +1,45 @@ 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}`; - } +const TickerItem = ({ item, index }) => { + let key; + if (item.type === 'text') { + key = `text-${item.content}`; + } else { + key = `image-${index}`; + } - return ( - - {item.type === 'text' ? ( - {item.content} - ) : ( - - )} - - ); - }); -} + return ( + + {item.type === 'text' ? ( + {item.content} + ) : ( + + )} + + ); +}; + +const GenerateTickerItems = () => + tickerData.map((item, index) => ); function Ticker() { return (
- {generateTickerItems()} - {generateTickerItems()} - {generateTickerItems()} + + + - {generateTickerItems()} - {generateTickerItems()} - {generateTickerItems()} + + +
diff --git a/src/components/Ticker/styles.jsx b/src/components/Ticker/styles.jsx index 81d5e01..0015685 100644 --- a/src/components/Ticker/styles.jsx +++ b/src/components/Ticker/styles.jsx @@ -52,9 +52,6 @@ export const TickerMover = styled.div` inline-block whitespace-nowrap `} - &:hover { - animation-play-state: paused; - } animation: ${({ reverse }) => (reverse ? reverseTicker : ticker)} 160s linear infinite; @media (max-width: 720px) {