37 lines
904 B
TypeScript
37 lines
904 B
TypeScript
import styled from "styled-components";
|
|
import { Button } from "../styles";
|
|
import type { UseSettings } from "../use/use-settings";
|
|
import { GRID } from "../interface";
|
|
|
|
const Wrapper = styled.div`
|
|
height: calc(100% - 8px);
|
|
border-right: 1px solid white;
|
|
margin: 4px 0px;
|
|
padding-right: 4px;
|
|
width: 40px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
flex-wrap: wrap;
|
|
button {
|
|
flex-grow: 1;
|
|
}
|
|
`;
|
|
|
|
export function PaperGuideSelector({ setSettings, settings }: UseSettings) {
|
|
return (
|
|
<Wrapper>
|
|
{GRID.map((e, i) => (
|
|
<Button
|
|
$active={e === settings.grid}
|
|
key={i}
|
|
onClick={() => {
|
|
setSettings({ grid: e });
|
|
}}
|
|
>
|
|
{e}
|
|
</Button>
|
|
))}
|
|
</Wrapper>
|
|
);
|
|
}
|