Initial commit
This commit is contained in:
75
StandardComponents.js
Normal file
75
StandardComponents.js
Normal file
@@ -0,0 +1,75 @@
|
||||
export const standardComponents = [
|
||||
{
|
||||
category: 'Layout',
|
||||
components: [
|
||||
{ type: 'Container', label: 'Container', default: { component: 'div', style: { width: '30%', height: '20%', backgroundColor: 'var(--panel-color)', border: '1px solid #e5e7eb', borderRadius: '0.25rem', padding: '1rem', display: 'flex', flexDirection: 'column', gap: '0.5rem' } } },
|
||||
{ type: 'Grid', label: 'Grid', default: { component: 'div', style: { width: '50%', height: '30%', display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: '1rem', padding: '1rem', backgroundColor: 'var(--bg-color)', border: '1px dashed var(--border-color)', borderRadius: 'var(--border-radius)' } } },
|
||||
{ type: 'Divider', label: 'Divider', default: { component: 'div', style: { width: '100%', height: '1px', backgroundColor: 'var(--border-color)', margin: '1rem 0', borderRadius: 'var(--border-radius)' } } },
|
||||
{ type: 'Spacer', label: 'Spacer', default: { component: 'div', style: { width: '100%', height: '50px', backgroundColor: 'transparent', border: '1px dashed var(--border-color)', borderRadius: 'var(--border-radius)' } } },
|
||||
]
|
||||
},
|
||||
{
|
||||
category: 'Typography',
|
||||
components: [
|
||||
{ type: 'Heading1', label: 'Heading 1', default: { component: 'h1', props: { text: 'Heading 1' }, style: { width: 'auto', height: 'auto', color: 'var(--text-color)', fontSize: '2.25rem', fontWeight: '700', lineHeight: '1.2', margin: '0' } } },
|
||||
{ type: 'Heading2', label: 'Heading 2', default: { component: 'h2', props: { text: 'Heading 2' }, style: { width: 'auto', height: 'auto', color: 'var(--text-color)', fontSize: '1.5rem', fontWeight: '600', lineHeight: '1.3', margin: '0' } } },
|
||||
{ type: 'Paragraph', label: 'Paragraph', default: { component: 'p', props: { text: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.' }, style: { width: '40%', height: 'auto', color: 'var(--text-color-darker)', fontSize: '1rem', lineHeight: '1.5' } } },
|
||||
{ type: 'Link', label: 'Link', default: { component: 'a', props: { text: 'Click here', href: '#' }, style: { width: 'auto', height: 'auto', color: 'var(--accent-color)', textDecoration: 'underline', cursor: 'pointer' } } },
|
||||
]
|
||||
},
|
||||
{
|
||||
category: 'Forms',
|
||||
components: [
|
||||
{ type: 'Button', label: 'Button', default: { component: 'button', props: { text: 'Submit' }, style: { width: 'auto', height: 'auto', backgroundColor: 'var(--accent-color)', color: 'var(--text-color)', border: 'none', padding: '0.5rem 1rem', borderRadius: 'var(--border-radius)', cursor: 'pointer', fontWeight: '500', fontSize: '1rem' } } },
|
||||
{ type: 'TextInput', label: 'Text Input', default: { component: 'input', props: { type: 'text', placeholder: 'Enter text...' }, style: { width: '30%', height: 'auto', padding: '0.5rem', border: '1px solid #d1d5db', borderRadius: 'var(--border-radius)', backgroundColor: 'var(--panel-color)', color: 'var(--text-color)', fontSize: '1rem' } } },
|
||||
{ type: 'TextArea', label: 'Text Area', default: { component: 'textarea', props: { placeholder: 'Enter description...' }, style: { width: '30%', height: '15%', padding: '0.5rem', border: '1px solid #d1d5db', borderRadius: 'var(--border-radius)', backgroundColor: 'var(--panel-color)', color: 'var(--text-color)', fontSize: '1rem', resize: 'vertical' } } },
|
||||
{ type: 'Checkbox', label: 'Checkbox', default: { component: 'input', props: { type: 'checkbox' }, style: { width: '1.25rem', height: '1.25rem', cursor: 'pointer', accentColor: 'var(--accent-color)' } } },
|
||||
{ type: 'RadioButton', label: 'Radio Button', default: { component: 'input', props: { type: 'radio' }, style: { width: '1.25rem', height: '1.25rem', cursor: 'pointer', accentColor: 'var(--accent-color)' } } },
|
||||
{ type: 'Select', label: 'Select Dropdown', default: { component: 'select', style: { width: '30%', height: 'auto', padding: '0.5rem', border: '1px solid #d1d5db', borderRadius: 'var(--border-radius)', backgroundColor: 'var(--panel-color)', fontSize: '1rem' } } },
|
||||
{ type: 'Slider', label: 'Slider', default: { component: 'input', props: { type: 'range' }, style: { width: '30%', height: 'auto', cursor: 'pointer' } } },
|
||||
{ type: 'ToggleSwitch', label: 'Toggle Switch', default: { component: 'div', style: { width: '3rem', height: '1.5rem', backgroundColor: 'var(--border-color)', borderRadius: '9999px', position: 'relative', cursor: 'pointer', border: '1px solid var(--border-color)' } } },
|
||||
{ type: 'PasswordInput', label: 'Password Input', default: { component: 'input', props: { type: 'password', placeholder: 'Password' }, style: { width: '30%', height: 'auto', padding: '0.5rem', border: '1px solid #d1d5db', borderRadius: 'var(--border-radius)', backgroundColor: 'var(--panel-color)', fontSize: '1rem' } } },
|
||||
{ type: 'SearchInput', label: 'Search Input', default: { component: 'input', props: { type: 'search', placeholder: 'Search...' }, style: { width: '30%', height: 'auto', padding: '0.5rem', border: '1px solid #d1d5db', borderRadius: 'var(--border-radius)', backgroundColor: 'var(--panel-color)', fontSize: '1rem' } } },
|
||||
{ type: 'DatePicker', label: 'Date Picker', default: { component: 'input', props: { type: 'date' }, style: { width: 'auto', height: 'auto', padding: '0.5rem', border: '1px solid #d1d5db', borderRadius: 'var(--border-radius)', backgroundColor: 'var(--panel-color)', color: 'var(--text-color-darker)' } } },
|
||||
]
|
||||
},
|
||||
{
|
||||
category: 'Content',
|
||||
components: [
|
||||
{ type: 'Image', label: 'Image', default: { component: 'img', props: { src: 'https://via.placeholder.com/300x200/3b82f6/e5e7eb?text=Image' }, style: { width: '30%', height: 'auto', borderRadius: 'var(--border-radius)', objectFit: 'cover', display: 'block', border: '1px solid var(--border-color)' } } },
|
||||
{ type: 'Card', label: 'Card', default: { component: 'div', style: { width: '30%', height: '40%', backgroundColor: 'var(--panel-color)', border: '1px solid var(--border-color)', borderRadius: 'var(--border-radius)', padding: '1.5rem', boxShadow: '0 1px 3px 0 rgba(0, 0, 0, 0.1)' } } },
|
||||
{ type: 'Icon', label: 'Icon', default: { component: 'div', style: { width: '24px', height: '24px', backgroundColor: 'var(--text-color-darker)', borderRadius: '50%' } } },
|
||||
{ type: 'List', label: 'List', default: { component: 'ul', style: { width: '30%', height: 'auto', listStyleType: 'disc', paddingLeft: '1.5rem', color: 'var(--text-color)' } } },
|
||||
{ type: 'Avatar', label: 'Avatar', default: { component: 'div', style: { width: '3rem', height: '3rem', borderRadius: '50%', backgroundColor: 'var(--border-color)', display: 'flex', alignItems: 'center', justifyContent: 'center', overflow: 'hidden', border: '2px solid var(--panel-color)' } } },
|
||||
{ type: 'Badge', label: 'Badge', default: { component: 'span', props: { text: 'New' }, style: { width: 'auto', height: 'auto', backgroundColor: 'var(--accent-color)', color: 'var(--text-color)', padding: '0.25rem 0.625rem', borderRadius: '9999px', fontSize: '0.75rem', fontWeight: '600', display: 'inline-block' } } },
|
||||
{ type: 'Tags', label: 'Tags', default: { component: 'div', style: { display: 'flex', gap: '0.5rem', flexWrap: 'wrap', color: 'var(--text-color)' } } },
|
||||
{ type: 'Carousel', label: 'Carousel', default: { component: 'div', style: { width: '80%', height: '30%', border: '1px dashed var(--border-color)', display: 'flex', alignItems: 'center', justifyContent: 'center', backgroundColor: 'var(--bg-color)', color: 'var(--text-color-darker)' } } },
|
||||
{ type: 'Chart', label: 'Chart', default: { component: 'div', style: { border: '1px solid var(--border-color)', backgroundColor: 'var(--panel-color)', borderRadius: 'var(--border-radius)', display: 'flex', alignItems: 'center', justifyContent: 'center', color: 'var(--text-color-darker)' } } },
|
||||
]
|
||||
},
|
||||
{
|
||||
category: 'Navigation',
|
||||
components: [
|
||||
{ type: 'Navbar', label: 'Navbar', default: { component: 'nav', style: { width: '100%', height: '60px', backgroundColor: 'var(--panel-color)', color: 'var(--text-color)', display: 'flex', alignItems: 'center', padding: '0 1rem', justifyContent: 'space-between', borderRadius: 'var(--border-radius)' } } },
|
||||
{ type: 'Sidebar', label: 'Sidebar', default: { component: 'aside', style: { width: '250px', height: '100%', backgroundColor: 'var(--panel-color)', borderRight: '1px solid var(--border-color)', padding: '1rem', borderRadius: 'var(--border-radius)' } } },
|
||||
{ type: 'Breadcrumbs', label: 'Breadcrumbs', default: { component: 'div', style: { width: 'auto', height: 'auto', display: 'flex', gap: '0.5rem', color: 'var(--text-color-darker)', fontSize: '0.875rem' } } },
|
||||
{ type: 'Tabs', label: 'Tabs', default: { component: 'div', style: { width: '50%', height: 'auto', display: 'flex', borderBottom: '1px solid var(--border-color)', color: 'var(--text-color)', borderRadius: 'var(--border-radius)' } } },
|
||||
{ type: 'Pagination', label: 'Pagination', default: { component: 'div', style: { width: 'auto', height: 'auto', display: 'flex', gap: '0.25rem', color: 'var(--text-color)' } } },
|
||||
]
|
||||
},
|
||||
{
|
||||
category: 'Feedback',
|
||||
components: [
|
||||
{ type: 'Alert', label: 'Alert', default: { component: 'div', props: { text: 'Info: This is an alert message.' }, style: { width: '70%', height: 'auto', padding: '1rem', backgroundColor: 'var(--bg-color)', color: 'var(--accent-color)', border: '1px solid var(--border-color)', borderRadius: 'var(--border-radius)' } } },
|
||||
{ type: 'Tooltip', label: 'Tooltip', default: { component: 'div', style: { width: 'auto', height: 'auto', padding: '0.25rem 0.5rem', backgroundColor: 'var(--panel-color)', color: 'var(--text-color)', borderRadius: 'var(--border-radius)', fontSize: '0.75rem', display: 'inline-block' } } },
|
||||
backgroundColor: 'var(--panel-color)', borderRadius: 'var(--border-radius)', boxShadow: '0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)', padding: '1.5rem', position: 'relative' } } },
|
||||
{ type: 'ProgressBar', label: 'Progress Bar', default: { component: 'div', style: { width: '80%', height: '0.75rem', backgroundColor: 'var(--border-color)', borderRadius: '9999px', overflow: 'hidden' } } },
|
||||
{ type: 'Toast', label: 'Toast', default: { component: 'div', style: { width: 'auto', height: 'auto', padding: '1rem', backgroundColor: 'var(--panel-color)', borderRadius: 'var(--border-radius)', boxShadow: '0 4px 6px -1px rgba(0, 0, 0, 0.1)', display: 'flex', alignItems: 'center', gap: '0.75rem' } } },
|
||||
]
|
||||
},
|
||||
{
|
||||
category: 'Media',
|
||||
components: [
|
||||
{ type: 'Video', label: 'Video Player', default: { component: 'div', props: { src: 'https://www.youtube.com/embed/dQw4w9WgXcQ' }, style: { width: '60%', height: '200px', backgroundColor: 'var(--bg-color)', border: '1px solid var(--border-color)', borderRadius: 'var(--border-radius)', overflow: 'hidden' } } },
|
||||
{ type: 'Map', label: 'Map', default: { component: 'div', props: { src: 'https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2001.3547844111358!2d-0.12760888636495267!3d51.50735098939634!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x47d91ba81881729f%3A0x6717a6a75f8f533!2sBig%20Ben!5e0!3m2!1sen!2suk!4v1678234567890!5m2!1sen!2suk' }, style: { width: '80%', height: '300px', backgroundColor: 'var(--bg-color)', border: '1px solid var(--border-color)', borderRadius: 'var(--border-radius)', overflow: 'hidden' } } },
|
||||
]
|
||||
Reference in New Issue
Block a user