24 lines
697 B
TypeScript
24 lines
697 B
TypeScript
import { FunctionComponent, toChildArray } from "preact";
|
|
|
|
export const OL: FunctionComponent<{ color?: string }> = (props) => {
|
|
const childs = toChildArray(props.children);
|
|
props.color = props.color || "bg-sky";
|
|
return (
|
|
<ol>
|
|
{childs.map((c, i) => (
|
|
<li class="flex gap-4 p-1 even:bg-black/10">
|
|
<div
|
|
class={`w-16 h-16 relative p-2 ${props.color} rounded-md text-white`}
|
|
>
|
|
<span class="text-6xl font-pixel absolute -bottom-1 right-0 text-smoke-800/30">
|
|
{i + 1}
|
|
</span>
|
|
<span class="text-5xl font-pixel">{i + 1}</span>
|
|
</div>
|
|
{c}
|
|
</li>
|
|
))}
|
|
</ol>
|
|
);
|
|
};
|