Astryx Banner

'use client';

import Banner from '@/components/ui/astryx-banner';
import {Theme} from '@astryxdesign/core/theme';
import {neutralTheme} from '@astryxdesign/theme-neutral/built';
import {Button} from '@astryxdesign/core/Button';
import {List, ListItem} from '@astryxdesign/core/List';
import {Stack} from '@astryxdesign/core/Layout';
import {Text} from '@astryxdesign/core/Text';

export default function BannerCollapsibleContent() {
  return (
    <Theme theme={neutralTheme}>
      <div
        style={{
          minHeight: '100dvh',
          display: 'grid',
          placeItems: 'center',
          padding: 24,
        }}>
        <Banner
          status="warning"
          title="Configuration changes detected"
          description="Review the changes before they take effect."
          endContent={<Button label="Review" variant="secondary" size="sm" />}
          isDismissable
          defaultIsExpanded>
          <Stack direction="vertical" gap={2}>
            <Text type="supporting" color="secondary">
              Changed settings:
            </Text>
            <List density="compact">
              <ListItem label="Authentication method updated" />
              <ListItem label="Rate limits modified" />
            </List>
          </Stack>
        </Banner>
      </div>
    </Theme>
  );
}