diff --git a/apps/www/src/app/examples/page.tsx b/apps/www/src/app/examples/page.tsx index 008b3a39f..4b0263308 100644 --- a/apps/www/src/app/examples/page.tsx +++ b/apps/www/src/app/examples/page.tsx @@ -42,6 +42,7 @@ const Page = () => { const [dialogOpen, setDialogOpen] = useState(false); const [nestedDialogOpen, setNestedDialogOpen] = useState(false); const [dialogDrawerOpen, setDialogDrawerOpen] = useState(false); + const [dialogSheetOpen, setDialogSheetOpen] = useState(false); const [search1, setSearch1] = useState(''); const [search2, setSearch2] = useState(''); const [search3, setSearch3] = useState(''); @@ -125,46 +126,45 @@ const Page = () => { - - Main - - - - Tabs Examples - - - - - Account - - Password - - Settings - - Account settings - Password settings - Other settings - - + + + + Examples + + + + + + + - {`const button = (x>=2 && y!=3) + > + + Main + + {`const button = (x>=2 && y!=3) const getLoaderOnlyClass = (size) => size === 'small' ? styles['loader-only-button-small'] @@ -180,239 +180,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: - - - - - - - - - - - - - - - - - - - - - + + + Hello + + } + /> + + Hello this is a long dummy text that spans multiple lines and + is quite lengthy. It is used to demonstrate the functionality + of the tooltip component in various scenarios. Hello this is a + long dummy text that spans multiple lines and is quite + lengthy. It is used to demonstrate the functionality of the + tooltip component in various scenarios. + + + + + + + - {/* Small Size */} - - Small Size: - - - - - - - - - - - - - - - - - - - - + {/* Button Examples */} + + Button Examples - All Combinations + + + {/* Solid Variant */} + + Solid Variant + + {/* Normal Size */} + + Normal Size: + + + + + + + + + + + + + + + + + + + + + + + + {/* Small Size */} + + Small Size: + + + + + + + + + + + + + + + + + + + + + - - {/* Outline Variant */} - - Outline Variant + {/* Outline Variant */} + + Outline Variant - {/* Normal Size */} - - Normal Size: - - - - - - - - - - - - - - - - - - - - + {/* Normal Size */} + + Normal Size: + + + + + + + + + + + + + + + + + + + + + - - {/* Small Size */} - - Small Size: - - - - - - - - - - - - - - - - - - - - + {/* Small Size */} + + Small Size: + + + + + + + + + + + + + + + + + + + + + - - {/* Ghost Variant */} - - Ghost Variant + {/* Ghost Variant */} + + Ghost Variant - {/* Normal Size */} - - Normal Size: - - - - - - - - - - - - - - - - - - - - + {/* Normal Size */} + + Normal Size: + + + + + + + + + + + + + + + + + + + + + + + + {/* Small Size */} + + Small Size: + + + + + + + + + + + + + + + + + + + + + - {/* Small Size */} - - Small Size: - - - - - - - - - - - - - - - - - - - - + {/* Text Variant */} + + Text Variant + + {/* Normal Size */} + + Normal Size: + + + + + + + + + + + + + + + + + + + + + + + + {/* Small Size */} + + Small Size: + + + + + + + + + + + + + + + + + + + + + - - {/* Text Variant */} - - Text Variant + + Spinner Examples + - {/* Normal Size */} - - Normal Size: - - - - - - - - - - - - - - - - - - - - + + + + + + + + - {/* Small Size */} - - Small Size: - - - - - - - - - - - - - - - - - - - - + + Button Loading States Examples + + + + {/* Solid Variant */} + + Solid Variant (Inverted Spinner) + + + + + + + + {/* Outline Variant */} + + + Outline Variant (Matching Color Spinner) + + + + + + + + + {/* Ghost Variant */} + + + Ghost Variant (Matching Color Spinner for colored) + + + + + + + + + {/* Text Variant */} + + + Text Variant (Matching Color Spinner for colored) + + + + + + + + + + {/* Size Variants */} + + Size Variants + + + + + + + + + {/* Loading with and without text */} + + Loading With/Without Text + + + + + + + + + {/* Disabled Loading State */} + + Disabled Loading State + + + + + + + + ) => + setSearch2(e.target.value) + } + onClear={() => setSearch2('')} + /> + + ) => + setSearch3(e.target.value) + } + onClear={() => setSearch3('')} + /> + + ) => + setSearch4(e.target.value) + } + onClear={() => setSearch4('')} + /> + {/* Select component examples */} - Spinner 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' + /> + +