daisyui config
This commit is contained in:
parent
05325381e6
commit
ffbdfc644b
@ -7,9 +7,9 @@
|
|||||||
]
|
]
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"@redwoodjs/core": "8.3.0",
|
"@redwoodjs/core": "8.4.0",
|
||||||
"@redwoodjs/project-config": "8.3.0",
|
"@redwoodjs/project-config": "8.4.0",
|
||||||
"prettier-plugin-tailwindcss": "^0.5.12"
|
"prettier-plugin-tailwindcss": "^0.6.8"
|
||||||
},
|
},
|
||||||
"eslintConfig": {
|
"eslintConfig": {
|
||||||
"extends": "@redwoodjs/eslint-config",
|
"extends": "@redwoodjs/eslint-config",
|
||||||
|
|||||||
@ -1,9 +1,14 @@
|
|||||||
/** @type {import('tailwindcss').Config} */
|
/** @type {import('tailwindcss').Config} */
|
||||||
|
import daisyui from "daisyui"
|
||||||
|
|
||||||
module.exports = {
|
module.exports = {
|
||||||
content: ['src/**/*.{js,jsx,ts,tsx}'],
|
content: ['src/**/*.{js,jsx,ts,tsx}'],
|
||||||
theme: {
|
theme: {
|
||||||
extend: {},
|
extend: {},
|
||||||
},
|
},
|
||||||
plugins: [],
|
plugins: [daisyui,],
|
||||||
|
daisyui: {
|
||||||
|
themes: ["light", "dark", "cupcake"],
|
||||||
|
},
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@ -11,18 +11,19 @@
|
|||||||
]
|
]
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@redwoodjs/forms": "8.3.0",
|
"@redwoodjs/forms": "8.4.0",
|
||||||
"@redwoodjs/router": "8.3.0",
|
"@redwoodjs/router": "8.4.0",
|
||||||
"@redwoodjs/web": "8.3.0",
|
"@redwoodjs/web": "8.4.0",
|
||||||
"humanize-string": "2.1.0",
|
"humanize-string": "2.1.0",
|
||||||
"react": "18.3.1",
|
"react": "18.3.1",
|
||||||
"react-dom": "18.3.1"
|
"react-dom": "18.3.1"
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"@redwoodjs/vite": "8.3.0",
|
"@redwoodjs/vite": "8.4.0",
|
||||||
"@types/react": "^18.2.55",
|
"@types/react": "^18.2.55",
|
||||||
"@types/react-dom": "^18.2.19",
|
"@types/react-dom": "^18.2.19",
|
||||||
"autoprefixer": "^10.4.20",
|
"autoprefixer": "^10.4.20",
|
||||||
|
"daisyui": "^4.12.13",
|
||||||
"postcss": "^8.4.47",
|
"postcss": "^8.4.47",
|
||||||
"postcss-loader": "^8.1.1",
|
"postcss-loader": "^8.1.1",
|
||||||
"tailwindcss": "^3.4.13"
|
"tailwindcss": "^3.4.13"
|
||||||
|
|||||||
@ -42,6 +42,7 @@ const Routes = () => {
|
|||||||
</Set>
|
</Set>
|
||||||
<Set wrap={ClientLayout}>
|
<Set wrap={ClientLayout}>
|
||||||
<Route path="/home" page={HomePage} name="home" />
|
<Route path="/home" page={HomePage} name="home" />
|
||||||
|
<Route path="/hero" page={HeroPage} name="hero" />
|
||||||
<Route notfound page={NotFoundPage} />
|
<Route notfound page={NotFoundPage} />
|
||||||
</Set>
|
</Set>
|
||||||
</Router>
|
</Router>
|
||||||
|
|||||||
26
web/src/components/SideBar/SideBar.stories.tsx
Normal file
26
web/src/components/SideBar/SideBar.stories.tsx
Normal file
@ -0,0 +1,26 @@
|
|||||||
|
// Pass props to your component by passing an `args` object to your story
|
||||||
|
//
|
||||||
|
// ```tsx
|
||||||
|
// export const Primary: Story = {
|
||||||
|
// args: {
|
||||||
|
// propName: propValue
|
||||||
|
// }
|
||||||
|
// }
|
||||||
|
// ```
|
||||||
|
//
|
||||||
|
// See https://storybook.js.org/docs/react/writing-stories/args.
|
||||||
|
|
||||||
|
import type { Meta, StoryObj } from '@storybook/react'
|
||||||
|
|
||||||
|
import SideBar from './SideBar'
|
||||||
|
|
||||||
|
const meta: Meta<typeof SideBar> = {
|
||||||
|
component: SideBar,
|
||||||
|
tags: ['autodocs'],
|
||||||
|
}
|
||||||
|
|
||||||
|
export default meta
|
||||||
|
|
||||||
|
type Story = StoryObj<typeof SideBar>
|
||||||
|
|
||||||
|
export const Primary: Story = {}
|
||||||
14
web/src/components/SideBar/SideBar.test.tsx
Normal file
14
web/src/components/SideBar/SideBar.test.tsx
Normal file
@ -0,0 +1,14 @@
|
|||||||
|
import { render } from '@redwoodjs/testing/web'
|
||||||
|
|
||||||
|
import SideBar from './SideBar'
|
||||||
|
|
||||||
|
// Improve this test with help from the Redwood Testing Doc:
|
||||||
|
// https://redwoodjs.com/docs/testing#testing-components
|
||||||
|
|
||||||
|
describe('SideBar', () => {
|
||||||
|
it('renders successfully', () => {
|
||||||
|
expect(() => {
|
||||||
|
render(<SideBar />)
|
||||||
|
}).not.toThrow()
|
||||||
|
})
|
||||||
|
})
|
||||||
10
web/src/components/SideBar/SideBar.tsx
Normal file
10
web/src/components/SideBar/SideBar.tsx
Normal file
@ -0,0 +1,10 @@
|
|||||||
|
const SideBar = () => {
|
||||||
|
return (
|
||||||
|
<div>
|
||||||
|
<h2>{'SideBar'}</h2>
|
||||||
|
<p>{'Find me in ./web/src/components/SideBar/SideBar.tsx'}</p>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export default SideBar
|
||||||
@ -1,5 +1,5 @@
|
|||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html lang="en">
|
<html lang="en" data-theme="cupcake">
|
||||||
|
|
||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8" />
|
<meta charset="UTF-8" />
|
||||||
|
|||||||
@ -7,17 +7,174 @@ type ClientLayoutProps = {
|
|||||||
const ClientLayout = ({ children }: ClientLayoutProps) => {
|
const ClientLayout = ({ children }: ClientLayoutProps) => {
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<header>
|
<div className="drawer fixed top-20">
|
||||||
<h1>Redwood Blog</h1>
|
<input id="my-drawer" type="checkbox" className="drawer-toggle" />
|
||||||
<nav>
|
<div className="drawer-content">
|
||||||
<ul>
|
{/* Page content here */}
|
||||||
|
<label htmlFor="my-drawer" className="btn btn-square btn-xs drawer-button">>>></label>
|
||||||
|
</div>
|
||||||
|
<div className="drawer-side">
|
||||||
|
<label htmlFor="my-drawer" aria-label="close sidebar" className="drawer-overlay"></label>
|
||||||
|
<ul className="menu bg-base-200 text-base-content min-h-full w-80 p-4">
|
||||||
|
{/* Sidebar content here */}
|
||||||
|
<li><a>Sidebar Item 1</a></li>
|
||||||
|
<li><a>Sidebar Item 2</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="navbar bg-base-100">
|
||||||
|
<div className="flex-1">
|
||||||
|
<a className="btn btn-ghost text-xl">Pendantator</a>
|
||||||
|
</div>
|
||||||
|
<div className="flex-none">
|
||||||
|
<ul className="menu menu-horizontal px-1">
|
||||||
|
<li><Link to={routes.home()}>Home</Link></li>
|
||||||
<li>
|
<li>
|
||||||
<Link to={routes.home()}>Home</Link>
|
<details>
|
||||||
|
<summary>Parent</summary>
|
||||||
|
<ul className="bg-base-100 rounded-t-none p-2">
|
||||||
|
<li><a>Link 1</a></li>
|
||||||
|
<li><a>Link 2</a></li>
|
||||||
|
</ul>
|
||||||
|
</details>
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div className="dropdown dropdown-end">
|
||||||
|
<div tabIndex={0} role="button" className="btn btn-ghost btn-circle">
|
||||||
|
<div className="indicator">
|
||||||
|
<svg
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
className="h-5 w-5"
|
||||||
|
fill="none"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
stroke="currentColor">
|
||||||
|
<path
|
||||||
|
strokeLinecap="round"
|
||||||
|
strokeLinejoin="round"
|
||||||
|
strokeWidth="2"
|
||||||
|
d="M3 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13l-2.293 2.293c-.63.63-.184 1.707.707 1.707H17m0 0a2 2 0 100 4 2 2 0 000-4zm-8 2a2 2 0 11-4 0 2 2 0 014 0z" />
|
||||||
|
</svg>
|
||||||
|
<span className="badge badge-sm indicator-item">8</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
tabIndex={0}
|
||||||
|
className="card card-compact dropdown-content bg-base-100 z-[1] mt-3 w-52 shadow">
|
||||||
|
<div className="card-body">
|
||||||
|
<span className="text-lg font-bold">8 Items</span>
|
||||||
|
<span className="text-info">Subtotal: $999</span>
|
||||||
|
<div className="card-actions">
|
||||||
|
<button className="btn btn-primary btn-block">View cart</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="dropdown dropdown-end">
|
||||||
|
<div tabIndex={0} role="button" className="btn btn-ghost btn-circle avatar">
|
||||||
|
<div className="w-10 rounded-full">
|
||||||
|
<img
|
||||||
|
alt="Tailwind CSS Navbar component"
|
||||||
|
src="https://img.daisyui.com/images/stock/photo-1534528741775-53994a69daeb.webp" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<ul
|
||||||
|
tabIndex={0}
|
||||||
|
className="menu menu-sm dropdown-content bg-base-100 rounded-box z-[1] mt-3 w-52 p-2 shadow">
|
||||||
|
<li>
|
||||||
|
<a className="justify-between">
|
||||||
|
Profile
|
||||||
|
<span className="badge">New</span>
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
<li><a>Settings</a></li>
|
||||||
|
<li><a>Logout</a></li>
|
||||||
|
</ul>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<main>{children}</main>
|
||||||
|
</div>
|
||||||
|
<footer className="footer bg-base-200 text-base-content p-10">
|
||||||
|
<nav>
|
||||||
|
<h6 className="footer-title">Services</h6>
|
||||||
|
<a className="link link-hover">Branding</a>
|
||||||
|
<a className="link link-hover">Design</a>
|
||||||
|
<a className="link link-hover">Marketing</a>
|
||||||
|
<a className="link link-hover">Advertisement</a>
|
||||||
|
</nav>
|
||||||
|
<nav>
|
||||||
|
<h6 className="footer-title">Company</h6>
|
||||||
|
<a className="link link-hover">About us</a>
|
||||||
|
<a className="link link-hover">Contact</a>
|
||||||
|
<a className="link link-hover">Jobs</a>
|
||||||
|
<a className="link link-hover">Press kit</a>
|
||||||
|
</nav>
|
||||||
|
<nav>
|
||||||
|
<h6 className="footer-title">Legal</h6>
|
||||||
|
<a className="link link-hover">Terms of use</a>
|
||||||
|
<a className="link link-hover">Privacy policy</a>
|
||||||
|
<a className="link link-hover">Cookie policy</a>
|
||||||
|
</nav>
|
||||||
|
</footer>
|
||||||
|
<footer className="fixed bottom-0 footer bg-base-200 text-base-content border-base-300 border-t px-10 py-4">
|
||||||
|
<aside className="grid-flow-col items-center">
|
||||||
|
<svg
|
||||||
|
width="24"
|
||||||
|
height="24"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
fillRule="evenodd"
|
||||||
|
clipRule="evenodd"
|
||||||
|
className="fill-current">
|
||||||
|
<path
|
||||||
|
d="M22.672 15.226l-2.432.811.841 2.515c.33 1.019-.209 2.127-1.23 2.456-1.15.325-2.148-.321-2.463-1.226l-.84-2.518-5.013 1.677.84 2.517c.391 1.203-.434 2.542-1.831 2.542-.88 0-1.601-.564-1.86-1.314l-.842-2.516-2.431.809c-1.135.328-2.145-.317-2.463-1.229-.329-1.018.211-2.127 1.231-2.456l2.432-.809-1.621-4.823-2.432.808c-1.355.384-2.558-.59-2.558-1.839 0-.817.509-1.582 1.327-1.846l2.433-.809-.842-2.515c-.33-1.02.211-2.129 1.232-2.458 1.02-.329 2.13.209 2.461 1.229l.842 2.515 5.011-1.677-.839-2.517c-.403-1.238.484-2.553 1.843-2.553.819 0 1.585.509 1.85 1.326l.841 2.517 2.431-.81c1.02-.33 2.131.211 2.461 1.229.332 1.018-.21 2.126-1.23 2.456l-2.433.809 1.622 4.823 2.433-.809c1.242-.401 2.557.484 2.557 1.838 0 .819-.51 1.583-1.328 1.847m-8.992-6.428l-5.01 1.675 1.619 4.828 5.011-1.674-1.62-4.829z"></path>
|
||||||
|
</svg>
|
||||||
|
<p>
|
||||||
|
ACME Industries Ltd.
|
||||||
|
<br />
|
||||||
|
Providing reliable tech since 1992
|
||||||
|
</p>
|
||||||
|
</aside>
|
||||||
|
<nav className="md:place-self-center md:justify-self-end">
|
||||||
|
<div className="grid grid-flow-col gap-4">
|
||||||
|
<a>
|
||||||
|
<svg
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
width="24"
|
||||||
|
height="24"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
className="fill-current">
|
||||||
|
<path
|
||||||
|
d="M24 4.557c-.883.392-1.832.656-2.828.775 1.017-.609 1.798-1.574 2.165-2.724-.951.564-2.005.974-3.127 1.195-.897-.957-2.178-1.555-3.594-1.555-3.179 0-5.515 2.966-4.797 6.045-4.091-.205-7.719-2.165-10.148-5.144-1.29 2.213-.669 5.108 1.523 6.574-.806-.026-1.566-.247-2.229-.616-.054 2.281 1.581 4.415 3.949 4.89-.693.188-1.452.232-2.224.084.626 1.956 2.444 3.379 4.6 3.419-2.07 1.623-4.678 2.348-7.29 2.04 2.179 1.397 4.768 2.212 7.548 2.212 9.142 0 14.307-7.721 13.995-14.646.962-.695 1.797-1.562 2.457-2.549z"></path>
|
||||||
|
</svg>
|
||||||
|
</a>
|
||||||
|
<a>
|
||||||
|
<svg
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
width="24"
|
||||||
|
height="24"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
className="fill-current">
|
||||||
|
<path
|
||||||
|
d="M19.615 3.184c-3.604-.246-11.631-.245-15.23 0-3.897.266-4.356 2.62-4.385 8.816.029 6.185.484 8.549 4.385 8.816 3.6.245 11.626.246 15.23 0 3.897-.266 4.356-2.62 4.385-8.816-.029-6.185-.484-8.549-4.385-8.816zm-10.615 12.816v-8l8 3.993-8 4.007z"></path>
|
||||||
|
</svg>
|
||||||
|
</a>
|
||||||
|
<a>
|
||||||
|
<svg
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
width="24"
|
||||||
|
height="24"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
className="fill-current">
|
||||||
|
<path
|
||||||
|
d="M9 8h-3v4h3v12h5v-12h3.642l.358-4h-4v-1.667c0-.955.192-1.333 1.115-1.333h2.885v-5h-3.808c-3.596 0-5.192 1.583-5.192 4.615v3.385z"></path>
|
||||||
|
</svg>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
</nav>
|
</nav>
|
||||||
</header>
|
</footer>
|
||||||
<main>{children}</main>
|
|
||||||
</>
|
</>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|||||||
13
web/src/pages/HeroPage/HeroPage.stories.tsx
Normal file
13
web/src/pages/HeroPage/HeroPage.stories.tsx
Normal file
@ -0,0 +1,13 @@
|
|||||||
|
import type { Meta, StoryObj } from '@storybook/react'
|
||||||
|
|
||||||
|
import HeroPage from './HeroPage'
|
||||||
|
|
||||||
|
const meta: Meta<typeof HeroPage> = {
|
||||||
|
component: HeroPage,
|
||||||
|
}
|
||||||
|
|
||||||
|
export default meta
|
||||||
|
|
||||||
|
type Story = StoryObj<typeof HeroPage>
|
||||||
|
|
||||||
|
export const Primary: Story = {}
|
||||||
14
web/src/pages/HeroPage/HeroPage.test.tsx
Normal file
14
web/src/pages/HeroPage/HeroPage.test.tsx
Normal file
@ -0,0 +1,14 @@
|
|||||||
|
import { render } from '@redwoodjs/testing/web'
|
||||||
|
|
||||||
|
import HeroPage from './HeroPage'
|
||||||
|
|
||||||
|
// Improve this test with help from the Redwood Testing Doc:
|
||||||
|
// https://redwoodjs.com/docs/testing#testing-pages-layouts
|
||||||
|
|
||||||
|
describe('HeroPage', () => {
|
||||||
|
it('renders successfully', () => {
|
||||||
|
expect(() => {
|
||||||
|
render(<HeroPage />)
|
||||||
|
}).not.toThrow()
|
||||||
|
})
|
||||||
|
})
|
||||||
21
web/src/pages/HeroPage/HeroPage.tsx
Normal file
21
web/src/pages/HeroPage/HeroPage.tsx
Normal file
@ -0,0 +1,21 @@
|
|||||||
|
// import { Link, routes } from '@redwoodjs/router'
|
||||||
|
import { Metadata } from '@redwoodjs/web'
|
||||||
|
|
||||||
|
const HeroPage = () => {
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<Metadata title="Hero" description="Hero page" />
|
||||||
|
|
||||||
|
<h1>HeroPage</h1>
|
||||||
|
<p>
|
||||||
|
Find me in <code>./web/src/pages/HeroPage/HeroPage.tsx</code>
|
||||||
|
</p>
|
||||||
|
{/*
|
||||||
|
My default route is named `hero`, link to me with:
|
||||||
|
`<Link to={routes.hero()}>Hero</Link>`
|
||||||
|
*/}
|
||||||
|
</>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export default HeroPage
|
||||||
Loading…
Reference in New Issue
Block a user