Initial commit from Create Next App

2021-10-12 21:17:12 +02:00
commit adc12fcae3
17 changed files with 2364 additions and 0 deletions
--- a/components/Layout.tsx
+++ b/components/Layout.tsx
@@ -0,0 +1,41 @@
+import React, { ReactNode } from 'react'
+import Link from 'next/link'
+import Head from 'next/head'
+
+type Props = {
+  children?: ReactNode
+  title?: string
+}
+
+const Layout = ({ children, title = 'This is the default title' }: Props) => (
+  <div>
+    <Head>
+      <title>{title}</title>
+      <meta charSet="utf-8" />
+      <meta name="viewport" content="initial-scale=1.0, width=device-width" />
+    </Head>
+    <header>
+      <nav>
+        <Link href="/">
+          <a>Home</a>
+        </Link>{' '}
+        |{' '}
+        <Link href="/about">
+          <a>About</a>
+        </Link>{' '}
+        |{' '}
+        <Link href="/users">
+          <a>Users List</a>
+        </Link>{' '}
+        | <a href="/api/users">Users API</a>
+      </nav>
+    </header>
+    {children}
+    <footer>
+      <hr />
+      <span>I'm here to stay (Footer)</span>
+    </footer>
+  </div>
+)
+
+export default Layout
--- a/components/List.tsx
+++ b/components/List.tsx
@@ -0,0 +1,19 @@
+import * as React from 'react'
+import ListItem from './ListItem'
+import { User } from '../interfaces'
+
+type Props = {
+  items: User[]
+}
+
+const List = ({ items }: Props) => (
+  <ul>
+    {items.map((item) => (
+      <li key={item.id}>
+        <ListItem data={item} />
+      </li>
+    ))}
+  </ul>
+)
+
+export default List
--- a/components/ListDetail.tsx
+++ b/components/ListDetail.tsx
@@ -0,0 +1,16 @@
+import * as React from 'react'
+
+import { User } from '../interfaces'
+
+type ListDetailProps = {
+  item: User
+}
+
+const ListDetail = ({ item: user }: ListDetailProps) => (
+  <div>
+    <h1>Detail for {user.name}</h1>
+    <p>ID: {user.id}</p>
+  </div>
+)
+
+export default ListDetail
--- a/components/ListItem.tsx
+++ b/components/ListItem.tsx
@@ -0,0 +1,18 @@
+import React from 'react'
+import Link from 'next/link'
+
+import { User } from '../interfaces'
+
+type Props = {
+  data: User
+}
+
+const ListItem = ({ data }: Props) => (
+  <Link href="/users/[id]" as={`/users/${data.id}`}>
+    <a>
+      {data.id}: {data.name}
+    </a>
+  </Link>
+)
+
+export default ListItem