remix-demo

react router (remix) demo

git clone https://9o.is/git/remix-demo.git

Timeline.tsx

(652B)

      1 import type { ReactNode } from "react";
      2 
      3 interface Value {
      4   id: string;
      5   date: string;
      6   node: ReactNode;
      7 }
      8 
      9 interface TimelineProps {
     10   values: Value[];
     11 }
     12 
     13 export default function Timeline({ values }: TimelineProps) {
     14   return (
     15     <ol className="relative my-4 border-l border-gray-200">
     16       {values.map(({ id, date, node }) => (
     17         <li tabIndex={0} key={id} className="mb-8 ml-4 rounded border p-2">
     18           <div className="absolute -left-1.5 mt-1.5 h-3 w-3 rounded-full border border-white bg-gray-200"></div>
     19           <time className="mb-1 text-sm text-gray-400">{date}</time>
     20           {node}
     21         </li>
     22       ))}
     23     </ol>
     24   );
     25 }