From 8dd0d1d863c958c118bab5693d6ea7be93a37c0b Mon Sep 17 00:00:00 2001 From: Delba de Oliveira <32464864+delbaoliveira@users.noreply.github.com> Date: Wed, 30 Aug 2023 16:37:50 +0100 Subject: [PATCH] Add dummy data and routes (#127) * Run create-next-app * Add READMEs * Remove stuff we don't need * Add dummy data * Add types for dummy data * Add dummy routes * Remove unused CSS * Split dummy data and definitions --- .../15-final/app/dashboard/customers/page.tsx | 3 + .../app/dashboard/invoices/[id]/edit/page.tsx | 3 + .../app/dashboard/invoices/[id]/page.tsx | 3 + .../app/dashboard/invoices/create/page.tsx | 3 + .../15-final/app/dashboard/invoices/page.tsx | 3 + dashboard/15-final/app/dashboard/layout.tsx | 8 ++ dashboard/15-final/app/dashboard/page.tsx | 3 + dashboard/15-final/app/globals.css | 24 ---- dashboard/15-final/app/lib/definitions.tsx | 23 ++++ dashboard/15-final/app/lib/dummy-data.tsx | 61 +++++++++ dashboard/15-final/app/login/page.tsx | 7 ++ dashboard/15-final/app/page.tsx | 116 ++---------------- 12 files changed, 124 insertions(+), 133 deletions(-) create mode 100644 dashboard/15-final/app/dashboard/customers/page.tsx create mode 100644 dashboard/15-final/app/dashboard/invoices/[id]/edit/page.tsx create mode 100644 dashboard/15-final/app/dashboard/invoices/[id]/page.tsx create mode 100644 dashboard/15-final/app/dashboard/invoices/create/page.tsx create mode 100644 dashboard/15-final/app/dashboard/invoices/page.tsx create mode 100644 dashboard/15-final/app/dashboard/layout.tsx create mode 100644 dashboard/15-final/app/dashboard/page.tsx create mode 100644 dashboard/15-final/app/lib/definitions.tsx create mode 100644 dashboard/15-final/app/lib/dummy-data.tsx create mode 100644 dashboard/15-final/app/login/page.tsx diff --git a/dashboard/15-final/app/dashboard/customers/page.tsx b/dashboard/15-final/app/dashboard/customers/page.tsx new file mode 100644 index 0000000..ff5a46d --- /dev/null +++ b/dashboard/15-final/app/dashboard/customers/page.tsx @@ -0,0 +1,3 @@ +export default function Page() { + return
List of customers
+} diff --git a/dashboard/15-final/app/dashboard/invoices/[id]/edit/page.tsx b/dashboard/15-final/app/dashboard/invoices/[id]/edit/page.tsx new file mode 100644 index 0000000..0d2c74b --- /dev/null +++ b/dashboard/15-final/app/dashboard/invoices/[id]/edit/page.tsx @@ -0,0 +1,3 @@ +export default function Page() { + return
Edit Invoice Page
+} diff --git a/dashboard/15-final/app/dashboard/invoices/[id]/page.tsx b/dashboard/15-final/app/dashboard/invoices/[id]/page.tsx new file mode 100644 index 0000000..188d95c --- /dev/null +++ b/dashboard/15-final/app/dashboard/invoices/[id]/page.tsx @@ -0,0 +1,3 @@ +export default function Page() { + return
Individual Invoice Page
+} diff --git a/dashboard/15-final/app/dashboard/invoices/create/page.tsx b/dashboard/15-final/app/dashboard/invoices/create/page.tsx new file mode 100644 index 0000000..0a5fb42 --- /dev/null +++ b/dashboard/15-final/app/dashboard/invoices/create/page.tsx @@ -0,0 +1,3 @@ +export default function Page() { + return
Create new invoice page
+} diff --git a/dashboard/15-final/app/dashboard/invoices/page.tsx b/dashboard/15-final/app/dashboard/invoices/page.tsx new file mode 100644 index 0000000..403df46 --- /dev/null +++ b/dashboard/15-final/app/dashboard/invoices/page.tsx @@ -0,0 +1,3 @@ +export default function Page() { + return
List of invoices
+} diff --git a/dashboard/15-final/app/dashboard/layout.tsx b/dashboard/15-final/app/dashboard/layout.tsx new file mode 100644 index 0000000..97101a6 --- /dev/null +++ b/dashboard/15-final/app/dashboard/layout.tsx @@ -0,0 +1,8 @@ +export default function Layout({ children }: { children: React.ReactNode }) { + return ( +
+
Dashboard layout
+
{children}
+
+ ) +} diff --git a/dashboard/15-final/app/dashboard/page.tsx b/dashboard/15-final/app/dashboard/page.tsx new file mode 100644 index 0000000..3f609d4 --- /dev/null +++ b/dashboard/15-final/app/dashboard/page.tsx @@ -0,0 +1,3 @@ +export default function Page() { + return
Dashboard Overview
+} diff --git a/dashboard/15-final/app/globals.css b/dashboard/15-final/app/globals.css index fd81e88..b5c61c9 100644 --- a/dashboard/15-final/app/globals.css +++ b/dashboard/15-final/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)); -} diff --git a/dashboard/15-final/app/lib/definitions.tsx b/dashboard/15-final/app/lib/definitions.tsx new file mode 100644 index 0000000..5618fff --- /dev/null +++ b/dashboard/15-final/app/lib/definitions.tsx @@ -0,0 +1,23 @@ +// This file contains type definitions for you data. +// These describe the shape of the data, and what data type each property should accept. + +export type User = { + id: number + name: string + email: string + password: string +} + +export type Customer = { + id: number + name: string + email: string +} + +export type Invoice = { + id: number + customerId: number + amount: number + status: "pending" | "paid" // In TypeScript, this is called a string union type. + // It means that the "status" property can only be one of the two strings. +} diff --git a/dashboard/15-final/app/lib/dummy-data.tsx b/dashboard/15-final/app/lib/dummy-data.tsx new file mode 100644 index 0000000..d2a331d --- /dev/null +++ b/dashboard/15-final/app/lib/dummy-data.tsx @@ -0,0 +1,61 @@ +import { User, Customer, Invoice } from "./definitions" + +// This file contains dummy data that you'll be replacing with real data in Chapter 7. +export const users: User[] = [ + { + id: 1, + name: "User", + email: "user@nextmail.com", + password: "123456", + }, +] + +export const customers: Customer[] = [ + { + id: 1, + name: "Lee", + email: "lee@nextmail.com", + }, + { + id: 2, + name: "Michael", + email: "michael@nextmail.com", + }, + { + id: 3, + name: "Steph", + email: "steph@nextmail.com", + }, + { + id: 4, + name: "Delba", + email: "delba@nextmail.com", + }, +] + +export const invoices: Invoice[] = [ + { + id: 1, + customerId: 1, + amount: 10000, + status: "pending", + }, + { + id: 2, + customerId: 2, + amount: 20000, + status: "pending", + }, + { + id: 3, + customerId: 3, + amount: 30000, + status: "paid", + }, + { + id: 4, + customerId: 4, + amount: 40000, + status: "paid", + }, +] diff --git a/dashboard/15-final/app/login/page.tsx b/dashboard/15-final/app/login/page.tsx new file mode 100644 index 0000000..e65cbe6 --- /dev/null +++ b/dashboard/15-final/app/login/page.tsx @@ -0,0 +1,7 @@ +export default function Page() { + return ( +
+
Replace with login-form.tsx
+
+ ) +} diff --git a/dashboard/15-final/app/page.tsx b/dashboard/15-final/app/page.tsx index 08930a9..5de4f25 100644 --- a/dashboard/15-final/app/page.tsx +++ b/dashboard/15-final/app/page.tsx @@ -1,113 +1,11 @@ -import Image from "next/image" - -export default function Home() { +export default function Page() { return ( -
-
-

- Get started by editing  - app/page.tsx -

-
- - By{" "} - Vercel Logo - -
+
+
+ Landing page. Login button should be in content to avoid root layouts + and route groups complexity. +
- -
- Next.js Logo -
- -
- -

- Docs{" "} - - -> - -

-

- Find in-depth information about Next.js features and API. -

- - - -

- Learn{" "} - - -> - -

-

- Learn about Next.js in an interactive course with quizzes! -

- - - -

- Templates{" "} - - -> - -

-

- Explore the Next.js 13 playground. -

- - - -

- Deploy{" "} - - -> - -

-

- Instantly deploy your Next.js site to a shareable URL with Vercel. -

- -
-
+ ) }