CRUD by routes

app/components/Header.tsx

@@ -0,0 +1,10 @@
+import React from 'react'
+
+export default function Header() {
+  return (
+    <div className='w-full m-auto text-center p-4'>
+      <h1 className='font-bold text-4xl'>Suspense</h1>
+      <p className='text-sm'>Record your suspension settings</p>
+    </div>
+  )
+}

app/components/Profile.tsx

@@ -0,0 +1,21 @@
+import React from 'react'
+import { ProfileModel } from '../types'
+import Link from 'next/link'
+export default function Profile(params: ProfileModel) {
+  return (
+    <tr className="text-center">
+      <td className='border border-slate-300'>
+        <Link href={`/profiles/read/${params.id}`} className='underline text-blue-600 hover:text-blue-800 visited:text-purple-600'>{params.name}</Link>
+      </td>
+      <td className='border border-slate-300'>{params.forkPsi}</td>
+      <td className='border border-slate-300'>{params.forkSag}%</td>
+      <td className='border border-slate-300'>{params.shockPsi}</td>
+      <td className='border border-slate-300'>{params.shockSag}%</td>
+      <td className='w-52 border border-slate-300'>
+        <Link href={`/profiles/edit/${params.id}`} className='bg-yellow-500 p-2 inline-block text-white text-sm'>Edit</Link>
+        <Link href={`/profiles/delete/${params.id}`} className='bg-red-500 ml-3 p-2 inline-block text-white text-sm'>Delete</Link>
+      </td>
+    </tr>
+  )
+}
+

app/components/form/Label.tsx

@@ -0,0 +1,16 @@
+import React from 'react'
+
+interface LabelProps extends React.HTMLAttributes<any> {
+  fieldName: string;
+  labelText: string;
+}
+
+export default function Label({fieldName, labelText}: LabelProps) {
+  const classNames = 'block text-gray-500 font-bold md:text-right mb-1 md:mb-0 pr-4';
+
+  return (
+    <label className={classNames} htmlFor={fieldName}>
+      {labelText}
+    </label>
+  )
+}

app/components/form/LabelAndTextField.tsx

@@ -0,0 +1,23 @@
+import React from 'react'
+import Label from './Label'
+import TextField from './TextField'
+
+interface LabelAndTextFieldProps extends React.HTMLAttributes<any> {
+  fieldName: string;
+  fieldValue: string;
+  fieldSetter: React.Dispatch<React.SetStateAction<string>>;
+  labelText: string;
+}
+
+export default function LabelAndTextField({fieldName, fieldValue, fieldSetter, labelText}: LabelAndTextFieldProps) {
+  return (
+    <div className="md:flex md:items-center mb-6">
+      <div className="md:w-1/4">
+        <Label fieldName={fieldName} labelText={labelText} />
+      </div>
+      <div className="md:w-2/4">
+        <TextField fieldName={fieldName} fieldSetter={fieldSetter} fieldValue={fieldValue} />
+      </div>
+    </div>
+  )
+}

app/components/form/Submit.tsx

@@ -0,0 +1,9 @@
+import React from 'react'
+
+export default function Submit() {
+  return (
+    <div className='w-full py-2 text-center'>
+      <button className="w-20 p-2 text-white border-gray-200 border-[1px] rounded-sm bg-green-400">Submit</button>
+    </div>
+  )
+}

app/components/form/TextField.tsx

@@ -0,0 +1,20 @@
+import React from 'react'
+import { SyntheticEvent } from 'react'
+
+interface TextFieldProps extends React.HTMLAttributes<any> {
+  fieldName: string;
+  fieldValue: string;
+  fieldSetter: React.Dispatch<React.SetStateAction<string>>;
+}
+
+export default function TextField({fieldName, fieldValue, fieldSetter}: TextFieldProps) {
+  const classNames = 'bg-gray-200 appearance-none border-2 rounded w-full py-2 px-4 text-gray-700 leading-tight focus:outline-none focus:bg-white focus:border-blue-500';
+
+  const onChange = (e: React.ChangeEvent<HTMLInputElement>): void => {
+    fieldSetter(e.currentTarget.value);
+  }
+
+  return (
+    <input className={classNames} id={fieldName} value={fieldValue} type="text" onChange={onChange}/>
+  )
+}

app/globals.css

@@ -1,27 +1,3 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
-
-:root {
-  --foreground-rgb: 0, 0, 0;
-  --background-start-rgb: 214, 219, 220;
-  --background-end-rgb: 255, 255, 255;
-}
-
-@media (prefers-color-scheme: dark) {
-  :root {
-    --foreground-rgb: 255, 255, 255;
-    --background-start-rgb: 0, 0, 0;
-    --background-end-rgb: 0, 0, 0;
-  }
-}
-
-body {
-  color: rgb(var(--foreground-rgb));
-  background: linear-gradient(
-      to bottom,
-      transparent,
-      rgb(var(--background-end-rgb))
-    )
-    rgb(var(--background-start-rgb));
-}

app/layout.tsx

@@ -1,6 +1,7 @@
-import './globals.css'
+import '@/app/globals.css'
 import type { Metadata } from 'next'
 import { Inter } from 'next/font/google'
+import Header from '@/app/components/Header'
 
 const inter = Inter({ subsets: ['latin'] })
 
@@ -16,7 +17,12 @@ export default function RootLayout({
 }) {
   return (
     <html lang="en">
-      <body className={inter.className}>{children}</body>
+      <body className={inter.className}>
+        <Header />
+        <div className='w-full m-auto'>
+            {children}
+        </div>
+      </body>
     </html>
   )
 }

app/lib/index.ts

@@ -0,0 +1 @@
+export const fetcher = (url: string) => fetch(url).then((res) => res.json());