mirror of
https://github.com/pds-nest/nest.git
synced 2024-11-25 06:24:19 +00:00
✨ Add base Box component
This commit is contained in:
parent
68cbc25d86
commit
1d35c53820
3 changed files with 32 additions and 2 deletions
|
@ -1,14 +1,22 @@
|
||||||
import {useState} from "react"
|
import {useState} from "react"
|
||||||
import classNames from "classnames"
|
import classNames from "classnames"
|
||||||
import Style from "./App.module.css"
|
import Style from "./App.module.css"
|
||||||
|
import Box from "./components/Box"
|
||||||
|
|
||||||
|
|
||||||
export default function App() {
|
export default function App() {
|
||||||
const [theme, setTheme] = useState("theme-dark");
|
const [theme, ] = useState("theme-dark");
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className={classNames(Style["app"], theme)}>
|
<div className={classNames(Style["app"], theme)}>
|
||||||
Ciao mondo!
|
<Box direction={"column"}>
|
||||||
|
<div>
|
||||||
|
Ciao
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
mondo!
|
||||||
|
</div>
|
||||||
|
</Box>
|
||||||
</div>
|
</div>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
15
code/frontend/src/components/Box.js
Normal file
15
code/frontend/src/components/Box.js
Normal file
|
@ -0,0 +1,15 @@
|
||||||
|
import React from "react"
|
||||||
|
import Style from "./Box.module.css"
|
||||||
|
import classNames from "classnames"
|
||||||
|
|
||||||
|
|
||||||
|
export default function Box({ children, className, ...props }) {
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
className={classNames(Style.Box, className)}
|
||||||
|
{...props}
|
||||||
|
>
|
||||||
|
{children}
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
7
code/frontend/src/components/Box.module.css
Normal file
7
code/frontend/src/components/Box.module.css
Normal file
|
@ -0,0 +1,7 @@
|
||||||
|
.Box {
|
||||||
|
display: flex;
|
||||||
|
|
||||||
|
background-color: var(--bg-light);
|
||||||
|
border-radius: 999999px;
|
||||||
|
}
|
||||||
|
|
Loading…
Reference in a new issue