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 classNames from "classnames"
|
||||
import Style from "./App.module.css"
|
||||
import Box from "./components/Box"
|
||||
|
||||
|
||||
export default function App() {
|
||||
const [theme, setTheme] = useState("theme-dark");
|
||||
const [theme, ] = useState("theme-dark");
|
||||
|
||||
return (
|
||||
<div className={classNames(Style["app"], theme)}>
|
||||
Ciao mondo!
|
||||
<Box direction={"column"}>
|
||||
<div>
|
||||
Ciao
|
||||
</div>
|
||||
<div>
|
||||
mondo!
|
||||
</div>
|
||||
</Box>
|
||||
</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