ProjectCard

Card component for displaying individual project summaries. Uses compound component pattern for flexible composition.

Import

import { ProjectCard } from '@manningworks/projex'

Usage

Explicit project prop

<ProjectCard>
  <ProjectCard.Header project={project} />
  <ProjectCard.Description project={project} />
  <ProjectCard.Tags project={project} />
  <ProjectCard.Stats project={project} />
  <ProjectCard.Status project={project} />
  <ProjectCard.Links project={project} />
</ProjectCard>

With context (inside SmartProjectGrid or ProjectGridProvider)

When used inside a SmartProjectGrid or ProjectGridProvider, the project prop can be omitted — sub-components will read the project from context:

<SmartProjectGrid projects={projects} showSearch>
  {(project) => (
    <ProjectCard>
      <ProjectCard.Header />
      <ProjectCard.Description />
      <ProjectCard.Tags />
      <ProjectCard.Stats />
      <ProjectCard.Status />
      <ProjectCard.Links />
    </ProjectCard>
  )}
</SmartProjectGrid>

Props

ProjectCard (Root)

Prop	Type	Required	Description
children	React.ReactNode	Yes	Child components to render inside the card
project	ProjexProject	No	Optional project data (used for data attributes on the root element)

ProjectCard.Header

Prop	Type	Required	Description
project	ProjexProject	No	Project data to display. Falls back to context if omitted.

ProjectCard.Description

Prop	Type	Required	Description
project	ProjexProject	No	Project data to display. Falls back to context if omitted.

Returns null if project.description is empty.

ProjectCard.Tags

Prop	Type	Required	Description
project	ProjexProject	No	Project data to display. Falls back to context if omitted.

Returns null if project.stack is empty.

ProjectCard.Stats

Prop	Type	Required	Description
project	ProjexProject	No	Project data to display. Falls back to context if omitted.

Returns null if project.stats is empty or contains no values.

ProjectCard.Status

Prop	Type	Required	Description
project	ProjexProject	No	Project data to display. Falls back to context if omitted.

ProjectCard.Links

Prop	Type	Required	Description
project	ProjexProject	No	Project data to display. Falls back to context if omitted.

Returns null if no links are available.

Data Attributes

Attribute	Value	Description
data-projex-card	-	Root card container
data-projex-card-header	-	Header section
data-projex-card-description	-	Description section
data-projex-card-tags	-	Tags container
data-projex-card-stats	-	Stats container
data-projex-card-links	-	Links container
data-projex-status	-	Status badge
data-projex-status-value	active | shipped | ...	Current status
data-projex-type	-	Type badge
data-projex-type-value	github | npm | ...	Project type
data-projex-tag	-	Individual tag
data-projex-link	-	Link element
data-projex-link-type	github | live | docs | demo | npm | product-hunt | custom	Link type
data-projex-link-label	string	Custom link label
data-projex-stat	stars | forks | downloads | version | upvotes | comments	Stat type
data-projex-github-card	-	Present when project type is 'github'
data-projex-og-image	string	OpenGraph image URL (if project has image)
data-projex-og-title	string	OpenGraph title (project name)
data-projex-og-description	string	OpenGraph description (if project has description)

Example

import { ProjectCard } from '@manningworks/projex'

function ProjectShowcase({ projects }) {
  return (
    <div className="grid grid-cols-3 gap-4">
      {projects.map((project) => (
        <ProjectCard key={project.id}>
          <ProjectCard.Header project={project} />
          <ProjectCard.Description project={project} />
          <ProjectCard.Tags project={project} />
          <ProjectCard.Stats project={project} />
          <ProjectCard.Status project={project} />
          <ProjectCard.Links project={project} />
        </ProjectCard>
      ))}
    </div>
  )
}