mirror of
https://github.com/thegeneralist01/archivr
synced 2026-07-22 11:15:41 +02:00
102 lines
4 KiB
JavaScript
102 lines
4 KiB
JavaScript
export default {
|
||
title: 'UI Patterns',
|
||
tags: ['autodocs'],
|
||
};
|
||
|
||
export const Buttons = () => (
|
||
<div style={{ padding: '20px', display: 'flex', gap: '16px', flexWrap: 'wrap' }}>
|
||
<button className="capture-button">+ Capture</button>
|
||
<button className="nav-link">Nav Link</button>
|
||
<button className="nav-link is-active">Nav Link (Active)</button>
|
||
<button className="assign-tag-btn">Add Tag</button>
|
||
<button className="assign-tag-btn" style={{ pointerEvents: 'none', opacity: 0.6 }}>Disabled</button>
|
||
</div>
|
||
);
|
||
|
||
export const FormInputs = () => (
|
||
<div style={{ padding: '20px', maxWidth: '400px', display: 'flex', flexDirection: 'column', gap: '16px' }}>
|
||
<div>
|
||
<label style={{ display: 'block', marginBottom: '6px', color: 'var(--muted)', fontSize: '12px' }}>Search Input</label>
|
||
<input className="search-input" type="search" placeholder="Search archive..." />
|
||
</div>
|
||
<div>
|
||
<label style={{ display: 'block', marginBottom: '6px', color: 'var(--muted)', fontSize: '12px' }}>Capture Input</label>
|
||
<input className="capture-input" type="text" placeholder="tweet:1234567890 or https://..." />
|
||
</div>
|
||
<div>
|
||
<label style={{ display: 'block', marginBottom: '6px', color: 'var(--muted)', fontSize: '12px' }}>Tag Input</label>
|
||
<input className="assign-tag-input" type="text" placeholder="/science/cs" />
|
||
</div>
|
||
<div>
|
||
<label style={{ display: 'block', marginBottom: '6px', color: 'var(--muted)', fontSize: '12px' }}>Archive Switcher</label>
|
||
<select className="archive-switcher" style={{ width: '100%' }}>
|
||
<option>Main Archive</option>
|
||
<option>Research</option>
|
||
<option>Screenshots</option>
|
||
</select>
|
||
</div>
|
||
</div>
|
||
);
|
||
|
||
export const Pills = () => (
|
||
<div style={{ padding: '20px', display: 'flex', gap: '8px', flexWrap: 'wrap' }}>
|
||
<span className="type-pill">page</span>
|
||
<span className="type-pill">video</span>
|
||
<span className="type-pill">tweet_thread</span>
|
||
<span className="type-pill">file</span>
|
||
</div>
|
||
);
|
||
|
||
export const TagPills = () => (
|
||
<div style={{ padding: '20px', display: 'flex', gap: '8px', flexWrap: 'wrap' }}>
|
||
<span className="tag-pill">
|
||
science
|
||
<button className="remove-tag">×</button>
|
||
</span>
|
||
<span className="tag-pill">
|
||
computer-science
|
||
<button className="remove-tag">×</button>
|
||
</span>
|
||
<span className="tag-pill">
|
||
learning
|
||
<button className="remove-tag">×</button>
|
||
</span>
|
||
</div>
|
||
);
|
||
|
||
export const ColorPalette = () => (
|
||
<div style={{ padding: '20px', display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(200px, 1fr))', gap: '16px' }}>
|
||
<div>
|
||
<div style={{ height: '80px', background: 'var(--ink)', marginBottom: '8px', borderRadius: '4px' }} />
|
||
<strong>Ink</strong> (#20251f)
|
||
</div>
|
||
<div>
|
||
<div style={{ height: '80px', background: 'var(--paper)', border: '1px solid var(--line)', marginBottom: '8px', borderRadius: '4px' }} />
|
||
<strong>Paper</strong> (#f5f0e7)
|
||
</div>
|
||
<div>
|
||
<div style={{ height: '80px', background: 'var(--accent)', marginBottom: '8px', borderRadius: '4px' }} />
|
||
<strong>Accent</strong> (#8d3f30)
|
||
</div>
|
||
<div>
|
||
<div style={{ height: '80px', background: 'var(--accent-2)', marginBottom: '8px', borderRadius: '4px' }} />
|
||
<strong>Accent 2</strong> (#b78342)
|
||
</div>
|
||
<div>
|
||
<div style={{ height: '80px', background: 'var(--link)', marginBottom: '8px', borderRadius: '4px' }} />
|
||
<strong>Link</strong> (#245f72)
|
||
</div>
|
||
<div>
|
||
<div style={{ height: '80px', background: 'var(--top)', marginBottom: '8px', borderRadius: '4px' }} />
|
||
<strong>Top</strong> (#141d18)
|
||
</div>
|
||
<div>
|
||
<div style={{ height: '80px', background: 'var(--muted)', marginBottom: '8px', borderRadius: '4px' }} />
|
||
<strong>Muted</strong> (#666a61)
|
||
</div>
|
||
<div>
|
||
<div style={{ height: '80px', background: 'var(--line)', marginBottom: '8px', borderRadius: '4px' }} />
|
||
<strong>Line</strong> (#d2c6b5)
|
||
</div>
|
||
</div>
|
||
);
|