Skip to content

Commit 2a6b72e

Browse files
goenninggoenning
committed
remove chakra
1 parent b2e5e63 commit 2a6b72e

File tree

8 files changed

+398
-1108
lines changed

8 files changed

+398
-1108
lines changed

‎package.json

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -9,8 +9,6 @@
99
"lint": "eslint ."
1010
},
1111
"dependencies": {
12-
"@chakra-ui/core": "1.0.0-rc.5",
13-
"@chakra-ui/theme": "1.0.0-rc.5",
1412
"next": "9.5.5",
1513
"react": "17.0.1",
1614
"react-dom": "17.0.1"
@@ -26,7 +24,9 @@
2624
"eslint-plugin-prettier": "3.1.4",
2725
"eslint-plugin-react": "7.21.5",
2826
"eslint-plugin-react-hooks": "4.2.0",
27+
"postcss-import": "12.0.1",
2928
"prettier": "2.1.2",
29+
"tailwindcss": "1.9.6",
3030
"typescript": "4.0.3"
3131
}
3232
}

‎postcss.config.js

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
// eslint-disable-next-line no-undef
2+
module.exports = {
3+
plugins: ['postcss-import', 'tailwindcss', 'autoprefixer'],
4+
}

‎src/pages/_app.tsx

Lines changed: 4 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,11 @@
1-
import theme from '@chakra-ui/theme'
21
import { AppProps } from 'next/app'
3-
import { ChakraProvider, CSSReset, Box } from '@chakra-ui/core'
42
import React from 'react'
3+
import './globals.css'
54

65
export default function MyApp({ Component, pageProps }: AppProps): JSX.Element {
76
return (
8-
<ChakraProvider theme={theme}>
9-
<CSSReset />
10-
<Box>
11-
<Box maxW="100%" mb={20}>
12-
<Box as="main" minH="72vh" pt={8} px={5} mt="4rem">
13-
<Component {...pageProps} />
14-
</Box>
15-
</Box>
16-
</Box>
17-
</ChakraProvider>
7+
<>
8+
<Component {...pageProps} />
9+
</>
1810
)
1911
}

‎src/pages/globals.css

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
@import "tailwindcss/base";
2+
@import "tailwindcss/components";
3+
@import "tailwindcss/utilities";
4+
5+
h1 {
6+
@apply text-5xl
7+
}
8+
9+
h2 {
10+
@apply text-4xl
11+
}
12+
13+
h3 {
14+
@apply text-3xl
15+
}
16+
17+
h4 {
18+
@apply text-2xl
19+
}
20+
21+
h5 {
22+
@apply text-xl
23+
}
24+
25+
h6 {
26+
@apply text-lg
27+
}

‎src/pages/index.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ export default function Home(): JSX.Element {
77
<Head>
88
<title>Sumbit</title>
99
</Head>
10-
<h1>Hello World</h1>
10+
<h1 className="bg-red-200">Hello World</h1>
1111
</>
1212
)
1313
}

‎src/pages/tools/cloud-ping.tsx

Lines changed: 44 additions & 43 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,6 @@ import React, { useEffect, useState } from 'react'
22
import Head from 'next/head'
33
import { CloudProvider, CloudRegion, getAllCloudRegions, getAllProviders } from '../../data'
44
import { GetStaticPropsResult } from 'next'
5-
import { Checkbox, Heading, Image, Stack, Text } from '@chakra-ui/core'
65

76
interface CloudPingProps {
87
providers: CloudProvider[]
@@ -187,46 +186,43 @@ export default function CloudPing(props: CloudPingProps): JSX.Element {
187186

188187
<img src="" id="url-ping" alt="Ping" style={{ display: 'none' }} />
189188

190-
<Stack isInline spacing={12}>
191-
<Stack marginBottom={6}>
192-
<Heading as="h4" size="md">
193-
Providers
194-
</Heading>
189+
<div className="flex">
190+
<div className="mr-4">
191+
<h4>Providers</h4>
195192
{props.providers.map((provider) => (
196-
<Checkbox key={provider.key} isChecked={selectedProviders.includes(provider.key)} onChange={toggleProviderFilter(provider.key)}>
193+
<div key={provider.key}>
194+
<input type="checkbox" defaultChecked={selectedProviders.includes(provider.key)} onChange={toggleProviderFilter(provider.key)} />
197195
{provider.display_name}
198-
</Checkbox>
196+
</div>
199197
))}
200-
</Stack>
198+
</div>
201199

202-
<Stack>
203-
<Heading as="h4" size="md">
204-
Locations
205-
</Heading>
200+
<div>
201+
<h4>Locations</h4>
206202

207-
<Stack isInline spacing={12}>
203+
<div className="flex">
208204
{Object.keys(props.continents).map((continent) => {
209205
const allSelected = props.continents[continent].some((x) => selectedCountries.includes(x))
210206
return (
211-
<Stack key={continent}>
212-
<Checkbox isChecked={allSelected} onChange={toggleContinentFilter(continent)}>
213-
<Heading as="h6" size="sm">
214-
{continent}
215-
</Heading>
216-
</Checkbox>
217-
<Stack key={continent}>
207+
<div key={continent} className="mr-4">
208+
<div>
209+
<input type="checkbox" defaultChecked={allSelected} onChange={toggleContinentFilter(continent)} />
210+
<h6 className="inline">{continent}</h6>
211+
</div>
212+
<div key={continent}>
218213
{props.continents[continent].map((country) => (
219-
<Checkbox key={country} isChecked={selectedCountries.includes(country)} onChange={toggleCountryFilter(country)}>
220-
<Image htmlWidth="20px" src={`/images/country/${country.toLowerCase()}.svg`} title={country} alt={country} />
221-
</Checkbox>
214+
<div key={country}>
215+
<input type="checkbox" defaultChecked={selectedCountries.includes(country)} onChange={toggleCountryFilter(country)} />
216+
<img className="w-5 inline" src={`/images/country/${country.toLowerCase()}.svg`} title={country} alt={country} />
217+
</div>
222218
))}
223-
</Stack>
224-
</Stack>
219+
</div>
220+
</div>
225221
)
226222
})}
227-
</Stack>
228-
</Stack>
229-
</Stack>
223+
</div>
224+
</div>
225+
</div>
230226

231227
<table style={{ width: '100%', borderSpacing: '5px', borderCollapse: 'separate' }}>
232228
<tbody>
@@ -241,21 +237,26 @@ export default function CloudPing(props: CloudPingProps): JSX.Element {
241237
}}
242238
>
243239
<td>
244-
<Stack margin={2} isInline spacing={4}>
245-
<Image htmlWidth="30px" src={`/images/provider/${x.provider.key}.svg`} title={x.provider.display_name} alt={x.provider.display_name} />
246-
<Stack>
247-
<Text>{x.region.key}</Text>
248-
<Stack isInline>
249-
<Image htmlWidth="20px" src={`/images/country/${x.region.country.toLowerCase()}.svg`} title={x.region.country} alt={x.region.country} />
250-
<Text>&middot;</Text>
251-
<Text>
240+
<div className="flex">
241+
<img className="w-8 inline" src={`/images/provider/${x.provider.key}.svg`} title={x.provider.display_name} alt={x.provider.display_name} />
242+
<div className="ml-4">
243+
<span>{x.region.key}</span>
244+
<div className="flex mt-1">
245+
<img
246+
className="w-5 inline"
247+
src={`/images/country/${x.region.country.toLowerCase()}.svg`}
248+
title={x.region.country}
249+
alt={x.region.country}
250+
/>
251+
<span className="ml-1">&middot;</span>
252+
<span className="ml-1">
252253
{x.region.location}, {x.region.country}
253-
</Text>
254-
<Text>&middot;</Text>
255-
<Text>{x.medianLatency}ms</Text>
256-
</Stack>
257-
</Stack>
258-
</Stack>
254+
</span>
255+
<span className="ml-1">&middot;</span>
256+
<span className="ml-1">{x.medianLatency}ms</span>
257+
</div>
258+
</div>
259+
</div>
259260
</td>
260261
</tr>
261262
)

‎tailwind.config.js

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
// eslint-disable-next-line no-undef
2+
const isProduction = process.env.NODE_ENV === 'production'
3+
4+
// eslint-disable-next-line no-undef
5+
module.exports = {
6+
future: {
7+
removeDeprecatedGapUtilities: true,
8+
purgeLayersByDefault: true,
9+
},
10+
purge: {
11+
enabled: isProduction,
12+
content: ['./src/**/*.tsx', './src/**/*.css'],
13+
},
14+
theme: {
15+
extend: {},
16+
},
17+
variants: {},
18+
plugins: [],
19+
}

0 commit comments

Comments
 (0)