diff --git a/src/app/contacts/[contactId]/page.tsx b/src/app/contacts/[contactId]/page.tsx new file mode 100644 index 0000000..274e324 --- /dev/null +++ b/src/app/contacts/[contactId]/page.tsx @@ -0,0 +1,98 @@ +"use client"; + +import Form from "next/form"; +import { ContactRecord } from "@/app/data"; + +export default function Contact() { + const contact = { + first: "Your", + last: "Name", + avatar: "https://placecats.com/200/200", + twitter: "your_handle", + notes: "Some notes", + favorite: true, + }; + + return ( +
+
+ {/* eslint-disable-next-line @next/next/no-img-element */} + {`${contact.first} +
+ +
+

+ {contact.first || contact.last ? ( + <> + {contact.first} {contact.last} + + ) : ( + No Name + )} + +

+ + {contact.twitter ? ( +

+ + {contact.twitter} + +

+ ) : null} + + {contact.notes ?

{contact.notes}

: null} + +
+
+ +
+ +
{ + const response = confirm( + "Please confirm you want to delete this record." + ); + if (!response) { + event.preventDefault(); + } + }} + > + +
+
+
+
+ ); +} + +function Favorite({ + contact, +}: { + contact: Pick; +}) { + const favorite = contact.favorite; + + return ( +
+ +
+ ); +} \ No newline at end of file diff --git a/src/app/layout.tsx b/src/app/layout.tsx index 228b30a..339c415 100644 --- a/src/app/layout.tsx +++ b/src/app/layout.tsx @@ -2,6 +2,8 @@ import type { Metadata } from "next"; import React from "react"; import "./globals.css"; +import Form from "next/form"; +import Link from "next/link"; export const metadata: Metadata = { title: "Next.js Address Book", @@ -15,9 +17,43 @@ export default function RootLayout({ }>) { return ( - - {children} - + +