diff options
Diffstat (limited to 'examples/snowpack/src/components/Card.jsx')
-rw-r--r-- | examples/snowpack/src/components/Card.jsx | 36 |
1 files changed, 36 insertions, 0 deletions
diff --git a/examples/snowpack/src/components/Card.jsx b/examples/snowpack/src/components/Card.jsx new file mode 100644 index 000000000..ee9460dcf --- /dev/null +++ b/examples/snowpack/src/components/Card.jsx @@ -0,0 +1,36 @@ +import { h } from 'preact'; +import { format as formatDate, parseISO } from 'date-fns'; +import './Card.css'; + +export default function Card({ item }) { + return ( + <article class="card"> + <a + href={item.url} + style="text-decoration: none; color: initial; flex-grow: 1;" + > + {item.img ? ( + <img + class="card-image card-image__sm" + src={item.img} + alt="" + style={{ background: item.imgBackground || undefined }} + /> + ) : ( + <div class="card-image card-image__sm"></div> + )} + <div class="card-text"> + <h3 class="card-title">{item.title}</h3> + {item.date && ( + <time class="snow-toc-link"> + {formatDate(parseISO(item.date), 'MMMM d, yyyy')} + </time> + )} + {item.description && ( + <p style="margin: 0.5rem 0 0.25rem;">{item.description}</p> + )} + </div> + </a> + </article> + ); +} |