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=> + + + )} + +
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 d0e8618..0cf1dc9 100755 Binary files a/Websites/jefes-nextjs/bun.lockb and b/Websites/jefes-nextjs/bun.lockb differ 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