diff --git a/apps/www/src/app/examples/page.tsx b/apps/www/src/app/examples/page.tsx index be8191c57..3c156e442 100644 --- a/apps/www/src/app/examples/page.tsx +++ b/apps/www/src/app/examples/page.tsx @@ -124,23 +124,45 @@ const Page = () => { - - Main - - + + + Examples + + + + + + + + + {`const button = (x>=2 && y!=3) + > + + Main + + {`const button = (x>=2 && y!=3) const getLoaderOnlyClass = (size) => size === 'small' ? styles['loader-only-button-small'] @@ -156,239 +178,102 @@ const Page = () => { /* comment */ /* ---------- __ */`} - {/* Navbar Examples */} - - Navbar Examples - - - - - Basic Navbar: - - - - Explore - - - - ) => - setSearch1(e.target.value) - } - onClear={() => setSearch1('')} - size='small' - style={{ width: '200px' }} - /> - - - - - - - - Sticky Navbar: - - - - Sticky Navigation - - - - - - - - - - - - - ) => - setSearch1(e.target.value) - } - onClear={() => setSearch1('')} - /> - console.log(value)} - calendarProps={{ - captionLayout: 'dropdown', - startMonth: dayjs().add(3, 'month').toDate(), - endMonth: dayjs().add(4, 'year').toDate(), - disabled: { - before: dayjs().add(3, 'month').toDate(), - after: dayjs().add(3, 'year').toDate() - }, - mode: 'single', - required: true, - selected: new Date() - }} - inputFieldProps={{ - size: 'small' - }} - /> - - - setRangeValue({ - from: range.from ?? new Date(), - to: range.to ?? new Date() - }) - } - calendarProps={{ - captionLayout: 'dropdown', - mode: 'range', - required: true, - selected: { - from: dayjs('2027-11-15').toDate(), - to: dayjs('2027-12-10').toDate() - }, - numberOfMonths: 2, - fromYear: 2024, - toYear: 2027, - startMonth: dayjs('2024-01-01').toDate(), - endMonth: dayjs('2027-12-01').toDate(), - defaultMonth: dayjs('2027-11-01').toDate() - }} - inputFieldsProps={{ - startDate: { - size: 'small' - }, - endDate: { + + ) => + setSearch1(e.target.value) + } + onClear={() => setSearch1('')} + /> + console.log(value)} + calendarProps={{ + captionLayout: 'dropdown', + startMonth: dayjs().add(3, 'month').toDate(), + endMonth: dayjs().add(4, 'year').toDate(), + disabled: { + before: dayjs().add(3, 'month').toDate(), + after: dayjs().add(3, 'year').toDate() + }, + mode: 'single', + required: true, + selected: new Date() + }} + inputFieldProps={{ size: 'small' + }} + /> + + + setRangeValue({ + from: range.from ?? new Date(), + to: range.to ?? new Date() + }) } - }} - /> - - - Some important message in the footer - - } - /> - - - - - Calendar with Date Info (Object) - + calendarProps={{ + captionLayout: 'dropdown', + mode: 'range', + required: true, + selected: { + from: dayjs('2027-11-15').toDate(), + to: dayjs('2027-12-10').toDate() + }, + numberOfMonths: 2, + fromYear: 2024, + toYear: 2027, + startMonth: dayjs('2024-01-01').toDate(), + endMonth: dayjs('2027-12-01').toDate(), + defaultMonth: dayjs('2027-11-01').toDate() + }} + inputFieldsProps={{ + startDate: { + size: 'small' + }, + endDate: { + size: 'small' + } + }} + /> - - - - 25% - - - ), - [dayjs().add(5, 'day').format('DD-MM-YYYY')]: ( - - - - 25% - - - ), - [dayjs().add(10, 'day').format('DD-MM-YYYY')]: ( - - - - 25% - - - ) - }} - /> + + Some important message in the footer + + } + /> + + - - Calendar with Date Info (Function) - + + Calendar with Date Info (Object) + - { - const today = new Date(); - const isToday = - date.getDate() === today.getDate() && - date.getMonth() === today.getMonth() && - date.getFullYear() === today.getFullYear(); - - // Show info on Sundays - if (date.getDay() === 0) { - return ( + { > - Sun + 25% - ); - } - - // Show info on 15th of any month - if (date.getDate() === 15) { - return ( + ), + [dayjs().add(5, 'day').format('DD-MM-YYYY')]: ( { > - 15th + 25% - ); - } - - // Show info for today - if (isToday) { - return ( + ), + [dayjs().add(10, 'day').format('DD-MM-YYYY')]: ( { > - Today + 25% - ); - } + ) + }} + /> - return null; - }} - /> + + Calendar with Date Info (Function) + - - Skeleton Examples - + { + const today = new Date(); + const isToday = + date.getDate() === today.getDate() && + date.getMonth() === today.getMonth() && + date.getFullYear() === today.getFullYear(); + + // Show info on Sundays + if (date.getDay() === 0) { + return ( + + + + Sun + + + ); + } - - - + // Show info on 15th of any month + if (date.getDate() === 15) { + return ( + + + + 15th + + + ); + } - - - - - + // Show info for today + if (isToday) { + return ( + + + + Today + + + ); + } - {/* Button Examples */} - - Button Examples - All Combinations - + return null; + }} + /> - {/* Solid Variant */} - - Solid Variant + + Skeleton Examples + - {/* Normal Size */} - - Normal Size: - - - - - - - - - - - - - - - - - - - - - + + + + + + + + - {/* Small Size */} - - Small Size: - - - - - - - - - - - - - - - - - - - - - - - + {/* Button Examples */} + + Button Examples - All Combinations + - {/* Outline Variant */} - - Outline Variant + {/* Solid Variant */} + + Solid Variant - {/* Normal Size */} - - Normal Size: - - - - - - - - - - - - - - - - - - - - + {/* Normal Size */} + + Normal Size: + + + + + + + + + + + + + + + + + + + + + - - {/* Small Size */} - - Small Size: - - - - - - - - - - - - - - - - - - - - + {/* Small Size */} + + Small Size: + + + + + + + + + + + + + + + + + + + + + - - {/* Ghost Variant */} - - Ghost Variant + {/* Outline Variant */} + + Outline Variant - {/* Normal Size */} - - Normal Size: - - - - - - - - - - - - - - - - - - - - + {/* Normal Size */} + + Normal Size: + + + + + + + + + + + + + + + + + + + + + - - {/* Small Size */} - - Small Size: - - - - - - - - - - - - - - - - - - - - + {/* Small Size */} + + Small Size: + + + + + + + + + + + + + + + + + + + + + - - {/* Text Variant */} - - Text Variant + {/* Ghost Variant */} + + Ghost Variant - {/* Normal Size */} - - Normal Size: - - - - - - - - - - - - - - - - - - - - + {/* Normal Size */} + + Normal Size: + + + + + + + + + + + + + + + + + + + + + - - {/* Small Size */} - - Small Size: - - - - - - - - - - - - - - - - - - - - + {/* Small Size */} + + Small Size: + + + + + + + + + + + + + + + + + + + + + - - - - Spinner Examples - - - - - - - - - - - - - - Button Loading States Examples - + {/* Text Variant */} + + Text Variant - - {/* Solid Variant */} - - Solid Variant (Inverted Spinner) - - - - + {/* Normal Size */} + + Normal Size: + + + + + + + + + + + + + + + + + + + + + - - {/* Outline Variant */} - - - Outline Variant (Matching Color Spinner) - - - - - + {/* Small Size */} + + Small Size: + + + + + + + + + + + + + + + + + + + + + - {/* Ghost Variant */} - - - Ghost Variant (Matching Color Spinner for colored) - + + Spinner Examples + + + - - - + + + + + + - {/* Text Variant */} - - - Text Variant (Matching Color Spinner for colored) - - - - - - + + Button Loading States Examples + + + + {/* Solid Variant */} + + Solid Variant (Inverted Spinner) + + + + + - - {/* Size Variants */} - - Size Variants - - - - - + {/* Outline Variant */} + + + Outline Variant (Matching Color Spinner) + + + + + + - - {/* Loading with and without text */} - - Loading With/Without Text - - - - - + {/* Ghost Variant */} + + + Ghost Variant (Matching Color Spinner for colored) + + + + + + - - {/* Disabled Loading State */} - - Disabled Loading State - - - - - + {/* Text Variant */} + + + Text Variant (Matching Color Spinner for colored) + + + + + + + - - - - ) => - setSearch2(e.target.value) - } - onClear={() => setSearch2('')} - /> - - ) => - setSearch3(e.target.value) - } - onClear={() => setSearch3('')} - /> - - ) => - setSearch4(e.target.value) - } - onClear={() => setSearch4('')} - /> - - {/* Select component examples */} - - Select Examples - - - } - heading='KYC required for image orders' - subHeading='Please contact your organization owner to complete the KYC process for the image orders. You can also contact support@raystack.io for assistance.' - primaryAction={ - - } - variant='empty1' - /> - -