diff options
author | 2021-04-26 16:54:20 -0500 | |
---|---|---|
committer | 2021-04-26 15:54:20 -0600 | |
commit | dea1a6dfc9dec54034d2b872b4cd36c0174814c6 (patch) | |
tree | 49569a511201b4defc23b6654b475e458452596a /examples/snowpack/src/components/Card.jsx | |
parent | 0ea4a986e207238bf0ac1db841b2a5d5b567d84d (diff) | |
download | astro-dea1a6dfc9dec54034d2b872b4cd36c0174814c6.tar.gz astro-dea1a6dfc9dec54034d2b872b4cd36c0174814c6.tar.zst astro-dea1a6dfc9dec54034d2b872b4cd36c0174814c6.zip |
Update defaults directory structure to `src` and `dist` (#132)
* chore: update defaults in docs
* chore: update config defaults
* test: update tests to config defaults
* chore: update gitignore to new defaults
* docs: update readme to new defaults
* chore: update examples to new defaults
* chore: update default exclude in lang server
* chore: update tests
* test: fix failing tests
* chore: update www defaults
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> + ); +} |