Skip to content
This repository was archived by the owner on Dec 26, 2023. It is now read-only.

Commit b151d7d

Browse files
naz3ehnaz3eh
committed
Repeat components in marquee
1 parent d970a22 commit b151d7d

File tree

1 file changed

+143
-27
lines changed

1 file changed

+143
-27
lines changed

‎frontend/src/layout/index.tsx

Lines changed: 143 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,12 @@
1-
import { Box, Flex, Image, Stack, Text, useColorMode } from '@chakra-ui/react';
1+
import {
2+
Box,
3+
Flex,
4+
HStack,
5+
Image,
6+
Stack,
7+
Text,
8+
useColorMode,
9+
} from '@chakra-ui/react';
210
import React from 'react';
311
import Marquee from 'react-fast-marquee';
412
import Header from '../Components/Header';
@@ -21,19 +29,73 @@ function Page({ children }: { children?: object }) {
2129
loop={0}
2230
speed={60}
2331
>
24-
<Flex>
25-
<Image
26-
src={`/Blur-img-${colorMode === 'dark' ? 'dark' : 'light'}.svg`}
27-
alt="Blur"
28-
/>
29-
<Text
30-
ml={2}
31-
variant="medium"
32-
color={colorMode === 'light' ? '#ffffff' : '#000000'}
33-
>
34-
Current Status: Season 0
35-
</Text>
36-
</Flex>
32+
<HStack gridGap={8}>
33+
<Flex>
34+
<Image
35+
src={`/Blur-img-${colorMode === 'dark' ? 'dark' : 'light'}.svg`}
36+
alt="Blur"
37+
/>
38+
<Text
39+
ml={2}
40+
variant="medium"
41+
color={colorMode === 'light' ? '#ffffff' : '#000000'}
42+
>
43+
Current Status: Season 0
44+
</Text>
45+
</Flex>
46+
<Flex>
47+
<Image
48+
src={`/Blur-img-${colorMode === 'dark' ? 'dark' : 'light'}.svg`}
49+
alt="Blur"
50+
/>
51+
<Text
52+
ml={2}
53+
variant="medium"
54+
color={colorMode === 'light' ? '#ffffff' : '#000000'}
55+
>
56+
Current Status: Season 0
57+
</Text>
58+
</Flex>
59+
<Flex>
60+
<Image
61+
src={`/Blur-img-${colorMode === 'dark' ? 'dark' : 'light'}.svg`}
62+
alt="Blur"
63+
/>
64+
<Text
65+
ml={2}
66+
variant="medium"
67+
color={colorMode === 'light' ? '#ffffff' : '#000000'}
68+
>
69+
Current Status: Season 0
70+
</Text>
71+
</Flex>
72+
<Flex>
73+
<Image
74+
src={`/Blur-img-${colorMode === 'dark' ? 'dark' : 'light'}.svg`}
75+
alt="Blur"
76+
/>
77+
<Text
78+
ml={2}
79+
variant="medium"
80+
color={colorMode === 'light' ? '#ffffff' : '#000000'}
81+
>
82+
Current Status: Season 0
83+
</Text>
84+
</Flex>
85+
<Flex>
86+
<Image
87+
src={`/Blur-img-${colorMode === 'dark' ? 'dark' : 'light'}.svg`}
88+
alt="Blur"
89+
/>
90+
<Text
91+
ml={2}
92+
variant="medium"
93+
color={colorMode === 'light' ? '#ffffff' : '#000000'}
94+
>
95+
Current Status: Season 0
96+
</Text>
97+
</Flex>
98+
</HStack>
3799
</Marquee>
38100
<Stack
39101
paddingY="2.06rem"
@@ -57,19 +119,73 @@ function Page({ children }: { children?: object }) {
57119
loop={0}
58120
speed={60}
59121
>
60-
<Flex>
61-
<Image
62-
src={`/Blur-img-${colorMode === 'dark' ? 'light' : 'dark'}.svg`}
63-
alt="Blur"
64-
/>
65-
<Text
66-
variant="medium"
67-
color={colorMode === 'dark' ? '#ffffff' : '#000000'}
68-
ml={2}
69-
>
70-
Current Status: Season 0
71-
</Text>
72-
</Flex>
122+
<HStack gridGap={8}>
123+
<Flex>
124+
<Image
125+
src={`/Blur-img-${colorMode === 'dark' ? 'light' : 'dark'}.svg`}
126+
alt="Blur"
127+
/>
128+
<Text
129+
variant="medium"
130+
color={colorMode === 'dark' ? '#ffffff' : '#000000'}
131+
ml={2}
132+
>
133+
Current Status: Season 0
134+
</Text>
135+
</Flex>
136+
<Flex>
137+
<Image
138+
src={`/Blur-img-${colorMode === 'dark' ? 'light' : 'dark'}.svg`}
139+
alt="Blur"
140+
/>
141+
<Text
142+
variant="medium"
143+
color={colorMode === 'dark' ? '#ffffff' : '#000000'}
144+
ml={2}
145+
>
146+
Current Status: Season 0
147+
</Text>
148+
</Flex>
149+
<Flex>
150+
<Image
151+
src={`/Blur-img-${colorMode === 'dark' ? 'light' : 'dark'}.svg`}
152+
alt="Blur"
153+
/>
154+
<Text
155+
variant="medium"
156+
color={colorMode === 'dark' ? '#ffffff' : '#000000'}
157+
ml={2}
158+
>
159+
Current Status: Season 0
160+
</Text>
161+
</Flex>
162+
<Flex>
163+
<Image
164+
src={`/Blur-img-${colorMode === 'dark' ? 'light' : 'dark'}.svg`}
165+
alt="Blur"
166+
/>
167+
<Text
168+
variant="medium"
169+
color={colorMode === 'dark' ? '#ffffff' : '#000000'}
170+
ml={2}
171+
>
172+
Current Status: Season 0
173+
</Text>
174+
</Flex>
175+
<Flex>
176+
<Image
177+
src={`/Blur-img-${colorMode === 'dark' ? 'light' : 'dark'}.svg`}
178+
alt="Blur"
179+
/>
180+
<Text
181+
variant="medium"
182+
color={colorMode === 'dark' ? '#ffffff' : '#000000'}
183+
ml={2}
184+
>
185+
Current Status: Season 0
186+
</Text>
187+
</Flex>
188+
</HStack>
73189
</Marquee>
74190
</Box>
75191
);

0 commit comments

Comments
 (0)