Function AlertExamples

docs/src/components/Examples/AlertExamples.tsx:316–645

()

}

export function AlertExamples() {
  const [starRating, setStarRating] = useState(0)

  return (
    <div className="card p-6 lg:p-8 space-y-12">
      {/* Header Section */}
      <header className="text-center space-y-3">
        <h2 className="text-2xl lg:text-3xl font-bold text-text">
          Alert System Showcase
        </h2>
        <p className="text-text-secondary text-lg max-w-2xl mx-auto leading-relaxed">
          A comprehensive collection of notification patterns that provide clear
          feedback and guide user interactions with semantic colors and
          meaningful animations.
        </p>
      </header>

      <div className="space-y-12">
        {/* Standard Alerts */}
        <section className="space-y-6">
          <div className="space-y-2">
            <h3 className="text-xl font-semibold text-text">Standard Alerts</h3>
            <p className="text-text-secondary">
              Essential feedback messages for user actions and system states
            </p>
          </div>

          <div className="grid grid-cols-1 lg:grid-cols-2 gap-4">
            <Alert
              dismissible
              description="Your profile information has been saved successfully. All changes are now live."
              title="Profile Updated"
              variant="success"
              action={{
                label: 'View Profile',
                onClick: () => console.info('View profile'),
                variant: 'primary',
              }}
            />

            <Alert
              dismissible
              description="We've added support for P3 wide color gamut in our latest release."
              title="Feature Update Available"
              variant="info"
              action={{
                label: 'Learn More',
                onClick: () => console.info('Learn more'),
                variant: 'secondary',
              }}
            />

            <Alert
              dismissible
              description="You've used 85% of your storage quota. Consider upgrading your plan."
              title="Storage Limit Approaching"
              variant="warning"
              action={{