curio.
no. 24 · projects

Status rows

Rows with a live/archived dot and tech tags.

Preview

Install

npx shadcn@latest add https://curio-components.vercel.app/r/project-status-rows.json

First curio component? Also add @import "./curio.css"; to your global CSS. See installation.

Usage

import { ProjectStatusRows } from '@/components/curio/projects/project-status-rows'

const projects = [
  { name: 'lumen', description: 'A calm reading app.', url: 'https://...', year: '2026', tags: ['next.js'] },
  { name: 'pocketlog', description: 'A cli for daily logs.', url: 'https://...', year: '2025', tags: ['rust'] },
]

export function Work() {
  return <ProjectStatusRows items={projects} />
}

Status: "live" shows a green dot.

Props

PropTypeDefaultDescription
itemsProject[]-Name, description, url, year, tags?, image?, status?

Source

This is exactly what the command copies into your project.

components/curio/projects/project-status-rows.tsx
import type { Project } from '../lib/types'
import { external } from './project-parts'

// rows with a live/archived dot and the tech on the right
export function ProjectStatusRows({ items }: { items: Project[] }) {
  return (
    <div>
      {items.map((p) => (
        <a
          key={p.name}
          {...external(p)}
          className="group flex items-center gap-3 border-b py-2.5 text-[15px] transition-colors hover:text-[var(--curio-accent)]"
          style={{ borderColor: 'var(--curio-border)', color: 'var(--curio-fg)' }}
        >
          <span
            className="h-[7px] w-[7px] shrink-0 rounded-full"
            style={{ background: p.status === 'live' ? '#22a55a' : 'var(--curio-muted)' }}
            title={p.status ?? 'archived'}
          />
          <span className="shrink-0">{p.name}</span>
          <span className="hidden text-[11px] capitalize sm:inline" style={{ color: 'var(--curio-muted)' }}>
            {p.status ?? 'archived'}
          </span>
          <span className="ml-auto hidden gap-1 text-[11px] sm:flex" style={{ color: 'var(--curio-muted)' }}>
            {p.tags?.map((t) => (
              <span key={t} className="rounded-md border px-1.5" style={{ borderColor: 'var(--curio-border)' }}>
                {t}
              </span>
            ))}
          </span>
          <span className="ml-auto shrink-0 text-xs sm:ml-2" style={{ color: 'var(--curio-muted)' }}>
            {p.year}
          </span>
        </a>
      ))}
    </div>
  )
}
components/curio/projects/project-parts.tsx
import type { Project } from '../lib/types'

export function ProjectThumb({ project: p, className = '' }: { project: Project; className?: string }) {
  if (p.image) {
    // eslint-disable-next-line @next/next/no-img-element
    return <img src={p.image} alt="" className={`object-cover object-top ${className}`} />
  }
  return (
    <span
      className={`flex items-center justify-center text-[28px] font-medium ${className}`}
      style={{ background: 'var(--curio-accent)', color: 'var(--curio-on-accent)' }}
    >
      {p.name[0]}
    </span>
  )
}

export function ProjectTags({ project: p, className = '' }: { project: Project; className?: string }) {
  if (!p.tags?.length) return null
  return (
    <span className={`flex flex-wrap gap-1.5 text-[11px] ${className}`} style={{ color: 'var(--curio-muted)' }}>
      {p.tags.map((t) => (
        <span key={t} className="rounded-md border px-1.5 py-px" style={{ borderColor: 'var(--curio-border)' }}>
          {t}
        </span>
      ))}
    </span>
  )
}

export const external = (p: Project) => ({ href: p.url, target: '_blank', rel: 'noopener noreferrer' })

export function Arrow() {
  return (
    <svg viewBox="0 0 10 10" width={10} height={10} fill="none" stroke="currentColor" strokeWidth="1.4" aria-hidden="true">
      <path d="M2.5 7.5 7.5 2.5M3.5 2.5h4v4" />
    </svg>
  )
}
← Project tilesHover cards →