Timeline day

export default function TimelineDayRecipe() {
  return (
    <div
      className="relative pl-8"
      style={{
        backgroundImage: 'linear-gradient(to bottom, var(--color-border), transparent)',
        backgroundRepeat: 'no-repeat',
        backgroundSize: '1px calc(100% - 16px)',
        backgroundPosition: '8px 8px',
      }}
    >
      <div className="space-y-6">
        {[
          {
            date: 'Apr 24 · Wed',
            delta: '+0.3 ↑',
            entries: [
              { ttl: 'Twitter — coaching', meta: 'L3 · 45 MIN · 3.7' },
              { ttl: 'Quorum primer reread', meta: '4 MIN' },
            ],
          },
          {
            date: 'Apr 22 · Mon',
            delta: '+0.1 ↑',
            entries: [{ ttl: 'URL shortener', meta: 'L1 · 30 MIN · 4.1' }],
          },
        ].map((day) => (
          <div key={day.date} className="relative space-y-3">
            <span
              className="absolute top-1 h-[9px] w-[9px] rounded-full"
              style={{
                left: '-28px',
                background: 'var(--color-brand)',
                boxShadow: '0 0 0 3px var(--bg-page), 0 0 12px var(--color-brand-overlay-30)',
              }}
              aria-hidden
            />
            <p className="text-ink-3 text-2xs flex items-center gap-2.5 font-mono font-bold tracking-[0.06em] uppercase">
              <span>{day.date}</span>
              <span style={{ color: 'var(--color-success-text)' }}>{day.delta}</span>
            </p>
            <div className="space-y-2">
              {day.entries.map((entry) => (
                <div
                  key={entry.ttl}
                  className="bg-surface border-stroke grid grid-cols-[1fr_auto_auto] items-center gap-3 rounded-xl border px-[18px] py-[14px]"
                >
                  <p className="text-ink-1 text-sm font-medium">{entry.ttl}</p>
                  <span className="inline-flex gap-0.5">
                    <span className="h-1.5 w-1.5 rounded-full bg-[var(--color-success)]" />
                    <span className="h-1.5 w-1.5 rounded-full bg-[var(--color-success)]" />
                    <span className="h-1.5 w-1.5 rounded-full bg-[var(--color-success)]" />
                    <span className="h-1.5 w-1.5 rounded-full bg-[var(--color-success)]" />
                    <span className="h-1.5 w-1.5 rounded-full bg-[var(--color-success)]" />
                  </span>
                  <span className="text-ink-1 font-mono text-lg font-semibold">3.4</span>
                </div>
              ))}
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}