112 lines
2.9 KiB
TypeScript
112 lines
2.9 KiB
TypeScript
import {
|
|
AlignBottomIcon,
|
|
AlignCenterHorizontallyIcon,
|
|
AlignCenterVerticallyIcon,
|
|
AlignLeftIcon,
|
|
AlignRightIcon,
|
|
AlignTopIcon,
|
|
SpaceEvenlyHorizontallyIcon,
|
|
SpaceEvenlyVerticallyIcon,
|
|
StretchHorizontallyIcon,
|
|
StretchVerticallyIcon,
|
|
} from "@radix-ui/react-icons"
|
|
import { IconButton } from "components/shared"
|
|
import state from "state"
|
|
import styled from "styles"
|
|
import { AlignType, DistributeType, StretchType } from "types"
|
|
|
|
function alignTop() {
|
|
state.send("ALIGNED", { type: AlignType.Top })
|
|
}
|
|
|
|
function alignCenterVertical() {
|
|
state.send("ALIGNED", { type: AlignType.CenterVertical })
|
|
}
|
|
|
|
function alignBottom() {
|
|
state.send("ALIGNED", { type: AlignType.Bottom })
|
|
}
|
|
|
|
function stretchVertically() {
|
|
state.send("STRETCHED", { type: StretchType.Vertical })
|
|
}
|
|
|
|
function distributeVertically() {
|
|
state.send("DISTRIBUTED", { type: DistributeType.Vertical })
|
|
}
|
|
|
|
function alignLeft() {
|
|
state.send("ALIGNED", { type: AlignType.Left })
|
|
}
|
|
|
|
function alignCenterHorizontal() {
|
|
state.send("ALIGNED", { type: AlignType.CenterHorizontal })
|
|
}
|
|
|
|
function alignRight() {
|
|
state.send("ALIGNED", { type: AlignType.Right })
|
|
}
|
|
|
|
function stretchHorizontally() {
|
|
state.send("STRETCHED", { type: StretchType.Horizontal })
|
|
}
|
|
|
|
function distributeHorizontally() {
|
|
state.send("DISTRIBUTED", { type: DistributeType.Horizontal })
|
|
}
|
|
|
|
export default function AlignDistribute({
|
|
hasTwoOrMore,
|
|
hasThreeOrMore,
|
|
}: {
|
|
hasTwoOrMore: boolean
|
|
hasThreeOrMore: boolean
|
|
}) {
|
|
return (
|
|
<Container>
|
|
<IconButton disabled={!hasTwoOrMore} onClick={alignLeft}>
|
|
<AlignLeftIcon />
|
|
</IconButton>
|
|
<IconButton disabled={!hasTwoOrMore} onClick={alignCenterHorizontal}>
|
|
<AlignCenterHorizontallyIcon />
|
|
</IconButton>
|
|
<IconButton disabled={!hasTwoOrMore} onClick={alignRight}>
|
|
<AlignRightIcon />
|
|
</IconButton>
|
|
<IconButton disabled={!hasTwoOrMore} onClick={stretchHorizontally}>
|
|
<StretchHorizontallyIcon />
|
|
</IconButton>
|
|
<IconButton disabled={!hasThreeOrMore} onClick={distributeHorizontally}>
|
|
<SpaceEvenlyHorizontallyIcon />
|
|
</IconButton>
|
|
<IconButton disabled={!hasTwoOrMore} onClick={alignTop}>
|
|
<AlignTopIcon />
|
|
</IconButton>
|
|
<IconButton disabled={!hasTwoOrMore} onClick={alignCenterVertical}>
|
|
<AlignCenterVerticallyIcon />
|
|
</IconButton>
|
|
<IconButton disabled={!hasTwoOrMore} onClick={alignBottom}>
|
|
<AlignBottomIcon />
|
|
</IconButton>
|
|
<IconButton disabled={!hasTwoOrMore} onClick={stretchVertically}>
|
|
<StretchVerticallyIcon />
|
|
</IconButton>
|
|
<IconButton disabled={!hasThreeOrMore} onClick={distributeVertically}>
|
|
<SpaceEvenlyVerticallyIcon />
|
|
</IconButton>
|
|
</Container>
|
|
)
|
|
}
|
|
|
|
const Container = styled("div", {
|
|
display: "grid",
|
|
padding: 4,
|
|
gridTemplateColumns: "repeat(5, auto)",
|
|
[`& ${IconButton}`]: {
|
|
color: "$text",
|
|
},
|
|
[`& ${IconButton} > svg`]: {
|
|
fill: "red",
|
|
stroke: "transparent",
|
|
},
|
|
})
|