62 lines
2.3 KiB
TypeScript
62 lines
2.3 KiB
TypeScript
|
"use client"
|
||
|
|
|
||
|
|
import React, {useCallback, useState} from 'react';
|
||
|
|
import {Button} from "../../src/primitive-components/material-you-components";
|
||
|
|
import axios from "axios";
|
||
|
|
|
||
|
|
export default function Buttons() {
|
||
|
|
|
||
|
|
const [state, setState] = useState(1);
|
||
|
|
|
||
|
|
const callback = useCallback(() =>
|
||
|
|
setState(prevState => prevState + 1)
|
||
|
|
, [state]);
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div className={"m3 m3-wrapper"}>
|
||
|
|
<h1> Buttons </h1>
|
||
|
|
<div style={{display: "flex", flexDirection: "row", gap: "2em"}}>
|
||
|
|
<div>
|
||
|
|
<h2> Default buttons </h2>
|
||
|
|
<div style={{display: "flex", flexDirection: "column", width: "150px", gap: "0.5em"}}>
|
||
|
|
<Button variant={"filled"} onClick={callback}>
|
||
|
|
Label + {state}
|
||
|
|
</Button>
|
||
|
|
<Button variant={"outlined"}>
|
||
|
|
Label
|
||
|
|
</Button>
|
||
|
|
<Button variant={"tonal"}>
|
||
|
|
Label
|
||
|
|
</Button>
|
||
|
|
<Button variant={"elevated"}>
|
||
|
|
Label
|
||
|
|
</Button>
|
||
|
|
<Button variant={"text"}>
|
||
|
|
Label
|
||
|
|
</Button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div>
|
||
|
|
<h2> Buttons with icon </h2>
|
||
|
|
<div style={{display: "flex", flexDirection: "column", width: "150px", gap: "0.5em"}}>
|
||
|
|
<Button variant={"filled"} icon={"add"}>
|
||
|
|
Label
|
||
|
|
</Button>
|
||
|
|
<Button variant={"outlined"} icon={"add"}>
|
||
|
|
Label
|
||
|
|
</Button>
|
||
|
|
<Button variant={"tonal"} icon={"add"}>
|
||
|
|
Label
|
||
|
|
</Button>
|
||
|
|
<Button variant={"elevated"} icon={"add"}>
|
||
|
|
Label
|
||
|
|
</Button>
|
||
|
|
<Button variant={"text"} icon={"add"}>
|
||
|
|
Label
|
||
|
|
</Button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
}
|