Skip to content

Commit 0c703ef

Browse files
owjs3901owjs3901
committed
Impl bench
1 parent 9cd9150 commit 0c703ef

File tree

7 files changed

+237
-196
lines changed

7 files changed

+237
-196
lines changed

‎apps/landing/public/icons/crown.svg‎

Lines changed: 3 additions & 0 deletions
Loading

‎apps/landing/public/icons/devup-ui-card.svg‎

Lines changed: 17 additions & 0 deletions
Loading

‎apps/landing/src/app/Bench.tsx‎

Lines changed: 64 additions & 194 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,7 @@
1-
import { Box, Flex, Image, Text, VStack } from '@devup-ui/react'
1+
import { Flex, Text, VStack } from '@devup-ui/react'
2+
3+
import { DevupUICard } from './DevupUICard'
4+
import { OtherCard } from './OtherCard'
25

36
export function Bench() {
47
return (
@@ -12,199 +15,66 @@ export function Bench() {
1215
Next.js Build Time and Build Size (github action - ubuntu-latest)
1316
</Text>
1417
</VStack>
15-
<Flex alignItems="center" gap="20px">
16-
<VStack
17-
bg="$containerBackground"
18-
border="1px solid $border"
19-
borderRadius="20px"
20-
boxShadow="0 0 8px 0 var(--shadow, rgba(135, 135, 135, 0.25))"
21-
gap="60px"
22-
justifyContent="center"
23-
overflow="hidden"
24-
p="30px"
25-
pos="relative"
26-
w="400px"
27-
>
28-
<Image
29-
aspectRatio="1"
30-
left="-60px"
31-
opacity="0.2"
32-
pos="absolute"
33-
src="/icons/Group 1.svg"
34-
top="132px"
35-
w="260px"
36-
/>
37-
<Image
38-
aspectRatio="1"
39-
bottom="-30px"
40-
opacity="0.2"
41-
pos="absolute"
42-
right="200px"
43-
src="/icons/Group 2.svg"
44-
w="260px"
45-
/>
46-
<VStack gap="8px">
47-
<Text color="$text" typography="h5">
48-
Devup-ui
49-
</Text>
50-
<Text color="$text" typography="textL">
51-
1.0.15
52-
</Text>
53-
</VStack>
54-
<VStack alignItems="flex-end" gap="20px">
55-
<VStack alignItems="flex-end" gap="6px" justifyContent="center">
56-
<Text color="$text" typography="textSbold">
57-
Next.js Build TIme{' '}
58-
</Text>
59-
<Flex gap="10px">
60-
<Box aspectRatio="1" overflow="hidden" w="24px">
61-
<Box
62-
bg="#FFC100"
63-
h="14.548px"
64-
maskImage="url(/icons/Vector.svg)"
65-
maskRepeat="no-repeat"
66-
maskSize="contain"
67-
w="22.8px"
68-
/>
69-
</Box>
70-
<Text
71-
bg="linear-gradient(270deg, #6BB1F2 0%, #8235CA 100%)"
72-
typography="h4"
73-
>
74-
16.8s
75-
</Text>
76-
</Flex>
77-
</VStack>
78-
<VStack alignItems="flex-end" gap="6px" justifyContent="center">
79-
<Text color="$text" typography="textSbold">
80-
Bulid Size
81-
</Text>
82-
<Flex gap="10px">
83-
<Box aspectRatio="1" overflow="hidden" w="24px">
84-
<Box
85-
bg="#FFC100"
86-
h="14.548px"
87-
maskImage="url(/icons/Vector.svg)"
88-
maskRepeat="no-repeat"
89-
maskSize="contain"
90-
w="22.8px"
91-
/>
92-
</Box>
93-
<Text
94-
bg="linear-gradient(270deg, #6BB1F2 0%, #8235CA 100%)"
95-
typography="h4"
96-
>
97-
51.2MB
98-
</Text>
99-
</Flex>
100-
</VStack>
101-
</VStack>
102-
</VStack>
103-
<VStack
104-
bg="$cardBg"
105-
borderRadius="20px"
106-
flex="1"
107-
gap="40px"
108-
justifyContent="center"
109-
p="30px"
110-
>
111-
<VStack gap="8px">
112-
<Text color="$captionBold" typography="h6">
113-
Chakra UI
114-
</Text>
115-
<Text color="$captionBold" typography="textL">
116-
3.24.2
117-
</Text>
118-
</VStack>
119-
<VStack alignItems="flex-end" gap="20px">
120-
<VStack alignItems="flex-end" gap="6px" justifyContent="center">
121-
<Text color="$captionBold" typography="textSbold">
122-
Bulid Time
123-
</Text>
124-
<Text color="$caption" typography="h5">
125-
29.3s
126-
</Text>
127-
</VStack>
128-
<VStack alignItems="flex-end" gap="6px" justifyContent="center">
129-
<Text color="$captionBold" typography="textSbold">
130-
Bulid Size
131-
</Text>
132-
<Text color="$caption" typography="h5">
133-
186.2MB
134-
</Text>
135-
</VStack>
136-
</VStack>
137-
</VStack>
138-
<VStack
139-
bg="$cardBg"
140-
borderRadius="20px"
141-
flex="1"
142-
gap="40px"
143-
justifyContent="center"
144-
p="30px"
145-
>
146-
<VStack gap="8px">
147-
<Text color="$captionBold" typography="h6">
148-
Mui
149-
</Text>
150-
<Text color="$captionBold" typography="textL">
151-
7.3.1
152-
</Text>
153-
</VStack>
154-
<VStack alignItems="flex-end" gap="20px">
155-
<VStack alignItems="flex-end" gap="6px" justifyContent="center">
156-
<Text color="$captionBold" typography="textSbold">
157-
Bulid Time
158-
</Text>
159-
<Text color="$caption" typography="h5">
160-
21.6s
161-
</Text>
162-
</VStack>
163-
<VStack alignItems="flex-end" gap="6px" justifyContent="center">
164-
<Text color="$captionBold" typography="textSbold">
165-
Bulid Size
166-
</Text>
167-
<Text color="$caption" typography="h5">
168-
84.3MB
169-
</Text>
170-
</VStack>
171-
</VStack>
172-
</VStack>
173-
<VStack
174-
bg="$cardBg"
175-
borderRadius="20px"
176-
flex="1"
177-
gap="40px"
178-
justifyContent="center"
179-
p="30px"
180-
>
181-
<VStack gap="8px">
182-
<Text color="$captionBold" typography="h6">
183-
Kuma UI
184-
</Text>
185-
<Text color="$captionBold" typography="textL">
186-
1.5.9
187-
</Text>
188-
</VStack>
189-
<VStack alignItems="flex-end" gap="20px">
190-
<VStack alignItems="flex-end" gap="6px" justifyContent="center">
191-
<Text color="$captionBold" typography="textSbold">
192-
Bulid Time
193-
</Text>
194-
<Text color="$caption" typography="h5">
195-
20.6s
196-
</Text>
197-
</VStack>
198-
<VStack alignItems="flex-end" gap="6px" justifyContent="center">
199-
<Text color="$captionBold" typography="textSbold">
200-
Bulid Size
201-
</Text>
202-
<Text color="$caption" typography="h5">
203-
60.3B
204-
</Text>
205-
</VStack>
206-
</VStack>
207-
</VStack>
18+
<Flex
19+
alignItems="end"
20+
flexWrap="wrap"
21+
gap="20px"
22+
justifyContent="center"
23+
>
24+
<DevupUICard />
25+
{[
26+
{
27+
title: 'tailwindcss',
28+
version: '4.1.13',
29+
buildTime: '20.22s',
30+
buildSize: '57,415kB',
31+
url: 'https://tailwindcss.com',
32+
},
33+
{
34+
title: 'styleX',
35+
version: '0.15.4',
36+
buildTime: '38.97s',
37+
buildSize: '76,257kB',
38+
url: 'https://stylexjs.com',
39+
},
40+
{
41+
title: 'vanilla-extract',
42+
version: '1.17.4',
43+
buildTime: '20.09s',
44+
buildSize: '59,366kB',
45+
url: 'https://vanilla-extract.style',
46+
},
47+
{
48+
title: 'kuma-ui',
49+
version: '1.5.9',
50+
buildTime: '21.61s',
51+
buildSize: '67,422kB',
52+
url: 'https://kuma-ui.com',
53+
},
54+
{
55+
title: 'panda-css',
56+
version: '1.3.1',
57+
buildTime: '22.01s',
58+
buildSize: '62,431kB',
59+
url: 'https://panda-css.com',
60+
},
61+
{
62+
title: 'chakra-ui',
63+
version: '3.27.0',
64+
buildTime: '29.99s',
65+
buildSize: '210,122kB',
66+
url: 'https://chakra-ui.com',
67+
},
68+
{
69+
title: 'mui',
70+
version: '7.3.2',
71+
buildTime: '22.21s',
72+
buildSize: '94,231kB',
73+
url: 'https://mui.com',
74+
},
75+
].map((item) => (
76+
<OtherCard key={item.title} {...item} />
77+
))}
20878
</Flex>
20979
</VStack>
21080
</VStack>

‎apps/landing/src/app/DevupUICard.tsx‎

Lines changed: 84 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,84 @@
1+
import { Box, Flex, Image, Text, VStack } from '@devup-ui/react'
2+
3+
export function DevupUICard() {
4+
return (
5+
<VStack
6+
bg="$containerBackground"
7+
border="1px solid $border"
8+
borderRadius="20px"
9+
boxShadow="0 0 8px 0 var(--shadow, rgba(135, 135, 135, 0.25))"
10+
gap="60px"
11+
justifyContent="center"
12+
overflow="hidden"
13+
p="30px"
14+
pos="relative"
15+
w="400px"
16+
>
17+
<Image
18+
aspectRatio="1"
19+
bottom="-30px"
20+
opacity="0.2"
21+
pos="absolute"
22+
right="200px"
23+
src="/icons/devup-ui-card.svg"
24+
w="260px"
25+
/>
26+
<VStack gap="8px">
27+
<Text color="$text" typography="h5">
28+
Devup-ui
29+
</Text>
30+
<Text color="$text" typography="textL">
31+
1.0.18
32+
</Text>
33+
</VStack>
34+
<VStack alignItems="flex-end" gap="20px">
35+
<VStack alignItems="flex-end" gap="6px" justifyContent="center">
36+
<Text color="$text" typography="textSbold">
37+
Next.js Build Time
38+
</Text>
39+
<Flex gap="10px">
40+
<Box
41+
aspectRatio="1"
42+
bg="#FFC100"
43+
maskImage="url(/icons/crown.svg)"
44+
maskRepeat="no-repeat"
45+
maskSize="contain"
46+
w="24px"
47+
/>
48+
<Text
49+
backgroundClip="text"
50+
bg="linear-gradient(270deg, #6BB1F2 0%, #8235CA 100%)"
51+
color="transparent"
52+
typography="h4"
53+
>
54+
18.35s
55+
</Text>
56+
</Flex>
57+
</VStack>
58+
<VStack alignItems="flex-end" gap="6px" justifyContent="center">
59+
<Text color="$text" typography="textSbold">
60+
Bulid Size
61+
</Text>
62+
<Flex gap="10px">
63+
<Box
64+
aspectRatio="1"
65+
bg="#FFC100"
66+
maskImage="url(/icons/crown.svg)"
67+
maskRepeat="no-repeat"
68+
maskSize="contain"
69+
w="24px"
70+
/>
71+
<Text
72+
backgroundClip="text"
73+
bg="linear-gradient(270deg, #6BB1F2 0%, #8235CA 100%)"
74+
color="transparent"
75+
typography="h4"
76+
>
77+
57.4MB
78+
</Text>
79+
</Flex>
80+
</VStack>
81+
</VStack>
82+
</VStack>
83+
)
84+
}

0 commit comments

Comments
 (0)