Skip to content

Commit 265f8f4

Browse files
simmmplewebsimmmpleweb
committed
1.1.0 done
1 parent 2f9eab3 commit 265f8f4

File tree

4 files changed

+122
-103
lines changed

4 files changed

+122
-103
lines changed

‎src/components/card/Limited.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -26,8 +26,8 @@ export default function Limited(props) {
2626
bgSize='cover'
2727
bgPosition={{ base: "center", "3xl": "unset" }}
2828
maxW='100%'
29-
w={{ base: "100%", lg: "343px" }}
30-
h={{ base: "100%", lg: "185px" }}
29+
w={{ base: "343px", lg: "343px" }}
30+
h={{ base: "185px", lg: "185px" }}
3131
borderRadius='20px'
3232
/>
3333
<Flex

‎src/components/card/Member.js

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,10 @@ export default function Default(props) {
1818
const { avatar, name, job, ...rest } = props;
1919
const textColor = useColorModeValue("secondaryGray.900", "white");
2020
const bg = useColorModeValue("white", "#1B254B");
21+
const shadow = useColorModeValue(
22+
"0px 18px 40px rgba(112, 144, 176, 0.12)",
23+
"none"
24+
);
2125

2226
return (
2327
<Card py='10px' bg={bg} {...rest}>

‎src/views/admin/default/components/Lesson.js

Lines changed: 113 additions & 99 deletions
Original file line numberDiff line numberDiff line change
@@ -2,68 +2,66 @@
22
import {
33
AvatarGroup,
44
Avatar,
5-
Box,
65
Button,
76
Flex,
87
Icon,
9-
Image,
10-
Link,
118
Text,
129
useColorModeValue,
1310
} from "@chakra-ui/react";
1411
// Custom components
1512
import Card from "components/card/Card.js";
13+
import IconBox from "components/icons/IconBox";
1614
// Assets
1715
import React, { useState } from "react";
18-
import { IoHeart, IoHeartOutline } from "react-icons/io5";
1916
import {
2017
MdLocalFireDepartment,
21-
MdFastfood,
22-
MdOutlineWatchLater,
2318
MdTimer,
2419
MdOutlineSlowMotionVideo,
20+
MdSlowMotionVideo,
2521
} from "react-icons/md";
2622

2723
export default function Limited(props) {
28-
const { image, name, author, bidders, download, currentBid } = props;
29-
const [like, setLike] = useState(false);
24+
const { attendants, ...rest } = props;
3025
const textColor = useColorModeValue("navy.700", "white");
3126
const textColorBid = useColorModeValue("brand.500", "white");
27+
const box = useColorModeValue("red.100", "navy.700");
28+
const icon = useColorModeValue("red.500", "white");
29+
const down = useColorModeValue("gray.100", "navy.700");
3230
return (
33-
<Card p='20px'>
31+
<Card p='0px' {...rest}>
3432
<Flex direction={{ base: "column" }} justify='center'>
35-
<Box mb={{ base: "20px", "2xl": "20px" }} position='relative'>
36-
<Image
37-
src={image}
38-
w={{ base: "100%", "3xl": "100%" }}
39-
h={{ base: "100%", "3xl": "100%" }}
40-
borderRadius='20px'
41-
/>
42-
<Button
43-
position='absolute'
44-
bg='white'
45-
_hover={{ bg: "whiteAlpha.900" }}
46-
_active={{ bg: "white" }}
47-
_focus={{ bg: "white" }}
48-
p='0px !important'
49-
top='14px'
50-
right='14px'
51-
borderRadius='50%'
52-
minW='36px'
53-
h='36px'
54-
onClick={() => {
55-
setLike(!like);
56-
}}>
57-
<Icon
58-
transition='0.2s linear'
59-
w='20px'
60-
h='20px'
61-
as={like ? IoHeart : IoHeartOutline}
62-
color='brand.500'
33+
<Flex direction='column' pt='32px' px='17px'>
34+
<Flex align='center' mb={{ base: "40px", xl: "20px", "2xl": "40px" }}>
35+
<IconBox
36+
me={{ base: "12px", xl: "8px", "2xl": "12px" }}
37+
h={{ base: "48px", xl: "38px", "2xl": "48px" }}
38+
w={{ base: "48px", xl: "38px", "2xl": "48px" }}
39+
borderRadius={{ base: "16px", xl: "12px", "2xl": "16px" }}
40+
bg={box}
41+
icon={
42+
<Icon
43+
h={{ base: "28px", xl: "20px", "2xl": "28px" }}
44+
w={{ base: "28px", xl: "20px", "2xl": "28px" }}
45+
as={MdLocalFireDepartment}
46+
color={icon}
47+
/>
48+
}
6349
/>
64-
</Button>
65-
</Box>
66-
<Flex flexDirection='column' justify='space-between' h='100%'>
50+
<Flex direction='column' align='start'>
51+
<Text
52+
color='secondaryGray.600'
53+
fontSize={{ base: "sm" }}
54+
fontWeight='400'>
55+
Business Design
56+
</Text>
57+
<Text
58+
color={textColor}
59+
fontSize={{ base: "md" }}
60+
fontWeight='700'>
61+
New lession is available
62+
</Text>
63+
</Flex>
64+
</Flex>
6765
<Flex
6866
justify='space-between'
6967
direction={{
@@ -74,83 +72,99 @@ export default function Limited(props) {
7472
"2xl": "row",
7573
}}
7674
mb='auto'>
77-
<Flex direction='column'>
75+
<Text
76+
color={textColor}
77+
fontSize={{
78+
base: "xl",
79+
"2xl": "md",
80+
"3xl": "xl",
81+
}}
82+
mb='5px'
83+
fontWeight='bold'
84+
me='14px'>
85+
What do you need to know to create better products?
86+
</Text>
87+
</Flex>
88+
</Flex>
89+
<Flex
90+
direction='column'
91+
mt='40px'
92+
borderBottomRightRadius='20px'
93+
borderBottomLeftRadius='20px'
94+
pb='30px'
95+
pt='15px'
96+
px={{ base: "28px", xl: "20px", "2xl": "28px" }}
97+
bg={down}
98+
h='150px'
99+
w='100%'>
100+
<Flex>
101+
<Flex align='center' me='26px'>
102+
<Icon as={MdTimer} h='24px' w='24px' me='6px' color='green.500' />
78103
<Text
79104
color={textColor}
80-
fontSize={{
81-
base: "xl",
82-
md: "lg",
83-
lg: "lg",
84-
xl: "lg",
85-
"2xl": "md",
86-
"3xl": "lg",
87-
}}
88-
mb='5px'
89-
fontWeight='bold'
90-
me='14px'>
91-
{name}
105+
fontSize={{ base: "sm", xl: "xs", "2xl": "sm" }}
106+
fontWeight='700'>
107+
85 mins
92108
</Text>
109+
</Flex>
110+
<Flex align='center'>
111+
<Icon
112+
as={MdSlowMotionVideo}
113+
h='24px'
114+
w='24px'
115+
me='6px'
116+
color='red.500'
117+
/>
93118
<Text
94-
color='secondaryGray.600'
95-
fontSize={{
96-
base: "sm",
97-
}}
98-
fontWeight='400'
99-
me='14px'>
100-
{author}
119+
color={textColor}
120+
fontSize={{ base: "sm", xl: "xs", "2xl": "sm" }}
121+
fontWeight='700'>
122+
Video format
101123
</Text>
102124
</Flex>
125+
</Flex>
126+
<Flex
127+
w='100%'
128+
align={{
129+
base: "center",
130+
xl: "start",
131+
"2xl": "center",
132+
}}
133+
justifyContent='space-between'
134+
mt='auto'
135+
direction={{
136+
base: "row",
137+
xl: "column",
138+
"2xl": "row",
139+
}}>
103140
<AvatarGroup
104-
max={3}
141+
mb={{
142+
base: "0px",
143+
xl: "10px",
144+
"2xl": "0px",
145+
}}
146+
max={4}
105147
color={textColorBid}
106148
size='sm'
107149
mt={{
108150
base: "0px",
109151
md: "10px",
110-
lg: "0px",
111-
xl: "10px",
112152
"2xl": "0px",
113153
}}
114154
fontSize='12px'>
115-
{bidders.map((avt, key) => (
155+
{attendants.map((avt, key) => (
116156
<Avatar key={key} src={avt} />
117157
))}
118158
</AvatarGroup>
119-
</Flex>
120-
<Flex
121-
align='start'
122-
justify='space-between'
123-
direction={{
124-
base: "row",
125-
md: "column",
126-
lg: "row",
127-
xl: "column",
128-
"2xl": "row",
129-
}}
130-
mt='25px'>
131-
<Text fontWeight='700' fontSize='sm' color={textColorBid}>
132-
Current Bid: {currentBid}
133-
</Text>
134-
<Link
135-
href={download}
136-
mt={{
137-
base: "0px",
138-
md: "10px",
139-
lg: "0px",
140-
xl: "10px",
141-
"2xl": "0px",
142-
}}>
143-
<Button
144-
variant='darkBrand'
145-
color='white'
146-
fontSize='sm'
147-
fontWeight='500'
148-
borderRadius='70px'
149-
px='24px'
150-
py='5px'>
151-
Place Bid
152-
</Button>
153-
</Link>
159+
<Button
160+
h='46px'
161+
w='100%'
162+
maxW='128px'
163+
py='10px'
164+
variant='brand'
165+
fontWeight='500'>
166+
Get Started
167+
</Button>
154168
</Flex>
155169
</Flex>
156170
</Flex>

‎src/views/admin/default/index.jsx

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -58,6 +58,7 @@ import Tasks from "views/admin/default/components/Tasks";
5858
import TotalSpent from "views/admin/default/components/TotalSpent";
5959
import WeeklyRevenue from "views/admin/default/components/WeeklyRevenue";
6060
import Limited from "components/card/Limited";
61+
import Lesson from "views/admin/default/components/Lesson";
6162
import Security from "views/admin/default/components/Security";
6263
import Team from "views/admin/default/components/Team";
6364
import {
@@ -177,10 +178,10 @@ export default function UserReports() {
177178
</SimpleGrid>
178179
</SimpleGrid>
179180
<SimpleGrid columns={{ base: 1, md: 2, xl: 4 }} gap='20px' mb='20px'>
180-
<Limited
181+
<Lesson
181182
name='ETH AI Brain'
182183
author='By Nick Wilson'
183-
bidders={[
184+
attendants={[
184185
Avatar1,
185186
Avatar2,
186187
Avatar3,

0 commit comments

Comments
 (0)