Skip to content
This repository was archived by the owner on Apr 5, 2024. It is now read-only.

Commit 405d269

Browse files
FabianHummelFabianHummel
committed
Project Setup
1 parent ee29bdc commit 405d269

12 files changed

+1822
-75
lines changed

‎bun.lockb

1.78 KB
Binary file not shown.

‎package.json

+5-1
Original file line numberDiff line numberDiff line change
@@ -10,8 +10,12 @@
1010
"preview": "vite preview"
1111
},
1212
"dependencies": {
13+
"path": "^0.12.7",
1314
"react": "^18.2.0",
14-
"react-dom": "^18.2.0"
15+
"react-dom": "^18.2.0",
16+
"react-split": "^2.0.14",
17+
"react-tabs": "^6.0.2",
18+
"remixicon-react": "^1.0.0"
1519
},
1620
"devDependencies": {
1721
"@types/react": "^18.2.15",

‎src/App.css

+7-40
Original file line numberDiff line numberDiff line change
@@ -1,42 +1,9 @@
1-
#root {
2-
max-width: 1280px;
3-
margin: 0 auto;
4-
padding: 2rem;
5-
text-align: center;
6-
}
7-
8-
.logo {
9-
height: 6em;
10-
padding: 1.5em;
11-
will-change: filter;
12-
transition: filter 300ms;
13-
}
14-
.logo:hover {
15-
filter: drop-shadow(0 0 2em #646cffaa);
16-
}
17-
.logo.react:hover {
18-
filter: drop-shadow(0 0 2em #61dafbaa);
19-
}
20-
21-
@keyframes logo-spin {
22-
from {
23-
transform: rotate(0deg);
24-
}
25-
to {
26-
transform: rotate(360deg);
27-
}
1+
:root {
2+
--header-height: 3rem;
283
}
294

30-
@media (prefers-reduced-motion: no-preference) {
31-
a:nth-of-type(2) .logo {
32-
animation: logo-spin infinite 20s linear;
33-
}
34-
}
35-
36-
.card {
37-
padding: 2em;
38-
}
39-
40-
.read-the-docs {
41-
color: #888;
42-
}
5+
#root {
6+
display: grid;
7+
grid-template-rows: var(--header-height) auto;
8+
height: 100vh;
9+
}

‎src/App.tsx

+45-1
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,52 @@
11
import './App.css'
2+
import { Tab, TabList, TabPanel, Tabs } from 'react-tabs'
3+
import { useState } from 'react'
4+
import TabProps from './model/Tab'
5+
import '@styles/react-tabs.css'
6+
import CloseIcon from 'remixicon-react/CloseLineIcon';
7+
import HomeIcon from 'remixicon-react/Home2FillIcon';
8+
import Music from '@components/Music'
29

310
function App() {
11+
12+
const [tabs, setTabs] = useState<TabProps[]>([{
13+
name: "test",
14+
content: <Music />
15+
},{
16+
name: "test2",
17+
content: <h2>test2</h2>
18+
},{
19+
name: "test3",
20+
content: <h3>test3</h3>
21+
},])
22+
23+
const [selectedTab, setSelectedTab] = useState(0);
24+
425
return (
5-
<h1>Harmony Hub</h1>
26+
<Tabs style={{"display": "contents"}} onSelect={(index) => setSelectedTab(index)}>
27+
<TabList>
28+
<Tab key={0}>
29+
<HomeIcon size="1.2rem" />
30+
</Tab>
31+
{ tabs.map((tab, i) =>
32+
<Tab key={i+1}>
33+
<>
34+
{tab.name}
35+
<CloseIcon size="1.2rem" className='close-btn' role="button" onClick={() => {
36+
tabs.splice(i,1) && setTabs([...tabs])
37+
}} />
38+
</>
39+
</Tab>
40+
) }
41+
</TabList>
42+
43+
<TabPanel hidden={selectedTab != 0} key={0}>
44+
<h1>Home</h1>
45+
</TabPanel>
46+
{ tabs.map((tab, i) =>
47+
<TabPanel hidden={selectedTab != i+1} key={i+1}>{tab.content}</TabPanel>
48+
) }
49+
</Tabs>
650
)
751
}
852

‎src/components/Home.tsx

+7
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
export default function Home() {
2+
return (
3+
<div>
4+
5+
</div>
6+
)
7+
}

‎src/components/Music.tsx

+17
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
import Split from "react-split";
2+
3+
export default function Home() {
4+
return (
5+
<Split
6+
sizes={[70, 30]}
7+
minSize={100}
8+
gutterSize={1}
9+
snapOffset={20}
10+
gutterAlign=''
11+
direction="vertical"
12+
cursor="row-resize">
13+
<section />
14+
<section />
15+
</Split>
16+
)
17+
}

‎src/index.css

+26-32
Original file line numberDiff line numberDiff line change
@@ -25,45 +25,39 @@ a:hover {
2525

2626
body {
2727
margin: 0;
28-
display: flex;
29-
place-items: center;
3028
min-width: 320px;
3129
min-height: 100vh;
3230
}
3331

34-
h1 {
35-
font-size: 3.2em;
36-
line-height: 1.1;
32+
.gutter {
33+
position: relative;
34+
background: #303030;
3735
}
3836

39-
button {
40-
border-radius: 8px;
41-
border: 1px solid transparent;
42-
padding: 0.6em 1.2em;
43-
font-size: 1em;
44-
font-weight: 500;
45-
font-family: inherit;
46-
background-color: #1a1a1a;
47-
cursor: pointer;
48-
transition: border-color 0.25s;
49-
}
50-
button:hover {
51-
border-color: #646cff;
37+
.gutter.gutter-vertical:hover {
38+
cursor: ns-resize;
5239
}
53-
button:focus,
54-
button:focus-visible {
55-
outline: 4px auto -webkit-focus-ring-color;
40+
41+
.gutter.gutter-vertical::after {
42+
content: "";
43+
display: block;
44+
height: 10px;
45+
width: 100%;
46+
position: absolute;
47+
top: -5px;
48+
z-index: 10;
5649
}
5750

58-
@media (prefers-color-scheme: light) {
59-
:root {
60-
color: #213547;
61-
background-color: #ffffff;
62-
}
63-
a:hover {
64-
color: #747bff;
65-
}
66-
button {
67-
background-color: #f9f9f9;
68-
}
51+
.gutter.gutter-horizontal:hover {
52+
cursor: ew-resize;
6953
}
54+
55+
.gutter.gutter-horizontal::after {
56+
content: "";
57+
display: block;
58+
height: 100%;
59+
width: 10px;
60+
position: absolute;
61+
left: -5px;
62+
z-index: 10;
63+
}

‎src/model/Tab.ts

+4
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
export default interface Tab {
2+
name: string,
3+
content: React.ReactNode
4+
}

‎src/styles/react-tabs.css

+56
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,56 @@
1+
.react-tabs {
2+
-webkit-tap-highlight-color: transparent;
3+
}
4+
5+
.react-tabs__tab-list {
6+
display: flex;
7+
height: var(--header-height);
8+
border-bottom: 1px solid #303030;
9+
margin: 0;
10+
padding: 0;
11+
}
12+
13+
.react-tabs__tab-panel--selected {
14+
display: grid;
15+
}
16+
17+
.react-tabs__tab {
18+
background: #242424;
19+
color: lightgray;
20+
position: relative;
21+
list-style: none;
22+
padding: 6px 12px;
23+
cursor: pointer;
24+
text-align: left;
25+
display: flex;
26+
align-items: center;
27+
}
28+
29+
.react-tabs__tab .close-btn {
30+
margin-left: 0.5rem;
31+
padding: 2px;
32+
border-radius: 2px;
33+
}
34+
35+
.react-tabs__tab:not(.react-tabs__tab--disabled) .close-btn:hover {
36+
background: #545454;
37+
}
38+
39+
.react-tabs__tab:not(.react-tabs__tab--disabled) .close-btn:active {
40+
background: #626262;
41+
}
42+
43+
.react-tabs__tab:not(.react-tabs__tab--disabled):hover {
44+
background: #303030;
45+
}
46+
47+
.react-tabs__tab--selected {
48+
background: #363636;
49+
color: white;
50+
}
51+
52+
.react-tabs__tab--disabled {
53+
background: #191919;
54+
color: lightgray;
55+
cursor: default;
56+
}

‎tsconfig.json

+15-1
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,21 @@
1818
"strict": true,
1919
"noUnusedLocals": true,
2020
"noUnusedParameters": true,
21-
"noFallthroughCasesInSwitch": true
21+
"noFallthroughCasesInSwitch": true,
22+
"paths": {
23+
"@components/*": [
24+
"./src/components/*"
25+
],
26+
"@models/*": [
27+
"./src/model/*"
28+
],
29+
"@styles/*": [
30+
"./src/styles/*"
31+
],
32+
"@src/*": [
33+
"./src/*"
34+
],
35+
}
2236
},
2337
"include": ["src"],
2438
"references": [{ "path": "./tsconfig.node.json" }]

‎vite.config.ts

+9
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,16 @@
11
import { defineConfig } from 'vite'
2+
import path from 'path';
23
import react from '@vitejs/plugin-react'
34

45
// https://vitejs.dev/config/
56
export default defineConfig({
67
plugins: [react()],
8+
resolve: {
9+
alias: {
10+
"@components": path.resolve("./src/components"),
11+
"@models": path.resolve("./src/model"),
12+
"@styles": path.resolve("./src/styles"),
13+
"@src": path.resolve("./src"),
14+
},
15+
},
716
})

0 commit comments

Comments
 (0)