forked from
joebasser.com/atmosphere-account
this repo has no description
1import { useT } from "../i18n/mod.ts";
2
3export default function AppShowcase() {
4 const t = useT();
5 const categories = [
6 {
7 name: t.appShowcase.categories.microblogs,
8 apps: [
9 { name: "Bluesky", url: "https://bsky.app" },
10 { name: "Blacksky", url: "https://blacksky.app" },
11 ],
12 },
13 {
14 name: t.appShowcase.categories.video,
15 apps: [
16 { name: "Spark", url: "https://spark.blue" },
17 { name: "Stream.place", url: "https://stream.place" },
18 ],
19 },
20 {
21 name: t.appShowcase.categories.photos,
22 apps: [
23 { name: "Flashes", url: "https://flashes.blue" },
24 ],
25 },
26 {
27 name: t.appShowcase.categories.blogging,
28 apps: [
29 { name: "Leaflet", url: "https://leaflet.pub" },
30 { name: "Offprint", url: "https://offprint.blog" },
31 { name: "Pckt", url: "https://pckt.pub" },
32 ],
33 },
34 {
35 name: t.appShowcase.categories.events,
36 apps: [
37 { name: "Smoke Signal", url: "https://smokesignal.events" },
38 { name: "Dandelion", url: "https://dandelion.events" },
39 { name: "Calendar City", url: "https://calendar.city" },
40 ],
41 },
42 {
43 name: t.appShowcase.categories.musicReviews,
44 apps: [
45 { name: "teal.fm", url: "https://teal.fm" },
46 { name: "Popfeed", url: "https://popfeed.app" },
47 ],
48 },
49 {
50 name: t.appShowcase.categories.collections,
51 apps: [
52 { name: "Semble", url: "https://semble.social" },
53 ],
54 },
55 {
56 name: t.appShowcase.categories.clients,
57 apps: [
58 { name: "Flux", url: "https://flux.blue" },
59 { name: "Skyscraper", url: "#" },
60 ],
61 },
62 ];
63
64 return (
65 <section class="section reveal">
66 <div class="container">
67 <div class="text-center">
68 <h2 class="text-section">{t.appShowcase.heading}</h2>
69 <div class="divider" />
70 <p
71 class="text-body mt-2"
72 style={{ maxWidth: "600px", margin: "1rem auto 0" }}
73 >
74 {t.appShowcase.intro}
75 </p>
76 </div>
77 {categories.map((cat) => (
78 <div key={cat.name} style={{ marginTop: "2.5rem" }}>
79 <h3 class="text-subsection mb-2" style={{ textAlign: "center" }}>
80 {cat.name}
81 </h3>
82 <div class="app-grid" style={{ marginTop: "1rem" }}>
83 {cat.apps.map((app) => (
84 <a
85 key={app.name}
86 href={app.url}
87 target="_blank"
88 rel="noopener noreferrer"
89 class="glass app-card"
90 style={{ textDecoration: "none", color: "inherit" }}
91 >
92 <div class="app-card-name">{app.name}</div>
93 </a>
94 ))}
95 </div>
96 </div>
97 ))}
98 <p class="text-body-sm text-center mt-4">{t.appShowcase.footnote}</p>
99 </div>
100 </section>
101 );
102}