ratatui-website/src/components/ShowcaseCard.astro at e66c0500ba37f389fa27e652a7673f6826eba23f · ratatui/ratatui-website · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
---
import { getGitHubStats, formatNumber } from "../utils/stats.ts";
import type { GitHubRepo } from "~/models/stats";
import type { ShowcaseProject } from "~/models/project.ts";

interface Props {
  colSpan: number;
  project: ShowcaseProject;
}

const { colSpan, project } = Astro.props;
const { title, owner, repo, url, description, media, alt } = project;

let stats: GitHubRepo = { stars: 100, forks: 100 };
try {
  stats = await getGitHubStats(owner, repo);
} catch (err) {}
---

<div
  class={`gallery-item grid min-w-[300px] bg-gradient-to-br from-slate-300 to-slate-400 max-sm:h-[300px] dark:from-slate-950 dark:to-slate-950 ${
    colSpan === 1 ? "h-[600px] grid-rows-[1fr_5fr]" : "h-[550px] grid-cols-[1fr_4fr]"
  } max-sm:grid-cols-none max-sm:grid-rows-[1fr_5fr]`}
  data-col-span={colSpan}
>
  <div class="landing-mono text-black dark:text-white">
    <a href={url} target="_blank">
      <p
        class={`font-bold text-3xl max-sm:text-lg
      ${colSpan === 1 ? "px-6 pt-6 pb-2 max-sm:pt-4" : "px-6 pt-6 max-sm:pt-4"}`}
      >
        <span class="bracket-btn">
          <span class="bracket left">[</span>{title}<span class="bracket right">]</span>
        </span>
        <div class={`landing-mono ml-6 ${colSpan !== 1 ? "md:pt-4" : ""}`}>
          <span class="bg-blue-700 py-1 max-sm:p-0">
            <span class="m-0 bg-blue-500 p-1 max-sm:pb-0.25 max-sm:text-xs">⭐</span>
            <span class="m-0 bg-blue-700 p-1 pr-2 pl-0 text-white max-sm:p-0 max-sm:text-xs"
              >{formatNumber(stats.stars)}</span
            >
          </span>
          <span
            class={`landing-mono px-6 max-sm:px-3 text-slate-600 max-sm:text-xs dark:text-slate-300 ${colSpan === 1 ? "pt-2" : "block max-sm:inline pl-0 max-sm:px-3 pt-2"}`}
          >
            {description}
          </span>
        </div>
      </p>
    </a>
  </div>
  <div class="overflow-hidden p-6">
    <a href={url} target="_blank" aria-label={alt}>
      {
        media.endsWith("webm") ? (
          <video class="h-full w-full object-cover" src={media} autoplay muted loop playsinline />
        ) : media.includes("youtube") ? (
          <iframe
            class="h-full w-full"
            src={media}
            title="YouTube video player"
            allow="autoplay;"
          />
        ) : (
          <img class="h-full w-full object-cover" src={media} alt={alt} />
        )
      }
    </a>
  </div>
</div>

<style>
  .gallery-item {
    flex: 1 1 calc(38% - 1rem);
  }

  .gallery-item[data-col-span="2"] {
    flex: 2 1 calc(66.667% - 1rem);
  }

  .gallery-item[data-col-span="3"] {
    flex: 1 calc(100% - 1rem);
  }

  /* Responsive adjustments */
  @media (max-width: 1024px) {
    .gallery-item {
      flex: 1 1 calc(50% - 1rem);
    }

    .gallery-item[data-col-span="2"] {
      flex: 2 1 calc(100% - 1rem);
    }
  }

  @media (max-width: 768px) {
    .gallery-item {
      flex: 1 1 100%;
    }

    .gallery-item[data-col-span="2"] {
      flex: 1 1 100%;
    }

    /* Force grid rows on mobile */
    .gallery-item.max-sm\:grid-rows-\[1fr_5fr\] {
      grid-template-rows: 1fr 5fr;
      grid-template-columns: none;
    }
  }
</style>