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 {Stack} from '@astryxdesign/core/Layout';

export default function BannerWithActionButton() {
  return (
    <Theme theme={neutralTheme}>
      <div
        style={{
          minHeight: '100dvh',
          display: 'grid',
          placeItems: 'center',
          padding: 24,
        }}>
        <Stack direction="vertical" gap={3}>
          <Banner
            status="info"
            title="Your trial expires in 3 days"
            description="Upgrade now to keep access to all features."
            endContent={<Button label="Upgrade" variant="secondary" size="sm" />}
          />
          <Banner
            status="warning"
            title="API key expires soon"
            description="Generate a new key before December 1 to avoid service interruption."
            endContent={
              <Button label="Renew key" variant="secondary" size="sm" />
            }
          />
          <Banner
            status="error"
            title="Payment failed"
            description="We could not process your last payment."
            endContent={<Button label="Retry" variant="secondary" size="sm" />}
          />
        </Stack>
      </div>
    </Theme>
  );
}