updated tailwind config to support daisyui
This commit is contained in:
parent
a9ff8cee4e
commit
d8c8bd7667
15
Websites/jefes-nextjs/app/components/AddToCart.tsx
Normal file
15
Websites/jefes-nextjs/app/components/AddToCart.tsx
Normal file
@ -0,0 +1,15 @@
|
||||
"use client";
|
||||
import React from 'react'
|
||||
|
||||
const AddToCart = () => {
|
||||
return (
|
||||
<div>
|
||||
{/* <button onClick={() => console.log('Click')}>Add to Cart</button> normal button */}
|
||||
|
||||
{/* Button using DaisyUi */}
|
||||
<button className="btn btn-primary" onClick={() => console.log('Click')}>Add to Cart</button>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default AddToCart
|
||||
@ -0,0 +1,4 @@
|
||||
.card {
|
||||
padding: 1rem;
|
||||
border: 1px solid #ccc;
|
||||
}
|
||||
@ -0,0 +1,21 @@
|
||||
import React from 'react';
|
||||
import AddToCart from '../AddToCart';
|
||||
// import styles from './ProductCard.module.css';
|
||||
|
||||
const ProductCard = () => {
|
||||
return (
|
||||
// <div className={styles.card}> style using css file
|
||||
|
||||
// style using tailwind
|
||||
// <div className='p-5 my-5 bg-sky-400 text-white text-xl hover:bg-sky-600'>
|
||||
// <AddToCart />
|
||||
// </div>
|
||||
|
||||
// style using daisyUi component instead
|
||||
<div>
|
||||
<AddToCart />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default ProductCard
|
||||
@ -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;
|
||||
}
|
||||
|
||||
|
||||
@ -15,7 +15,7 @@ export default function RootLayout({
|
||||
children: React.ReactNode
|
||||
}) {
|
||||
return (
|
||||
<html lang="en">
|
||||
<html lang="en" data-theme="winter">
|
||||
<body className={inter.className}>{children}</body>
|
||||
</html>
|
||||
)
|
||||
|
||||
@ -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 (
|
||||
<main className="flex min-h-screen flex-col items-center justify-between p-24">
|
||||
<main>
|
||||
<h1>Hello World</h1>
|
||||
<Link href="/users">Users</Link>
|
||||
<ProductCard/>
|
||||
</main>
|
||||
)
|
||||
}
|
||||
|
||||
9
Websites/jefes-nextjs/app/users/nested/page.tsx
Normal file
9
Websites/jefes-nextjs/app/users/nested/page.tsx
Normal file
@ -0,0 +1,9 @@
|
||||
import React from 'react'
|
||||
|
||||
const Nested = () => {
|
||||
return (
|
||||
<div>Nested</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default Nested
|
||||
51
Websites/jefes-nextjs/app/users/page.tsx
Normal file
51
Websites/jefes-nextjs/app/users/page.tsx
Normal file
@ -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 (
|
||||
<>
|
||||
<h1>Users</h1>
|
||||
{/* <p>{new Date().toLocaleTimeString()}</p> */}
|
||||
{/* instead of an unordered list, we'll use a table
|
||||
<ul>
|
||||
{users.map(user => <li key={user.id}>{user.name}</li>)}
|
||||
</ul> */}
|
||||
<table className='table table-bordered'>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
<th>Email</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{users.map(user=> <tr key={user.id}>
|
||||
<td>{user.name}</td>
|
||||
<td>{user.email}</td>
|
||||
</tr>)}
|
||||
</tbody>
|
||||
</table>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
export default UsersPage
|
||||
Binary file not shown.
@ -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"
|
||||
}
|
||||
}
|
||||
|
||||
@ -15,6 +15,9 @@ const config: Config = {
|
||||
},
|
||||
},
|
||||
},
|
||||
plugins: [],
|
||||
plugins: [require("daisyui")],
|
||||
daisyui:{
|
||||
themes:["winter"],
|
||||
},
|
||||
}
|
||||
export default config
|
||||
|
||||
Loading…
Reference in New Issue
Block a user