mokkenstorm.dev
fork of hey-api/openapi-ts because I need some additional things
1'use client';
2
3import Image from 'next/image';
4import Link from 'next/link';
5import { useEffect, useState } from 'react';
6
7import { getPetById } from '@/src/client/sdk.gen';
8import type { Pet } from '@/src/client/types.gen';
9
10export default function Home() {
11 const [pet, setPet] = useState<Pet>();
12 const [petId, setPetId] = useState(8);
13
14 useEffect(() => {
15 const fetchPet = async () => {
16 const { data } = await getPetById({
17 cache: 'force-cache',
18 next: {
19 revalidate: 10,
20 tags: ['pet'],
21 },
22 path: {
23 petId,
24 },
25 });
26
27 if (data) {
28 setPet(data);
29 }
30 };
31
32 fetchPet();
33 }, [petId]);
34
35 return (
36 <div className="grid grid-rows-[20px_1fr_20px] items-center justify-items-center min-h-screen p-8 pb-20 gap-16 sm:p-20 font-[family-name:var(--font-geist-sans)]">
37 <main className="flex flex-col gap-8 row-start-2 items-center sm:items-start">
38 <Image
39 className="dark:invert"
40 src="/next.svg"
41 alt="Next.js logo"
42 width={180}
43 height={38}
44 priority
45 />
46 <ol className="list-inside list-decimal text-sm text-center sm:text-left font-[family-name:var(--font-geist-mono)]">
47 <li className="mb-2">
48 Pet name:{' '}
49 <code className="bg-black/[.05] dark:bg-white/[.06] px-1 py-0.5 rounded font-semibold">
50 {pet?.name}
51 </code>
52 </li>
53 <li>Press the button below to fetch a random pet</li>
54 </ol>
55
56 <div className="flex gap-4 items-center flex-col sm:flex-row">
57 <button
58 className="rounded-full border border-solid border-transparent transition-colors flex items-center justify-center bg-foreground text-background gap-2 hover:bg-[#383838] dark:hover:bg-[#ccc] text-sm sm:text-base h-10 sm:h-12 px-4 sm:px-5"
59 onClick={() => {
60 // random id 1-10
61 setPetId(Math.floor(Math.random() * (10 - 1 + 1) + 1));
62 }}
63 >
64 <Image
65 className="dark:invert"
66 src="/vercel.svg"
67 alt="Vercel logomark"
68 width={20}
69 height={20}
70 />
71 Random pet
72 </button>
73 <Link
74 className="rounded-full border border-solid border-black/[.08] dark:border-white/[.145] transition-colors flex items-center justify-center hover:bg-[#f2f2f2] dark:hover:bg-[#1a1a1a] hover:border-transparent text-sm sm:text-base h-10 sm:h-12 px-4 sm:px-5 sm:min-w-44"
75 href="/pet/8"
76 >
77 Server component
78 </Link>
79 </div>
80 </main>
81 <footer className="row-start-3 flex gap-6 flex-wrap items-center justify-center">
82 <a
83 className="flex items-center gap-2 hover:underline hover:underline-offset-4"
84 href="https://nextjs.org/learn?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
85 target="_blank"
86 rel="noopener noreferrer"
87 >
88 <Image
89 aria-hidden
90 src="/file.svg"
91 alt="File icon"
92 width={16}
93 height={16}
94 />
95 Learn
96 </a>
97 <a
98 className="flex items-center gap-2 hover:underline hover:underline-offset-4"
99 href="https://vercel.com/templates?framework=next.js&utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
100 target="_blank"
101 rel="noopener noreferrer"
102 >
103 <Image
104 aria-hidden
105 src="/window.svg"
106 alt="Window icon"
107 width={16}
108 height={16}
109 />
110 Examples
111 </a>
112 <a
113 className="flex items-center gap-2 hover:underline hover:underline-offset-4"
114 href="https://nextjs.org?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
115 target="_blank"
116 rel="noopener noreferrer"
117 >
118 <Image
119 aria-hidden
120 src="/globe.svg"
121 alt="Globe icon"
122 width={16}
123 height={16}
124 />
125 Go to nextjs.org →
126 </a>
127 </footer>
128 </div>
129 );
130}