-
-
Notifications
You must be signed in to change notification settings - Fork 122
/
index.tsx
96 lines (87 loc) · 2.71 KB
/
index.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
import { Fragment } from 'react';
import styled from 'styled-components';
import { Link } from 'react-router-dom';
import CodeMirror from '@uiw/react-codemirror';
import { color } from '@uiw/codemirror-extensions-color';
import { langs } from '@uiw/codemirror-extensions-langs';
import { SiderMenus } from '../themes/SiderMenus';
import { Warpper } from '../../../components/Warpper';
import { themeData } from '../themes/Datas';
import { toSnakeCase } from '../themes/Document';
export const toTitleCase = (str: string = '') =>
str
.match(/[A-Z]{2,}(?=[A-Z][a-z]+[0-9]*|\b)|[A-Z]?[a-z]+[0-9]*|[A-Z]|[0-9]+/g)
?.map((x) => x.charAt(0).toUpperCase() + x.slice(1))
.join(' ');
const ThemesWarpper = styled.div`
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 2.5rem;
display: grid;
padding: 2.6rem;
a {
text-decoration: none;
}
@media (max-width: 1280px) {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
@media (max-width: 1024px) {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (max-width: 860px) {
grid-template-columns: repeat(1, minmax(0, 1fr));
}
`;
const ThemeCard = styled.div`
padding: 1rem;
box-shadow: 0 0 #0000, 0 0 #0000, 0 0 #0000, 0 1px 2px 0 rgba(0, 0, 0, 0.05);
border-radius: 0.5rem;
border: 1px solid var(--color-neutral-muted);
background-color: var(--color-canvas-subtle);
transition-property: all;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 0.2s;
&:hover {
transform: translate(0, -0.25rem) rotate(0) skewX(0) skewY(0) scaleX(1) scaleY(1);
}
`;
const Title = styled.div`
font-weight: 600;
padding-bottom: 0.68rem;
`;
const codeString = `import React, {useState} from 'react';
// My favorite component
const Counter = () => {
const [value, setValue] = useState(0);
return <span>{value}</span>;
};`;
const CodeEditor = styled(CodeMirror)`
border-radius: 0.375rem;
overflow: hidden;
`;
export function ThemesHome() {
return (
<Fragment>
<SiderMenus />
<Warpper>
<ThemesWarpper>
{Object.keys(themeData).map((name, idx) => {
const [_name, _theme] = toSnakeCase(name) || [];
return (
<Link key={idx} to={`/theme/data/${_name}${_theme ? `/${_theme}` : ''}`}>
<ThemeCard>
<Title>{toTitleCase(name)}</Title>
<CodeEditor
value={codeString}
height="165px"
theme={themeData[name as keyof typeof themeData]}
extensions={[color, langs.jsx()]}
/>
</ThemeCard>
</Link>
);
})}
</ThemesWarpper>
</Warpper>
</Fragment>
);
}