From d8c8bd76678642b79ff30cab3706c17df2af5825 Mon Sep 17 00:00:00 2001 From: ImAlpha Date: Fri, 20 Oct 2023 21:57:16 -0700 Subject: [PATCH] updated tailwind config to support daisyui --- .../jefes-nextjs/app/components/AddToCart.tsx | 15 ++++++ .../ProductCard/ProductCard.module.css | 4 ++ .../components/ProductCard/ProductCard.tsx | 21 ++++++++ Websites/jefes-nextjs/app/globals.css | 6 +-- Websites/jefes-nextjs/app/layout.tsx | 2 +- Websites/jefes-nextjs/app/page.tsx | 8 ++- .../jefes-nextjs/app/users/nested/page.tsx | 9 ++++ Websites/jefes-nextjs/app/users/page.tsx | 51 ++++++++++++++++++ Websites/jefes-nextjs/bun.lockb | Bin 134386 -> 135937 bytes Websites/jefes-nextjs/package.json | 7 +-- Websites/jefes-nextjs/tailwind.config.ts | 5 +- 11 files changed, 116 insertions(+), 12 deletions(-) create mode 100644 Websites/jefes-nextjs/app/components/AddToCart.tsx create mode 100644 Websites/jefes-nextjs/app/components/ProductCard/ProductCard.module.css create mode 100644 Websites/jefes-nextjs/app/components/ProductCard/ProductCard.tsx create mode 100644 Websites/jefes-nextjs/app/users/nested/page.tsx create mode 100644 Websites/jefes-nextjs/app/users/page.tsx diff --git a/Websites/jefes-nextjs/app/components/AddToCart.tsx b/Websites/jefes-nextjs/app/components/AddToCart.tsx new file mode 100644 index 0000000..4331614 --- /dev/null +++ b/Websites/jefes-nextjs/app/components/AddToCart.tsx @@ -0,0 +1,15 @@ +"use client"; +import React from 'react' + +const AddToCart = () => { + return ( +
+ {/* normal button */} + + {/* Button using DaisyUi */} + +
+ ) +} + +export default AddToCart \ No newline at end of file diff --git a/Websites/jefes-nextjs/app/components/ProductCard/ProductCard.module.css b/Websites/jefes-nextjs/app/components/ProductCard/ProductCard.module.css new file mode 100644 index 0000000..4f55923 --- /dev/null +++ b/Websites/jefes-nextjs/app/components/ProductCard/ProductCard.module.css @@ -0,0 +1,4 @@ +.card { + padding: 1rem; + border: 1px solid #ccc; +} \ No newline at end of file diff --git a/Websites/jefes-nextjs/app/components/ProductCard/ProductCard.tsx b/Websites/jefes-nextjs/app/components/ProductCard/ProductCard.tsx new file mode 100644 index 0000000..f489d32 --- /dev/null +++ b/Websites/jefes-nextjs/app/components/ProductCard/ProductCard.tsx @@ -0,0 +1,21 @@ +import React from 'react'; +import AddToCart from '../AddToCart'; +// import styles from './ProductCard.module.css'; + +const ProductCard = () => { + return ( + //
style using css file + + // style using tailwind + //
+ // + //
+ + // style using daisyUi component instead +
+ +
+ ) +} + +export default ProductCard \ No newline at end of file diff --git a/Websites/jefes-nextjs/app/globals.css b/Websites/jefes-nextjs/app/globals.css index 0cde8e5..aadc179 100644 --- a/Websites/jefes-nextjs/app/globals.css +++ b/Websites/jefes-nextjs/app/globals.css @@ -4,19 +4,15 @@ :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)); padding: 1rem; } + diff --git a/Websites/jefes-nextjs/app/layout.tsx b/Websites/jefes-nextjs/app/layout.tsx index 40e027f..ed3eac1 100644 --- a/Websites/jefes-nextjs/app/layout.tsx +++ b/Websites/jefes-nextjs/app/layout.tsx @@ -15,7 +15,7 @@ export default function RootLayout({ children: React.ReactNode }) { return ( - + {children} ) diff --git a/Websites/jefes-nextjs/app/page.tsx b/Websites/jefes-nextjs/app/page.tsx index e4a2a45..7be507e 100644 --- a/Websites/jefes-nextjs/app/page.tsx +++ b/Websites/jefes-nextjs/app/page.tsx @@ -1,9 +1,13 @@ -import Image from 'next/image' +import Image from 'next/image'; +import Link from 'next/link'; +import ProductCard from './components/ProductCard/ProductCard'; export default function Home() { return ( -
+

Hello World

+ Users +
) } diff --git a/Websites/jefes-nextjs/app/users/nested/page.tsx b/Websites/jefes-nextjs/app/users/nested/page.tsx new file mode 100644 index 0000000..91b9bc9 --- /dev/null +++ b/Websites/jefes-nextjs/app/users/nested/page.tsx @@ -0,0 +1,9 @@ +import React from 'react' + +const Nested = () => { + return ( +
Nested
+ ) +} + +export default Nested \ No newline at end of file diff --git a/Websites/jefes-nextjs/app/users/page.tsx b/Websites/jefes-nextjs/app/users/page.tsx new file mode 100644 index 0000000..821617c --- /dev/null +++ b/Websites/jefes-nextjs/app/users/page.tsx @@ -0,0 +1,51 @@ +import { userInfo } from 'os'; +import React, { useState, useEffect } from 'react' + +interface User { + id: number; + name: string; + email: string; +} + +const UsersPage = async () => { + // Get the json file + const res = await fetch( + 'https://jsonplaceholder.typicode.com/users', + // Option to disable caching entirely, useful for data that changes frequently. + {cache: 'no-store'} + + // Option to store the data within the cache for a certain period of time + // { next: { revalidate: 10 }} // get fresh data every 10 seconds + ); + // Create an object that will hold the users within the json file + const users: User[] = await res.json(); + // Create a cache in order to hold the data for later(useful for tokens) + + + return ( + <> +

Users

+ {/*

{new Date().toLocaleTimeString()}

*/} + {/* instead of an unordered list, we'll use a table +
    + {users.map(user =>
  • {user.name}
    • )} +
*/} + + + + + + + + + {users.map(user=> + + + )} + +
NameEmail
{user.name}{user.email}
+ + ) +} + +export default UsersPage \ No newline at end of file diff --git a/Websites/jefes-nextjs/bun.lockb b/Websites/jefes-nextjs/bun.lockb index d0e86182822efe731d0e3fc2a6b37073590e354f..0cf1dc9e0f9cfe129da5cdd5b555ad2ef86d1bb0 100755 GIT binary patch delta 8268 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 a+l~C$-cTSX>d2;pZuk5nr=opHb^Zy#lNUk& diff --git a/Websites/jefes-nextjs/package.json b/Websites/jefes-nextjs/package.json index a73d828..4587845 100644 --- a/Websites/jefes-nextjs/package.json +++ b/Websites/jefes-nextjs/package.json @@ -15,14 +15,15 @@ "react-icons": "^4.11.0" }, "devDependencies": { - "typescript": "^5", "@types/node": "^20", "@types/react": "^18", "@types/react-dom": "^18", "autoprefixer": "^10", + "daisyui": "^3.9.3", + "eslint": "^8", + "eslint-config-next": "13.5.6", "postcss": "^8", "tailwindcss": "^3", - "eslint": "^8", - "eslint-config-next": "13.5.6" + "typescript": "^5" } } diff --git a/Websites/jefes-nextjs/tailwind.config.ts b/Websites/jefes-nextjs/tailwind.config.ts index c7ead80..f126cc7 100644 --- a/Websites/jefes-nextjs/tailwind.config.ts +++ b/Websites/jefes-nextjs/tailwind.config.ts @@ -15,6 +15,9 @@ const config: Config = { }, }, }, - plugins: [], + plugins: [require("daisyui")], + daisyui:{ + themes:["winter"], + }, } export default config