docs/_components/LandingPage.tsx at ff3a2ba5e2161cc04b7c2b2488b218a887a96d4a · denoland/docs · 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
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
import { ExampleIcon } from "../examples/_components/ExampleIcon.tsx";
import { LearningList } from "../examples/_components/LearningList.tsx";
import { TutorialIcon } from "../examples/_components/TutorialIcon.tsx";
import { VideoIcon } from "../examples/_components/VideoIcon.tsx";
import { sidebar } from "../examples/_data.ts";

export default function LandingPage() {
  const componentsPerSidebarItem = sidebar.map(
    (item: { title: string; items: any[] }) => {
      return (
        <LearningList
          title={item.title}
          items={item.items}
        />
      );
    },
  );

  return (
    <>
      <main id="content">
        <div className="flex flex-col md:flex-row w-full mb-8 max-w-screen-xl justify-between">
          <div className="max-w-prose mb-8">
            <h1 className="text-2xl font-semibold sm:text-3xl md:text-4xl mb-3">
              Examples
            </h1>
            <p>
              A collection of walkthrough tutorials, examples, videos and guides
              to teach you about the Deno runtime and how to use it with your
              favorite tools.
            </p>
          </div>
          <img
            className="w-full max-w-32 mx-auto h-auto mb-4 hidden md:block"
            alt="Deno Examples"
            src="/examples.png"
          />
        </div>
        <div className="flex flex-col gap-4 w-full mb-8 p-4 border border-blue-100 dark:border-background-tertiary bg-blue-50 dark:bg-background-secondary rounded md:flex-wrap md:justify-start md:items-center md:flex-row">
          <h2 className="font-semibold">
            Filter by type:
          </h2>
          <label for="example" className="flex gap-2 items-center mr-4">
            <ExampleIcon />
            <span>Examples:</span>
            <span className="switch">
              <input
                type="checkbox"
                id="example"
                value="Examples"
                className="filter mr-2"
                checked
              />
              <span className="slider"></span>
            </span>
          </label>

          <label for="tutorial" className="flex gap-2 items-center mr-4">
            <TutorialIcon />
            <span>Tutorials:</span>
            <span className="switch">
              <input
                type="checkbox"
                id="tutorial"
                value="Tutorials"
                className="filter mr-2"
                checked
              />
              <span className="slider"></span>
            </span>
          </label>

          <label for="video" className="flex gap-2 items-center mr-4">
            <VideoIcon />
            <span>Videos:</span>
            <span className="switch">
              <input
                type="checkbox"
                id="video"
                value="Videos"
                className="filter mr-2"
                checked
              />
              <span className="slider"></span>
            </span>
          </label>
        </div>

        <div className="unfiltered columns-1 sm:columns-2 lg:columns-3 gap-8 mb-8 w-[100%]">
          {componentsPerSidebarItem}
        </div>
        <div className="fully-filtered">
          <h2 class="text-2xl font-semibold sm:text-3xl md:text-4xl">
            Oops! You've filtered everything
          </h2>
          <p class="md:text-lg mt-4">
            Maybe remove a filter to see some examples?
          </p>
          <img
            src="/examples/tutorials/images/deno-educator.png"
            alt="sad Deno with a grad cap"
          />
        </div>
      </main>
      <aside class="px-8 xl:px-0 max-w-7xl mb-24 space-y-4 border-t pt-8">
        <h2 class="text-2xl md:text-3xl font-bold">
          We welcome contributions!
        </h2>
        <p class="text-balance pt-4 mt-3">
          Looking for an example that isn't here? Or want to add one of your
          own? Check out our{" "}
          <a
            href="https://github.com/denoland/deno-docs?tab=readme-ov-file#examples"
            class="text-primary underline"
          >
            GitHub repository
          </a>.
        </p>
        <p>
          <a
            href="/runtime/contributing/examples/"
            class="text-primary underline mt-4 font-bold"
          >
            Commit an example and we'll send you stickers!
          </a>
        </p>
      </aside>
    </>
  );
}