Improve showcase pages: drawers, modals, badges, and Vite caching fix
- DTDrawer: storefront-matching dual-element bevel border, slide-in/out animations from correct edge, 99vh height, bold 2em header, box shadow - DTModal: interactive demos on Bevels page with all 5 mode variants - Badges: solid color fill with contrasting text (black on dark, white on light) instead of transparent fill with colored text - Animations: add dt-slide-right and dt-slide-left keyframes for drawers - Bevels page: remove trash "Button Bevels", add interactive modal/drawer demos, fix media frame to use real images with proper bevel styling - Advanced Cards: remove redundant media frame sections, rename "Menu Items" to "Buttons", remove DTButton/dt-btn references - Forms page: rename "Menu Items" to "Buttons" - Vite config: exclude design system packages from optimizeDeps pre-bundling and watch dist directories to prevent stale CSS during development Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
michael
@@ -1,10 +1,14 @@
|
||||
import { DTCard, DTMediaFrame } from '@dangerousthings/react';
|
||||
import { useState } from 'react';
|
||||
import { DTCard, DTModal, DTDrawer } from '@dangerousthings/react';
|
||||
import type { DTVariant } from '@dangerousthings/tokens';
|
||||
import { Section, Row, CodeLabel } from '../components/Section';
|
||||
|
||||
const modes: DTVariant[] = ['normal', 'emphasis', 'warning', 'success', 'other'];
|
||||
|
||||
export function BevelsPage() {
|
||||
const [modalVariant, setModalVariant] = useState<DTVariant | null>(null);
|
||||
const [drawerSide, setDrawerSide] = useState<'right' | 'left' | null>(null);
|
||||
|
||||
return (
|
||||
<>
|
||||
<h1 className="page-title">Bevels</h1>
|
||||
@@ -21,55 +25,59 @@ export function BevelsPage() {
|
||||
<CodeLabel text="<DTCard> (no title prop)" />
|
||||
</Section>
|
||||
|
||||
<Section title="Button Bevels" description="Top-right corner cut. Filled buttons use direct clip-path, outline uses dual-element.">
|
||||
<Section title="Badge Bevels" description="Top-right bevel with dual-element technique. Color variants via CSS custom properties.">
|
||||
<Row>
|
||||
<button className="btn-primary" type="button">PRIMARY</button>
|
||||
<button className="btn-secondary" type="button">SECONDARY</button>
|
||||
<button className="btn-danger" type="button">DANGER</button>
|
||||
</Row>
|
||||
<CodeLabel text=".btn-primary | .btn-secondary | .btn-danger" />
|
||||
</Section>
|
||||
|
||||
<Section title="Badge Bevels" description="Top-right bevel with dual-element technique. Color variants via CSS custom properties.">
|
||||
<Row>
|
||||
<span className="badge">Default</span>
|
||||
<span className="badge badge-success">Success</span>
|
||||
<span className="badge badge-error">Error</span>
|
||||
<span className="badge badge-warning">Warning</span>
|
||||
<span className="badge badge-info">Info</span>
|
||||
<span className="badge">DEFAULT</span>
|
||||
<span className="badge badge-success">IN STOCK</span>
|
||||
<span className="badge badge-error">SOLD OUT</span>
|
||||
<span className="badge badge-warning">LAB</span>
|
||||
<span className="badge badge-info">NFC</span>
|
||||
</Row>
|
||||
<CodeLabel text=".badge | .badge-success | .badge-error | .badge-warning | .badge-info" />
|
||||
</Section>
|
||||
|
||||
<Section title="Media Frame Bevels" description="Diagonal opposite corners (top-left + bottom-right).">
|
||||
<DTMediaFrame>
|
||||
<div style={{ background: 'var(--color-primary)', width: '100%', aspectRatio: '16/9', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
|
||||
<span style={{ color: 'var(--color-bg)', fontWeight: 700 }}>MEDIA FRAME</span>
|
||||
<Section title="Media Frame Bevels" description="Diagonal opposite corners (top-left + bottom-right). Dual-element border with inner surface fill.">
|
||||
<div className="grid grid-cols-3 gap-dt-4">
|
||||
<div className="dt-bevel-media mode-normal" style={{ aspectRatio: '16/9' }}>
|
||||
<img src="https://images.unsplash.com/photo-1550751827-4bd374c3f58b?w=600&h=338&fit=crop" alt="" style={{ width: '100%', height: '100%', objectFit: 'cover' }} />
|
||||
</div>
|
||||
</DTMediaFrame>
|
||||
<CodeLabel text="<DTMediaFrame> or .dt-bevel-media" />
|
||||
</Section>
|
||||
|
||||
<Section title="Modal Bevels" description="Dual bottom bevels at bevel-lg scale.">
|
||||
<div className="dt-bevel-modal" style={{ background: 'var(--color-primary)', padding: 'var(--space-8)', textAlign: 'center' }}>
|
||||
<div style={{ background: 'var(--color-surface)', padding: 'var(--space-6)' }}>
|
||||
<div style={{ fontWeight: 700, textTransform: 'uppercase' }}>Modal Content</div>
|
||||
<div style={{ color: 'var(--color-text-muted)', marginTop: 'var(--space-2)' }}>Large dual bottom bevels</div>
|
||||
<div className="dt-bevel-media mode-emphasis" style={{ aspectRatio: '16/9' }}>
|
||||
<img src="https://images.unsplash.com/photo-1518770660439-4636190af475?w=600&h=338&fit=crop" alt="" style={{ width: '100%', height: '100%', objectFit: 'cover' }} />
|
||||
</div>
|
||||
<div className="dt-bevel-media mode-warning" style={{ aspectRatio: '16/9' }} />
|
||||
</div>
|
||||
<CodeLabel text=".dt-bevel-modal" />
|
||||
<CodeLabel text=".dt-bevel-media | .dt-bevel-media (no img = 'MISSING MEDIA' placeholder)" />
|
||||
</Section>
|
||||
|
||||
<Section title="Drawer Bevels" description="Exposed-edge bevels for sliding panels.">
|
||||
<Section title="Modals" description="Beveled card dialog with backdrop blur. Click to open, click backdrop or press Escape to dismiss.">
|
||||
<Row>
|
||||
<div className="dt-bevel-drawer-right" style={{ background: 'var(--color-primary)', padding: 'var(--space-6)', width: 200, height: 120, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
|
||||
<span style={{ color: 'var(--color-bg)', fontWeight: 700 }}>RIGHT</span>
|
||||
</div>
|
||||
<div className="dt-bevel-drawer-left" style={{ background: 'var(--color-primary)', padding: 'var(--space-6)', width: 200, height: 120, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
|
||||
<span style={{ color: 'var(--color-bg)', fontWeight: 700 }}>LEFT</span>
|
||||
</div>
|
||||
{modes.map(mode => (
|
||||
<button key={mode} className={`dt-menu-item mode-${mode}`} type="button" onClick={() => setModalVariant(mode)}>
|
||||
{mode.toUpperCase()} MODAL
|
||||
</button>
|
||||
))}
|
||||
</Row>
|
||||
<CodeLabel text=".dt-bevel-drawer-right | .dt-bevel-drawer-left" />
|
||||
<CodeLabel text="<DTModal variant='normal' visible onDismiss title='...'>content</DTModal>" />
|
||||
<DTModal visible={modalVariant !== null} onDismiss={() => setModalVariant(null)} variant={modalVariant ?? 'normal'} title={`${(modalVariant ?? 'normal').toUpperCase()} MODAL`}>
|
||||
<p style={{ marginBottom: 'var(--space-4)' }}>This is a <strong>{modalVariant}</strong> modal with beveled card shape, backdrop blur, and scale-in animation.</p>
|
||||
<p style={{ color: 'var(--color-text-muted)', fontSize: '0.85rem' }}>Click the backdrop or press Escape to dismiss.</p>
|
||||
</DTModal>
|
||||
</Section>
|
||||
|
||||
<Section title="Drawers" description="Sliding side panel with beveled edges. Click to open from either side.">
|
||||
<Row>
|
||||
<button className="dt-menu-item mode-emphasis" type="button" onClick={() => setDrawerSide('right')}>
|
||||
OPEN RIGHT DRAWER
|
||||
</button>
|
||||
<button className="dt-menu-item mode-other" type="button" onClick={() => setDrawerSide('left')}>
|
||||
OPEN LEFT DRAWER
|
||||
</button>
|
||||
</Row>
|
||||
<CodeLabel text="<DTDrawer position='right' heading='...' visible onDismiss>content</DTDrawer>" />
|
||||
<DTDrawer visible={drawerSide !== null} onDismiss={() => setDrawerSide(null)} position={drawerSide ?? 'right'} heading={`${(drawerSide ?? 'right').toUpperCase()} DRAWER`} headingVariant={drawerSide === 'left' ? 'other' : 'emphasis'}>
|
||||
<p style={{ marginBottom: 'var(--space-4)' }}>Sliding panel from the <strong>{drawerSide}</strong> edge with beveled corners and backdrop blur.</p>
|
||||
<p style={{ color: 'var(--color-text-muted)', fontSize: '0.85rem' }}>Click the backdrop, press Escape, or click ✕ to dismiss.</p>
|
||||
</DTDrawer>
|
||||
</Section>
|
||||
|
||||
<Section title="Small Bevel Utility" description="For compact elements — arrows, stepper buttons.">
|
||||
|
||||
Reference in New Issue
Block a user