This commit is contained in:
@@ -45,16 +45,16 @@ const BasicDemo = () => {
|
||||
return Drawer({
|
||||
id: 'basic-drawer',
|
||||
open: isOpen,
|
||||
side: Div({ class: 'p-4' }, [
|
||||
Div({ class: 'text-lg font-bold mb-4' }, 'Menu'),
|
||||
Div({ class: 'flex flex-col gap-2' }, [
|
||||
Button({ class: 'btn btn-ghost justify-start' }, 'Home'),
|
||||
Button({ class: 'btn btn-ghost justify-start' }, 'About'),
|
||||
Button({ class: 'btn btn-ghost justify-start' }, 'Contact')
|
||||
side: div({ class: 'p-4' }, [
|
||||
div({ class: 'text-lg font-bold mb-4' }, 'Menu'),
|
||||
div({ class: 'flex flex-col gap-2' }, [
|
||||
button({ class: 'btn btn-ghost justify-start' }, 'Home'),
|
||||
button({ class: 'btn btn-ghost justify-start' }, 'About'),
|
||||
button({ class: 'btn btn-ghost justify-start' }, 'Contact')
|
||||
])
|
||||
]),
|
||||
content: Div({ class: 'p-4 text-center' }, [
|
||||
Button({
|
||||
content: div({ class: 'p-4 text-center' }, [
|
||||
button({
|
||||
class: 'btn btn-primary',
|
||||
onclick: () => isOpen(true)
|
||||
}, 'Open Drawer')
|
||||
@@ -88,31 +88,31 @@ const NavDrawer = () => {
|
||||
return Drawer({
|
||||
id: 'nav-drawer',
|
||||
open: isOpen,
|
||||
side: Div({ class: 'p-4 w-64' }, [
|
||||
Div({ class: 'text-xl font-bold mb-6' }, 'MyApp'),
|
||||
Div({ class: 'flex flex-col gap-1' }, [
|
||||
Button({
|
||||
side: div({ class: 'p-4 w-64' }, [
|
||||
div({ class: 'text-xl font-bold mb-6' }, 'MyApp'),
|
||||
div({ class: 'flex flex-col gap-1' }, [
|
||||
button({
|
||||
class: `btn btn-ghost justify-start ${activePage() === 'home' ? 'btn-active' : ''}`,
|
||||
onclick: () => {
|
||||
activePage('home');
|
||||
isOpen(false);
|
||||
}
|
||||
}, '🏠 Home'),
|
||||
Button({
|
||||
button({
|
||||
class: `btn btn-ghost justify-start ${activePage() === 'about' ? 'btn-active' : ''}`,
|
||||
onclick: () => {
|
||||
activePage('about');
|
||||
isOpen(false);
|
||||
}
|
||||
}, 'ℹ️ About'),
|
||||
Button({
|
||||
button({
|
||||
class: `btn btn-ghost justify-start ${activePage() === 'services' ? 'btn-active' : ''}`,
|
||||
onclick: () => {
|
||||
activePage('services');
|
||||
isOpen(false);
|
||||
}
|
||||
}, '⚙️ Services'),
|
||||
Button({
|
||||
button({
|
||||
class: `btn btn-ghost justify-start ${activePage() === 'contact' ? 'btn-active' : ''}`,
|
||||
onclick: () => {
|
||||
activePage('contact');
|
||||
@@ -121,18 +121,18 @@ const NavDrawer = () => {
|
||||
}, '📧 Contact')
|
||||
])
|
||||
]),
|
||||
content: Div({ class: 'p-4' }, [
|
||||
Div({ class: 'flex justify-between items-center mb-4' }, [
|
||||
Button({
|
||||
content: div({ class: 'p-4' }, [
|
||||
div({ class: 'flex justify-between items-center mb-4' }, [
|
||||
button({
|
||||
class: 'btn btn-ghost btn-circle',
|
||||
onclick: () => isOpen(true)
|
||||
}, '☰'),
|
||||
Span({ class: 'text-lg font-bold' }, 'MyApp')
|
||||
span({ class: 'text-lg font-bold' }, 'MyApp')
|
||||
]),
|
||||
Div({ class: 'card bg-base-200 shadow-lg' }, [
|
||||
Div({ class: 'card-body' }, [
|
||||
Div({ class: 'text-2xl font-bold mb-2' }, () => activePage().charAt(0).toUpperCase() + activePage().slice(1)),
|
||||
Div({ class: 'text-lg' }, () => pages[activePage()])
|
||||
div({ class: 'card bg-base-200 shadow-lg' }, [
|
||||
div({ class: 'card-body' }, [
|
||||
div({ class: 'text-2xl font-bold mb-2' }, () => activePage().charAt(0).toUpperCase() + activePage().slice(1)),
|
||||
div({ class: 'text-lg' }, () => pages[activePage()])
|
||||
])
|
||||
])
|
||||
])
|
||||
@@ -160,17 +160,17 @@ const SettingsDrawer = () => {
|
||||
return Drawer({
|
||||
id: 'settings-drawer',
|
||||
open: isOpen,
|
||||
side: Div({ class: 'p-4 w-80' }, [
|
||||
Div({ class: 'flex justify-between items-center mb-6' }, [
|
||||
Span({ class: 'text-xl font-bold' }, 'Settings'),
|
||||
Button({
|
||||
side: div({ class: 'p-4 w-80' }, [
|
||||
div({ class: 'flex justify-between items-center mb-6' }, [
|
||||
span({ class: 'text-xl font-bold' }, 'Settings'),
|
||||
button({
|
||||
class: 'btn btn-ghost btn-circle btn-sm',
|
||||
onclick: () => isOpen(false)
|
||||
}, '✕')
|
||||
]),
|
||||
Div({ class: 'flex flex-col gap-4' }, [
|
||||
Div({ class: 'flex justify-between items-center' }, [
|
||||
Span({}, 'Dark Mode'),
|
||||
div({ class: 'flex flex-col gap-4' }, [
|
||||
div({ class: 'flex justify-between items-center' }, [
|
||||
span({}, 'Dark Mode'),
|
||||
Swap({
|
||||
value: darkMode,
|
||||
on: "🌙",
|
||||
@@ -178,8 +178,8 @@ const SettingsDrawer = () => {
|
||||
onclick: () => darkMode(!darkMode())
|
||||
})
|
||||
]),
|
||||
Div({ class: 'flex justify-between items-center' }, [
|
||||
Span({}, 'Notifications'),
|
||||
div({ class: 'flex justify-between items-center' }, [
|
||||
span({}, 'Notifications'),
|
||||
Swap({
|
||||
value: notifications,
|
||||
on: "🔔",
|
||||
@@ -187,8 +187,8 @@ const SettingsDrawer = () => {
|
||||
onclick: () => notifications(!notifications())
|
||||
})
|
||||
]),
|
||||
Div({ class: 'flex justify-between items-center' }, [
|
||||
Span({}, 'Auto Save'),
|
||||
div({ class: 'flex justify-between items-center' }, [
|
||||
span({}, 'Auto Save'),
|
||||
Swap({
|
||||
value: autoSave,
|
||||
on: "✅",
|
||||
@@ -197,37 +197,37 @@ const SettingsDrawer = () => {
|
||||
})
|
||||
])
|
||||
]),
|
||||
Div({ class: 'divider my-4' }),
|
||||
Div({ class: 'flex gap-2' }, [
|
||||
Button({
|
||||
div({ class: 'divider my-4' }),
|
||||
div({ class: 'flex gap-2' }, [
|
||||
button({
|
||||
class: 'btn btn-primary flex-1',
|
||||
onclick: () => {
|
||||
isOpen(false);
|
||||
Toast('Settings saved!', 'alert-success', 2000);
|
||||
}
|
||||
}, 'Save'),
|
||||
Button({
|
||||
button({
|
||||
class: 'btn btn-ghost flex-1',
|
||||
onclick: () => isOpen(false)
|
||||
}, 'Cancel')
|
||||
])
|
||||
]),
|
||||
content: Div({ class: 'p-4' }, [
|
||||
Div({ class: 'flex justify-between items-center' }, [
|
||||
Span({ class: 'text-lg font-bold' }, 'Dashboard'),
|
||||
Button({
|
||||
content: div({ class: 'p-4' }, [
|
||||
div({ class: 'flex justify-between items-center' }, [
|
||||
span({ class: 'text-lg font-bold' }, 'Dashboard'),
|
||||
button({
|
||||
class: 'btn btn-ghost btn-circle',
|
||||
onclick: () => isOpen(true)
|
||||
}, '⚙️')
|
||||
]),
|
||||
Div({ class: 'mt-4 grid grid-cols-2 gap-4' }, [
|
||||
Div({ class: 'stat bg-base-200 rounded-lg p-4' }, [
|
||||
Div({ class: 'stat-title' }, 'Users'),
|
||||
Div({ class: 'stat-value' }, '1,234')
|
||||
div({ class: 'mt-4 grid grid-cols-2 gap-4' }, [
|
||||
div({ class: 'stat bg-base-200 rounded-lg p-4' }, [
|
||||
div({ class: 'stat-title' }, 'Users'),
|
||||
div({ class: 'stat-value' }, '1,234')
|
||||
]),
|
||||
Div({ class: 'stat bg-base-200 rounded-lg p-4' }, [
|
||||
Div({ class: 'stat-title' }, 'Revenue'),
|
||||
Div({ class: 'stat-value' }, '$45K')
|
||||
div({ class: 'stat bg-base-200 rounded-lg p-4' }, [
|
||||
div({ class: 'stat-title' }, 'Revenue'),
|
||||
div({ class: 'stat-value' }, '$45K')
|
||||
])
|
||||
])
|
||||
])
|
||||
@@ -268,70 +268,70 @@ const CartDrawer = () => {
|
||||
return Drawer({
|
||||
id: 'cart-drawer',
|
||||
open: isOpen,
|
||||
side: Div({ class: 'flex flex-col h-full' }, [
|
||||
Div({ class: 'p-4 border-b border-base-300' }, [
|
||||
Div({ class: 'flex justify-between items-center' }, [
|
||||
Span({ class: 'text-xl font-bold' }, `Cart (${cart().length} items)`),
|
||||
Button({
|
||||
side: div({ class: 'flex flex-col h-full' }, [
|
||||
div({ class: 'p-4 border-b border-base-300' }, [
|
||||
div({ class: 'flex justify-between items-center' }, [
|
||||
span({ class: 'text-xl font-bold' }, `Cart (${cart().length} items)`),
|
||||
button({
|
||||
class: 'btn btn-ghost btn-circle btn-sm',
|
||||
onclick: () => isOpen(false)
|
||||
}, Span('✕'))
|
||||
}, span('✕'))
|
||||
])
|
||||
]),
|
||||
Div({ class: 'flex-1 overflow-y-auto p-4' }, cart().length === 0
|
||||
? Div({ class: 'text-center text-gray-500 mt-8' }, 'Your cart is empty')
|
||||
: Div({ class: 'flex flex-col gap-3' }, cart().map(item =>
|
||||
Div({ class: 'flex gap-3 items-center p-2 bg-base-200 rounded-lg' }, [
|
||||
Div({ class: 'flex-1' }, [
|
||||
Div({ class: 'font-medium' }, item.name),
|
||||
Div({ class: 'text-sm' }, `$${item.price} each`)
|
||||
div({ class: 'flex-1 overflow-y-auto p-4' }, cart().length === 0
|
||||
? div({ class: 'text-center text-gray-500 mt-8' }, 'Your cart is empty')
|
||||
: div({ class: 'flex flex-col gap-3' }, cart().map(item =>
|
||||
div({ class: 'flex gap-3 items-center p-2 bg-base-200 rounded-lg' }, [
|
||||
div({ class: 'flex-1' }, [
|
||||
div({ class: 'font-medium' }, item.name),
|
||||
div({ class: 'text-sm' }, `$${item.price} each`)
|
||||
]),
|
||||
Div({ class: 'flex items-center gap-2' }, [
|
||||
Button({
|
||||
div({ class: 'flex items-center gap-2' }, [
|
||||
button({
|
||||
class: 'btn btn-xs btn-circle',
|
||||
onclick: () => updateQuantity(item.id, -1)
|
||||
}, Span('-')),
|
||||
Span({ class: 'w-8 text-center' }, item.quantity),
|
||||
Button({
|
||||
}, span('-')),
|
||||
span({ class: 'w-8 text-center' }, item.quantity),
|
||||
button({
|
||||
class: 'btn btn-xs btn-circle',
|
||||
onclick: () => updateQuantity(item.id, 1)
|
||||
}, Span('+'))
|
||||
}, span('+'))
|
||||
]),
|
||||
Span({ class: 'font-bold w-16 text-right' }, `$${item.price * item.quantity}`)
|
||||
span({ class: 'font-bold w-16 text-right' }, `$${item.price * item.quantity}`)
|
||||
])
|
||||
))
|
||||
),
|
||||
Div({ class: 'p-4 border-t border-base-300' }, [
|
||||
Div({ class: 'flex justify-between items-center mb-4' }, [
|
||||
Span({ class: 'font-bold' }, 'Total'),
|
||||
Span({ class: 'text-xl font-bold' }, () => `$${total()}`)
|
||||
div({ class: 'p-4 border-t border-base-300' }, [
|
||||
div({ class: 'flex justify-between items-center mb-4' }, [
|
||||
span({ class: 'font-bold' }, 'Total'),
|
||||
span({ class: 'text-xl font-bold' }, () => `$${total()}`)
|
||||
]),
|
||||
Button({
|
||||
button({
|
||||
class: 'btn btn-primary w-full',
|
||||
onclick: () => {
|
||||
isOpen(false);
|
||||
Toast('Checkout initiated!', 'alert-success', 2000);
|
||||
},
|
||||
disabled: () => cart().length === 0
|
||||
}, Span('Checkout'))
|
||||
}, span('Checkout'))
|
||||
])
|
||||
]),
|
||||
content: Div({ class: 'p-4' }, [
|
||||
Div({ class: 'flex justify-between items-center' }, [
|
||||
Span({ class: 'text-lg font-bold' }, 'Store'),
|
||||
Button({
|
||||
content: div({ class: 'p-4' }, [
|
||||
div({ class: 'flex justify-between items-center' }, [
|
||||
span({ class: 'text-lg font-bold' }, 'Store'),
|
||||
button({
|
||||
class: 'btn btn-primary',
|
||||
onclick: () => isOpen(true)
|
||||
}, Span({ class: 'flex items-center gap-2' }, [Span('🛒'), Span(`Cart (${cart().length})`)]))
|
||||
}, span({ class: 'flex items-center gap-2' }, [span('🛒'), span(`Cart (${cart().length})`)]))
|
||||
]),
|
||||
Div({ class: 'mt-4 grid grid-cols-2 gap-4' }, [
|
||||
Button({
|
||||
div({ class: 'mt-4 grid grid-cols-2 gap-4' }, [
|
||||
button({
|
||||
class: 'btn btn-outline h-32 flex flex-col',
|
||||
onclick: () => {
|
||||
cart([...cart(), { id: Date.now(), name: 'New Product', price: 39, quantity: 1 }]);
|
||||
Toast('Added to cart!', 'alert-success', 1500);
|
||||
}
|
||||
}, Span({ class: 'flex flex-col items-center gap-1' }, [Span('📦'), Span('Add to Cart')]))
|
||||
}, span({ class: 'flex flex-col items-center gap-1' }, [span('📦'), span('Add to Cart')]))
|
||||
])
|
||||
])
|
||||
});
|
||||
@@ -353,22 +353,22 @@ const ResponsiveDrawer = () => {
|
||||
const isOpen = $(false);
|
||||
const activePage = $('home');
|
||||
|
||||
const MenuItems = () => Div({ class: 'flex flex-col gap-1 p-4' }, [
|
||||
Button({
|
||||
const MenuItems = () => div({ class: 'flex flex-col gap-1 p-4' }, [
|
||||
button({
|
||||
class: `btn btn-ghost justify-start ${activePage() === 'home' ? 'btn-active' : ''}`,
|
||||
onclick: () => {
|
||||
activePage('home');
|
||||
if (window.innerWidth < 1024) isOpen(false);
|
||||
}
|
||||
}, '🏠 Home'),
|
||||
Button({
|
||||
button({
|
||||
class: `btn btn-ghost justify-start ${activePage() === 'analytics' ? 'btn-active' : ''}`,
|
||||
onclick: () => {
|
||||
activePage('analytics');
|
||||
if (window.innerWidth < 1024) isOpen(false);
|
||||
}
|
||||
}, '📊 Analytics'),
|
||||
Button({
|
||||
button({
|
||||
class: `btn btn-ghost justify-start ${activePage() === 'settings' ? 'btn-active' : ''}`,
|
||||
onclick: () => {
|
||||
activePage('settings');
|
||||
@@ -380,24 +380,24 @@ const ResponsiveDrawer = () => {
|
||||
return Drawer({
|
||||
id: 'responsive-drawer',
|
||||
open: isOpen,
|
||||
side: Div({ class: 'w-64' }, [
|
||||
Div({ class: 'text-xl font-bold p-4 border-b border-base-300' }, 'Menu'),
|
||||
side: div({ class: 'w-64' }, [
|
||||
div({ class: 'text-xl font-bold p-4 border-b border-base-300' }, 'Menu'),
|
||||
MenuItems()
|
||||
]),
|
||||
content: Div({ class: 'flex' }, [
|
||||
Div({ class: 'hidden lg:block w-64 border-r border-base-300' }, [MenuItems()]),
|
||||
Div({ class: 'flex-1 p-4' }, [
|
||||
Div({ class: 'flex justify-between items-center lg:hidden mb-4' }, [
|
||||
Button({
|
||||
content: div({ class: 'flex' }, [
|
||||
div({ class: 'hidden lg:block w-64 border-r border-base-300' }, [MenuItems()]),
|
||||
div({ class: 'flex-1 p-4' }, [
|
||||
div({ class: 'flex justify-between items-center lg:hidden mb-4' }, [
|
||||
button({
|
||||
class: 'btn btn-ghost btn-circle',
|
||||
onclick: () => isOpen(true)
|
||||
}, '☰'),
|
||||
Span({ class: 'text-lg font-bold' }, 'MyApp')
|
||||
span({ class: 'text-lg font-bold' }, 'MyApp')
|
||||
]),
|
||||
Div({ class: 'card bg-base-200' }, [
|
||||
Div({ class: 'card-body' }, [
|
||||
Div({ class: 'text-2xl font-bold' }, () => activePage().charAt(0).toUpperCase() + activePage().slice(1)),
|
||||
Div({}, 'Content area. On desktop, the menu is always visible on the left.')
|
||||
div({ class: 'card bg-base-200' }, [
|
||||
div({ class: 'card-body' }, [
|
||||
div({ class: 'text-2xl font-bold' }, () => activePage().charAt(0).toUpperCase() + activePage().slice(1)),
|
||||
div({}, 'Content area. On desktop, the menu is always visible on the left.')
|
||||
])
|
||||
])
|
||||
])
|
||||
@@ -438,30 +438,30 @@ const FormDrawer = () => {
|
||||
return Drawer({
|
||||
id: 'form-drawer',
|
||||
open: isOpen,
|
||||
side: Div({ class: 'p-4 w-96' }, [
|
||||
Div({ class: 'flex justify-between items-center mb-4' }, [
|
||||
Span({ class: 'text-xl font-bold' }, 'Contact Us'),
|
||||
Button({
|
||||
side: div({ class: 'p-4 w-96' }, [
|
||||
div({ class: 'flex justify-between items-center mb-4' }, [
|
||||
span({ class: 'text-xl font-bold' }, 'Contact Us'),
|
||||
button({
|
||||
class: 'btn btn-ghost btn-circle btn-sm',
|
||||
onclick: () => isOpen(false)
|
||||
}, '✕')
|
||||
]),
|
||||
Div({ class: 'flex flex-col gap-4' }, [
|
||||
Input({
|
||||
div({ class: 'flex flex-col gap-4' }, [
|
||||
input({
|
||||
label: 'Name',
|
||||
value: name,
|
||||
placeholder: 'Your name',
|
||||
oninput: (e) => name(e.target.value)
|
||||
}),
|
||||
Input({
|
||||
input({
|
||||
label: 'Email',
|
||||
type: 'email',
|
||||
value: email,
|
||||
placeholder: 'your@email.com',
|
||||
oninput: (e) => email(e.target.value)
|
||||
}),
|
||||
Div({ class: 'form-control' }, [
|
||||
Span({ class: 'label-text mb-1' }, 'Message'),
|
||||
div({ class: 'form-control' }, [
|
||||
span({ class: 'label-text mb-1' }, 'Message'),
|
||||
h('textarea', {
|
||||
class: 'textarea textarea-bordered h-24',
|
||||
placeholder: 'Your message',
|
||||
@@ -469,20 +469,20 @@ const FormDrawer = () => {
|
||||
oninput: (e) => message(e.target.value)
|
||||
})
|
||||
]),
|
||||
Div({ class: 'flex gap-2 mt-2' }, [
|
||||
Button({
|
||||
div({ class: 'flex gap-2 mt-2' }, [
|
||||
button({
|
||||
class: 'btn btn-primary flex-1',
|
||||
onclick: handleSubmit
|
||||
}, 'Send'),
|
||||
Button({
|
||||
button({
|
||||
class: 'btn btn-ghost flex-1',
|
||||
onclick: () => isOpen(false)
|
||||
}, 'Cancel')
|
||||
])
|
||||
])
|
||||
]),
|
||||
content: Div({ class: 'p-4 text-center' }, [
|
||||
Button({
|
||||
content: div({ class: 'p-4 text-center' }, [
|
||||
button({
|
||||
class: 'btn btn-primary',
|
||||
onclick: () => isOpen(true)
|
||||
}, 'Contact Us')
|
||||
|
||||
Reference in New Issue
Block a user