mirror of
https://github.com/twinpath/app-beta.git
synced 2026-01-26 13:51:52 +07:00
first commit
This commit is contained in:
174
resources/views/pages/ui-elements/alerts.blade.php
Normal file
174
resources/views/pages/ui-elements/alerts.blade.php
Normal file
@@ -0,0 +1,174 @@
|
||||
@extends('layouts.app')
|
||||
|
||||
@section('content')
|
||||
<x-common.page-breadcrumb pageTitle="Alerts" />
|
||||
|
||||
<div class="space-y-5 sm:space-y-6">
|
||||
{{-- Success Alert --}}
|
||||
<x-common.component-card title="Success Alert">
|
||||
<div class="space-y-4">
|
||||
<x-ui.alert
|
||||
variant="success"
|
||||
title="Success Message"
|
||||
message="Be cautious when performing this action."
|
||||
:showLink="true"
|
||||
linkHref="/"
|
||||
linkText="Learn more"
|
||||
/>
|
||||
|
||||
<x-ui.alert
|
||||
variant="success"
|
||||
title="Success Message"
|
||||
message="Be cautious when performing this action."
|
||||
:showLink="false"
|
||||
/>
|
||||
</div>
|
||||
</x-common.component-card>
|
||||
|
||||
{{-- Warning Alert --}}
|
||||
<x-common.component-card title="Warning Alert">
|
||||
<div class="space-y-4">
|
||||
<x-ui.alert
|
||||
variant="warning"
|
||||
title="Warning Message"
|
||||
message="Be cautious when performing this action."
|
||||
:showLink="true"
|
||||
linkHref="/"
|
||||
linkText="Learn more"
|
||||
/>
|
||||
|
||||
<x-ui.alert
|
||||
variant="warning"
|
||||
title="Warning Message"
|
||||
message="Be cautious when performing this action."
|
||||
:showLink="false"
|
||||
/>
|
||||
</div>
|
||||
</x-common.component-card>
|
||||
|
||||
{{-- Error Alert --}}
|
||||
<x-common.component-card title="Error Alert">
|
||||
<div class="space-y-4">
|
||||
<x-ui.alert
|
||||
variant="error"
|
||||
title="Error Message"
|
||||
message="Be cautious when performing this action."
|
||||
:showLink="true"
|
||||
linkHref="/"
|
||||
linkText="Learn more"
|
||||
/>
|
||||
|
||||
<x-ui.alert
|
||||
variant="error"
|
||||
title="Error Message"
|
||||
message="Be cautious when performing this action."
|
||||
:showLink="false"
|
||||
/>
|
||||
</div>
|
||||
</x-common.component-card>
|
||||
|
||||
{{-- Info Alert --}}
|
||||
<x-common.component-card title="Info Alert">
|
||||
<div class="space-y-4">
|
||||
<x-ui.alert
|
||||
variant="info"
|
||||
title="Info Message"
|
||||
message="Be cautious when performing this action."
|
||||
:showLink="true"
|
||||
linkHref="/"
|
||||
linkText="Learn more"
|
||||
/>
|
||||
|
||||
<x-ui.alert
|
||||
variant="info"
|
||||
title="Info Message"
|
||||
message="Be cautious when performing this action."
|
||||
:showLink="false"
|
||||
/>
|
||||
</div>
|
||||
</x-common.component-card>
|
||||
|
||||
{{-- Additional Examples --}}
|
||||
<x-common.component-card title="Alert Variations">
|
||||
<div class="space-y-4">
|
||||
{{-- With Slot Content --}}
|
||||
<x-ui.alert variant="success" title="Custom Content Alert">
|
||||
<p class="text-sm text-gray-500 dark:text-gray-400">
|
||||
This alert uses <strong class="text-gray-900 dark:text-white">custom slot content</strong>
|
||||
instead of the message prop.
|
||||
</p>
|
||||
<ul class="mt-2 text-sm text-gray-500 dark:text-gray-400 list-disc list-inside">
|
||||
<li>You can add any HTML content</li>
|
||||
<li>Including lists and formatting</li>
|
||||
<li>Perfect for complex messages</li>
|
||||
</ul>
|
||||
</x-alert>
|
||||
|
||||
{{-- Minimal Alert --}}
|
||||
<x-ui.alert
|
||||
variant="info"
|
||||
title="Quick Info"
|
||||
message="Sometimes you just need a simple message."
|
||||
/>
|
||||
|
||||
{{-- Alert with Long Message --}}
|
||||
<x-ui.alert
|
||||
variant="warning"
|
||||
title="Important Notice"
|
||||
message="This is a longer message that provides more detailed information about the warning. You should read this carefully before proceeding with your action."
|
||||
:showLink="true"
|
||||
linkHref="/docs"
|
||||
linkText="View documentation"
|
||||
/>
|
||||
</div>
|
||||
</x-common.component-card>
|
||||
|
||||
{{-- Interactive Demo --}}
|
||||
<x-common.component-card title="Real-World Examples">
|
||||
<div class="space-y-4">
|
||||
{{-- Payment Success --}}
|
||||
<x-ui.alert variant="success" title="Payment Successful">
|
||||
<p class="text-sm text-gray-500 dark:text-gray-400 mb-2">
|
||||
Your payment of <strong class="text-gray-900 dark:text-white">$99.00</strong> has been processed successfully.
|
||||
</p>
|
||||
<div class="text-sm text-gray-500 dark:text-gray-400">
|
||||
<p><strong>Order ID:</strong> #TAILADMIN-0014</p>
|
||||
<p><strong>Transaction ID:</strong> TXN-1234567890</p>
|
||||
</div>
|
||||
<a href="/orders" class="inline-block mt-3 text-sm font-medium text-green-600 dark:text-green-400 underline hover:text-green-700">
|
||||
View Order Details
|
||||
</a>
|
||||
</x-alert>
|
||||
|
||||
{{-- Account Warning --}}
|
||||
<x-ui.alert
|
||||
variant="warning"
|
||||
title="Your trial is ending soon"
|
||||
message="Your 14-day trial will expire in 3 days. Upgrade now to continue using all features."
|
||||
:showLink="true"
|
||||
linkHref="/billing"
|
||||
linkText="Upgrade now"
|
||||
/>
|
||||
|
||||
{{-- Validation Error --}}
|
||||
<x-ui.alert variant="error" title="Form Validation Failed">
|
||||
<ul class="text-sm text-gray-500 dark:text-gray-400 list-disc list-inside space-y-1">
|
||||
<li>Email field is required</li>
|
||||
<li>Password must be at least 8 characters</li>
|
||||
<li>Please accept the terms and conditions</li>
|
||||
</ul>
|
||||
</x-alert>
|
||||
|
||||
{{-- System Info --}}
|
||||
<x-ui.alert
|
||||
variant="info"
|
||||
title="Scheduled Maintenance"
|
||||
message="Our system will undergo maintenance on November 15, 2025 from 2:00 AM to 4:00 AM EST. Some features may be unavailable during this time."
|
||||
:showLink="true"
|
||||
linkHref="/status"
|
||||
linkText="Check status page"
|
||||
/>
|
||||
</div>
|
||||
</x-common.component-card>
|
||||
</div>
|
||||
@endsection
|
||||
Reference in New Issue
Block a user