54 lines
1.4 KiB
TypeScript
54 lines
1.4 KiB
TypeScript
import { JSX } from "preact/jsx-runtime";
|
|
import { Main, render_and_copy } from "./common.tsx";
|
|
import { ComponentChild, ComponentChildren, toChildArray } from "preact";
|
|
|
|
const Circle = ({
|
|
style,
|
|
children,
|
|
}: {
|
|
style?: JSX.CSSProperties;
|
|
children?: ComponentChildren;
|
|
}) => {
|
|
let children_: ComponentChild[] = toChildArray(children);
|
|
if (children_.length > 0) {
|
|
const turn_per_child = 1 / children_.length;
|
|
children_ = children_.map((c, i) => (
|
|
<div
|
|
style={{
|
|
transform: `translate(50%, 50%) rotate(${
|
|
turn_per_child * i
|
|
}turn)`,
|
|
width: "fit-content",
|
|
}}
|
|
>
|
|
{c}
|
|
</div>
|
|
));
|
|
}
|
|
|
|
return (
|
|
<div
|
|
style={{
|
|
aspectRatio: "1",
|
|
borderRadius: "413413px",
|
|
marginLeft: "auto",
|
|
marginRight: "auto",
|
|
...style,
|
|
}}
|
|
children={children_}
|
|
></div>
|
|
);
|
|
};
|
|
|
|
render_and_copy(
|
|
<Main style={{ width: "100%", aspectRatio: "1" }}>
|
|
<Circle style={{ backgroundColor: "red" }}>
|
|
<div>hello</div>
|
|
<div>hello</div>
|
|
<div>hello</div>
|
|
<div>hello</div>
|
|
<div>hello</div>
|
|
</Circle>
|
|
</Main>
|
|
);
|