Numbered list

Numbered list.

grants by purdue hackers to fund your ambitious projects
up to $1000 to kickstart a student project at purdue

Code

Copy into src/components/ph/ .

NumberedList.astro

---
type Props = {
  class?: string;
};

const { class: className } = Astro.props;
---

<ol
  class:list={[
    "flex flex-col gap-2 [counter-reset:ph-item]",
    "[&>li]:flex [&>li]:gap-2 [&>li]:leading-[1.35] [&>li]:[counter-increment:ph-item]",
    "[&>li]:before:w-[18px] [&>li]:before:shrink-0 [&>li]:before:font-mono [&>li]:before:font-medium [&>li]:before:content-[counter(ph-item)]",
    className,
  ]}
>
  <slot />
</ol>

Copy into components/ph/ (or src/components/ph/).

numbered-list.tsx

import type { ReactNode } from "react";
import { cn } from "./cn";

type NumberedListProps = {
  children: ReactNode;
  className?: string;
};

export function NumberedList({ children, className }: NumberedListProps) {
  return (
    <ol
      className={cn(
        "flex flex-col gap-2 [counter-reset:ph-item]",
        "[&>li]:flex [&>li]:gap-2 [&>li]:leading-[1.35] [&>li]:[counter-increment:ph-item]",
        "[&>li]:before:w-[18px] [&>li]:before:shrink-0 [&>li]:before:font-mono [&>li]:before:font-medium [&>li]:before:content-[counter(ph-item)]",
        className,
      )}
    >
      {children}
    </ol>
  );
}

cn.ts

export const cn = (...parts: (string | false | null | undefined)[]) => parts.filter(Boolean).join(" ");