Final de la clase del 6 de Junio

pauek · pauek · commit c6f65b2a3565 · 2023-06-08T18:32:00.000+02:00
diff --git a/2023-06-06/next1/app/beers/[beerId]/page.tsx b/2023-06-06/next1/app/beers/[beerId]/page.tsx
@@ -0,0 +1,21 @@
+
+type Beer = Record<string, any>;
+
+const getBeerById = async (id: string): Promise<Beer> => {
+  console.log("getBeerById", id);
+  const response = await fetch(`https://api.punkapi.com/v2/beers/${id}`);
+  const [beer] = await response.json();
+  return beer;
+};
+
+
+type Props = {
+  params: {
+    beerId: string,
+  }
+}
+export default async function Page({ params }: Props) {
+  const { beerId } = params;
+  const beer = await getBeerById(beerId);
+  return <div>{beerId} - {beer.name}</div>
+}
diff --git a/2023-06-06/next1/app/beers/page.tsx b/2023-06-06/next1/app/beers/page.tsx
@@ -0,0 +1,21 @@
+import Link from "next/link";
+
+type Beer = Record<string, any>;
+
+const loadBeers = async (): Promise<Array<Beer>> => {
+
+  const response = await fetch(`https://api.punkapi.com/v2/beers`);
+  const beers = await response.json();
+  return beers;
+};
+
+export default async function Page() {
+  const beers = await loadBeers();
+  return (
+    <div className="flex flex-col">
+      {beers.map((beer) => (
+        <Link key={beer.id} href={`/beers/${beer.id}`}>{beer.name}</Link>
+      ))}
+    </div>
+  );
+}
diff --git a/2023-06-06/next1/app/layout.tsx b/2023-06-06/next1/app/layout.tsx
@@ -1,21 +1,24 @@
-import './globals.css'
-import { Inter } from 'next/font/google'
+import "./globals.css";
+import { Inter } from "next/font/google";
 
-const inter = Inter({ subsets: ['latin'] })
+const inter = Inter({ subsets: ["latin"] });
 
 export const metadata = {
-  title: 'Create Next App',
-  description: 'Generated by create next app',
-}
+  title: "Create Next App",
+  description: "Generated by create next app",
+};
 
-export default function RootLayout({
-  children,
-}: {
-  children: React.ReactNode
-}) {
+type Props = {
+  children: React.ReactNode;
+};
+export default function RootLayout({ children }: Props) {
   return (
     <html lang="en">
-      <body className={inter.className}>{children}</body>
+      <head></head>
+      <body className={inter.className}>
+        <header className="border bg-red-200">Este es el header del <code>RootLayout</code></header>
+        {children}
+      </body>
     </html>
-  )
+  );
 }
diff --git a/2023-06-06/next1/app/page.tsx b/2023-06-06/next1/app/page.tsx
@@ -1,8 +1,12 @@
+import Link from "next/link";
+import Title from "./primera/Title";
 
-export default function Home() {
+export default function Page() {
   return (
-    <main className="p-3">
-      <h1 className="font-bold text-2xl">Este es mi primer proyecto NextJS (13.2)</h1>
+    <main className="p-3 flex flex-col">
+      <Title />
+      <Link href="/primera">Vete a primera</Link>
+      <Link href="/beers">Lista de Cervezas</Link>
     </main>
   )
 }
diff --git a/2023-06-06/next1/app/primera/Title.tsx b/2023-06-06/next1/app/primera/Title.tsx
@@ -0,0 +1,7 @@
+export default function Title() {
+  return (
+    <h1 className="font-bold text-2xl">
+      Este es mi primer proyecto NextJS
+    </h1>
+  );
+}
diff --git a/2023-06-06/next1/app/primera/layout.tsx b/2023-06-06/next1/app/primera/layout.tsx
@@ -0,0 +1,10 @@
+
+type Props = {
+  children: React.ReactNode;
+}
+export default function Layout({ children }: Props) {
+  return <div>
+    {children}
+    <aside>Este es el layout de <code>/primera</code></aside>
+  </div>
+}
diff --git a/2023-06-06/next1/app/primera/mini/page.tsx b/2023-06-06/next1/app/primera/mini/page.tsx
@@ -0,0 +1,3 @@
+export default function Page() {
+  return <div>Esta es la mini</div>
+}
diff --git a/2023-06-06/next1/app/primera/page.tsx b/2023-06-06/next1/app/primera/page.tsx
@@ -0,0 +1,8 @@
+import Link from "next/link";
+
+export default function Page() {
+  return <div className="p-3">
+    <h1 className="text-2xl font-bold">Primera</h1>
+    <Link href="/primera/mini">Vete a mini</Link>
+  </div>
+}

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,3 @@`
	`1`	`+export default function Page() {`
	`2`	`+ return <div>Esta es la mini</div>`
	`3`	`+}`