2021-04-20 22:23:35 +00:00
|
|
|
import {useState} from "react"
|
|
|
|
import classNames from "classnames"
|
|
|
|
import Style from "./App.module.css"
|
2021-04-20 23:03:59 +00:00
|
|
|
import BoxWithHeader from "./components/BoxWithHeader"
|
2021-04-21 01:32:19 +00:00
|
|
|
import Button from "./components/Button"
|
2021-04-21 01:57:18 +00:00
|
|
|
import { faArchive, faArrowRight, faExclamationTriangle, faSearch, faTrash } from "@fortawesome/free-solid-svg-icons"
|
|
|
|
import Input from "./components/Input"
|
|
|
|
import InputWithIcon from "./components/InputWithIcon"
|
2021-04-20 22:09:13 +00:00
|
|
|
|
2021-04-20 22:07:39 +00:00
|
|
|
|
2021-04-20 22:23:35 +00:00
|
|
|
export default function App() {
|
2021-04-20 22:37:25 +00:00
|
|
|
const [theme, ] = useState("ThemeDark");
|
2021-04-20 22:23:35 +00:00
|
|
|
|
2021-04-20 22:09:13 +00:00
|
|
|
return (
|
2021-04-20 23:03:59 +00:00
|
|
|
<div className={classNames(Style.App, theme)}>
|
|
|
|
<BoxWithHeader
|
2021-04-21 01:32:19 +00:00
|
|
|
header={"Sto provando i bottoni!"}
|
2021-04-20 23:27:12 +00:00
|
|
|
>
|
|
|
|
<div>
|
2021-04-20 23:22:31 +00:00
|
|
|
<div>
|
2021-04-21 01:32:19 +00:00
|
|
|
Ammirate:
|
2021-04-20 23:22:31 +00:00
|
|
|
</div>
|
2021-04-20 23:27:12 +00:00
|
|
|
<div>
|
2021-04-21 01:32:19 +00:00
|
|
|
<Button color={"Green"} icon={faArrowRight}>Verde</Button>
|
|
|
|
<Button color={"Grey"} icon={faArchive}>Grigio</Button>
|
|
|
|
<Button color={"Yellow"} icon={faExclamationTriangle}>Giallo</Button>
|
|
|
|
<Button color={"Red"} icon={faTrash}>Rosso</Button>
|
2021-04-20 23:27:12 +00:00
|
|
|
</div>
|
2021-04-21 01:57:18 +00:00
|
|
|
<div>
|
|
|
|
E già che ci siamo, un Input, con e senza icona:
|
|
|
|
</div>
|
|
|
|
<div>
|
|
|
|
<Input/> <InputWithIcon icon={faSearch}/>
|
|
|
|
</div>
|
2021-04-20 23:27:12 +00:00
|
|
|
</div>
|
|
|
|
</BoxWithHeader>
|
2021-04-20 22:09:13 +00:00
|
|
|
</div>
|
|
|
|
)
|
2021-04-20 22:07:39 +00:00
|
|
|
}
|