summaryrefslogtreecommitdiff
path: root/docs/src/components/Examples/Card.astro
diff options
context:
space:
mode:
Diffstat (limited to 'docs/src/components/Examples/Card.astro')
-rw-r--r--docs/src/components/Examples/Card.astro64
1 files changed, 64 insertions, 0 deletions
diff --git a/docs/src/components/Examples/Card.astro b/docs/src/components/Examples/Card.astro
new file mode 100644
index 000000000..81d3b97f4
--- /dev/null
+++ b/docs/src/components/Examples/Card.astro
@@ -0,0 +1,64 @@
+---
+import CodeBar from './Codebar.tsx'
+import CardButtons from './CardButtons.astro'
+
+const {data, index} = Astro.props;
+
+// NOTE: Needed until we get hosted demos of official templates.
+const PLACEHOLDER_THUMBNAILS = [
+ // `#ba5370, #F4E2D8`,
+ // `#22c1c3, #fdbb2d`,
+ // `#7a5e99, #9f5dcf, #e864ca, #fdeff9`,
+ // `#e1eec3, #f05053`,
+ // `#7f00ff, #e100ff`,
+ `var(--theme-bg-accent), var(--theme-accent)`,
+]
+
+const hasScreenshot = !!data.demo;
+const backgroundStyle = hasScreenshot ? `url('https://v1.screenshot.11ty.dev/${encodeURIComponent(data.demo)}/medium/9:16/')` : `linear-gradient(60deg, var(--theme-bg-accent), var(--theme-accent))`
+---
+<style>
+ .card {
+ position: relative;
+ display: flex;
+ flex-direction: column;
+ grid-column: span 1;
+ flex-grow: 1;
+ height: 200px;
+ justify-content: center;
+ align-items: center;
+ padding: 1rem;
+ text-align: center;
+ }
+ .card-header {
+ flex-grow: 1;
+ font-weight: bold;
+ font-size: 1.8rem;
+ }
+ .background-dimmer {
+ position: absolute;
+ top: 0;
+ left: 0;
+ height: 100%;
+ width: 100%;
+ background: linear-gradient(45deg, #0004, #000B);
+ z-index: 2;
+ }
+ .card-body, .card-header {
+ color: var(--text-color);
+ }
+ .card-body {
+ z-index: 3;
+ }
+ .card.has-screenshot .card-header,
+ .card.has-screenshot .card-body {
+ color: white;
+ }
+</style>
+<article class={`card ${hasScreenshot ? 'has-screenshot' : ''}`} style={`background: ${backgroundStyle}; background-size: cover;`}>
+ {hasScreenshot && <div class="background-dimmer"></div>}
+ <div class="card-body">
+ <a href={data.github} class="card-header" target="_blank">{data.name}
+ <span>{` →`}</span></a>
+ </div>
+</article> \ No newline at end of file