summaryrefslogtreecommitdiff
path: root/src/components/DistrictSiteComponent.astro
blob: 7fe91877bc9b785b843fc377adca06ba8108844b (plain)
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
---
const { site } = Astro.props;
---

<div class="flex flex-row justify-between px-2 gap-2 my-4">
  <div class="w-2/3">
    <div class="flex flex-row gap-2 items-center justify-between">
      <h2 class="text-xl saira">
        <a href={site.url} target="_blank" rel="noopener">{site.name}</a>
      </h2>
      <span class="text-gray-500 text-xs"
        >Added: {new Date(site.added).toLocaleDateString()}</span
      >
    </div>
    <p class="text-xs my-2" set:html={site.description} />
    <div class="text-xs my-2">
      Owner:
      <a
        class="link"
        href={`https://neocities.org/site/${site.owner}`}
        target="_blank"
        rel="noopener"
      >
        @{site.owner}
      </a>
    </div>
    {
      site.tags && (
        <div class="text-xs mt-4">
          {site.tags.map((tag: string) => (
            <span class="bg-pagodapurple text-white rounded px-2 py-1 mr-1 uppercase">
              <a
                href={`https://neocities.org/browse?tag=${tag}`}
                target="_blank"
                rel="noopener"
              >
                {tag}
              </a>
            </span>
          ))}
        </div>
      )
    }
  </div>
  <div class="w-1/3 flex justify-center items-center">
    <a href={site.url} target="_blank" rel="noopener">
      <img
        src={site.screenshotUrl}
        alt={site.name}
        class="w-full h-auto pointer-events-none user-select-none"
      />
    </a>
  </div>
</div>