dyzulk/app
1
0
Fork 0
mirror of https://github.com/twinpath/app.git synced 2026-01-26 21:32:02 +07:00
Code Issues Packages Projects Releases 1 Wiki Activity

Initial commit

Browse Source
This commit is contained in:
Dyzulk Developer
2025-12-22 12:03:01 +07:00
commit 10dc345147
367 changed files with 31188 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

174
resources/views/pages/ui-elements/alerts.blade.php Normal file
View 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

63
resources/views/pages/ui-elements/avatars.blade.php Normal file
View File

@@ -0,0 +1,63 @@
@extends('layouts.app')
@section('content')
<x-common.page-breadcrumb pageTitle="Avatars" />
@php
$avatarSrc = asset('images/user/user-01.jpg');
$sizes = ['xsmall', 'small', 'medium', 'large', 'xlarge', 'xxlarge'];
@endphp
<div class="space-y-5 sm:space-y-6">
{{-- Default Avatar --}}
<x-common.component-card title="Default Avatar">
<div class="flex flex-col items-center justify-center gap-5 sm:flex-row">
@foreach($sizes as $size)
<x-ui.avatar
:src="$avatarSrc"
:size="$size"
/>
@endforeach
</div>
</x-common.component-card>
{{-- Avatar with Online Indicator --}}
<x-common.component-card title="Avatar with online indicator">
<div class="flex flex-col items-center justify-center gap-5 sm:flex-row">
@foreach($sizes as $size)
<x-ui.avatar
:src="$avatarSrc"
:size="$size"
status="online"
/>
@endforeach
</div>
</x-common.component-card>
{{-- Avatar with Offline Indicator --}}
<x-common.component-card title="Avatar with Offline indicator">
<div class="flex flex-col items-center justify-center gap-5 sm:flex-row">
@foreach($sizes as $size)
<x-ui.avatar
:src="$avatarSrc"
:size="$size"
status="offline"
/>
@endforeach
</div>
</x-common.component-card>
{{-- Avatar with Busy Indicator --}}
<x-common.component-card title="Avatar with busy indicator">
<div class="flex flex-col items-center justify-center gap-5 sm:flex-row">
@foreach($sizes as $size)
<x-ui.avatar
:src="$avatarSrc"
:size="$size"
status="busy"
/>
@endforeach
</div>
</x-common.component-card>
</div>
@endsection

76
resources/views/pages/ui-elements/badges.blade.php Normal file
View File

@@ -0,0 +1,76 @@
@extends('layouts.app')
@section('content')
<x-common.page-breadcrumb pageTitle="Badges" />
@php
use Illuminate\Support\HtmlString;
$colors = ['primary', 'success', 'error', 'warning', 'info', 'light', 'dark'];
$plusIcon = new HtmlString('<svg class="fill-current" width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M5.25012 3C5.25012 2.58579 5.58591 2.25 6.00012 2.25C6.41433 2.25 6.75012 2.58579 6.75012 3V5.25012L9.00034 5.25012C9.41455 5.25012 9.75034 5.58591 9.75034 6.00012C9.75034 6.41433 9.41455 6.75012 9.00034 6.75012H6.75012V9.00034C6.75012 9.41455 6.41433 9.75034 6.00012 9.75034C5.58591 9.75034 5.25012 9.41455 5.25012 9.00034L5.25012 6.75012H3C2.58579 6.75012 2.25 6.41433 2.25 6.00012C2.25 5.58591 2.58579 5.25012 3 5.25012H5.25012V3Z" fill=""></path>
</svg>');
@endphp
<div class="space-y-5 sm:space-y-6">
<x-common.component-card title="With Light Background">
<div class="flex flex-wrap gap-4 sm:items-center sm:justify-center">
@foreach ($colors as $color)
<x-ui.badge :color="$color">
{{ $color }}
</x-ui.badge>
@endforeach
</div>
</x-common.component-card>
<x-common.component-card title="With Solid Background">
<div class="flex flex-wrap gap-4 sm:items-center sm:justify-center">
@foreach ($colors as $color)
<x-ui.badge :color="$color" variant="solid">
{{ $color }}
</x-ui.badge>
@endforeach
</div>
</x-common.component-card>
<x-common.component-card title="Light Background with Left Icon">
<div class="flex flex-wrap gap-4 sm:items-center sm:justify-center">
@foreach ($colors as $color)
<x-ui.badge :color="$color" :startIcon="$plusIcon">
{{ $color }}
</x-ui.badge>
@endforeach
</div>
</x-common.component-card>
<x-common.component-card title="Solid Background with Left Icon">
<div class="flex flex-wrap gap-4 sm:items-center sm:justify-center">
@foreach ($colors as $color)
<x-ui.badge :color="$color" variant="solid" :startIcon="$plusIcon">
{{ $color }}
</x-ui.badge>
@endforeach
</div>
</x-common.component-card>
<x-common.component-card title="Light Background with Right Icon">
<div class="flex flex-wrap gap-4 sm:items-center sm:justify-center">
@foreach ($colors as $color)
<x-ui.badge :color="$color" :endIcon="$plusIcon">
{{ $color }}
</x-ui.badge>
@endforeach
</div>
</x-common.component-card>
<x-common.component-card title="Solid Background with Right Icon">
<div class="flex flex-wrap gap-4 sm:items-center sm:justify-center">
@foreach ($colors as $color)
<x-ui.badge :color="$color" variant="solid" :endIcon="$plusIcon">
{{ $color }}
</x-ui.badge>
@endforeach
</div>
</x-common.component-card>
</div>
@endsection

77
resources/views/pages/ui-elements/buttons.blade.php Normal file
View File

@@ -0,0 +1,77 @@
@extends('layouts.app')
@php
use Illuminate\Support\HtmlString;
// Page title
$currentPageTitle = 'Buttons';
// Define BoxIcon once as an HtmlString (so it won’t get escaped)
$BoxIcon = new HtmlString('
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M9.77692 3.24224C9.91768 3.17186 10.0834 3.17186 10.2241 3.24224L15.3713 5.81573L10.3359 8.33331C10.1248 8.43888 9.87626 8.43888 9.66512 8.33331L4.6298 5.81573L9.77692 3.24224ZM3.70264 7.0292V13.4124C3.70264 13.6018 3.80964 13.775 3.97903 13.8597L9.25016 16.4952L9.25016 9.7837C9.16327 9.75296 9.07782 9.71671 8.99432 9.67496L3.70264 7.0292ZM10.7502 16.4955V9.78396C10.8373 9.75316 10.923 9.71683 11.0067 9.67496L16.2984 7.0292V13.4124C16.2984 13.6018 16.1914 13.775 16.022 13.8597L10.7502 16.4955ZM9.41463 17.4831L9.10612 18.1002C9.66916 18.3817 10.3319 18.3817 10.8949 18.1002L16.6928 15.2013C17.3704 14.8625 17.7984 14.17 17.7984 13.4124V6.58831C17.7984 5.83076 17.3704 5.13823 16.6928 4.79945L10.8949 1.90059C10.3319 1.61908 9.66916 1.61907 9.10612 1.90059L9.44152 2.57141L9.10612 1.90059L3.30823 4.79945C2.63065 5.13823 2.20264 5.83076 2.20264 6.58831V13.4124C2.20264 14.17 2.63065 14.8625 3.30823 15.2013L9.10612 18.1002L9.41463 17.4831Z"
fill="currentColor"
/>
</svg>
');
@endphp
@section('content')
{{-- Page Breadcrumb --}}
<x-common.page-breadcrumb :pageTitle="$currentPageTitle" />
<div class="space-y-5 sm:space-y-6">
{{-- Primary Buttons --}}
<x-common.component-card title="Primary Button">
<div class="flex items-center gap-5">
<x-ui.button size="sm" variant="primary">Button Text</x-ui.button>
<x-ui.button size="md" variant="primary">Button Text</x-ui.button>
</div>
</x-common.component-card>
{{-- Primary Button with Left Icon --}}
<x-common.component-card title="Primary Button with Left Icon">
<div class="flex items-center gap-5">
<x-ui.button size="sm" variant="primary" :startIcon="$BoxIcon">Button Text</x-ui.button>
<x-ui.button size="md" variant="primary" :startIcon="$BoxIcon">Button Text</x-ui.button>
</div>
</x-common.component-card>
{{-- Primary Button with Right Icon --}}
<x-common.component-card title="Primary Button with Right Icon">
<div class="flex items-center gap-5">
<x-ui.button size="sm" variant="primary" :endIcon="$BoxIcon">Button Text</x-ui.button>
<x-ui.button size="md" variant="primary" :endIcon="$BoxIcon">Button Text</x-ui.button>
</div>
</x-common.component-card>
{{-- Outline Buttons --}}
<x-common.component-card title="Outline Button">
<div class="flex items-center gap-5">
<x-ui.button size="sm" variant="outline">Button Text</x-ui.button>
<x-ui.button size="md" variant="outline">Button Text</x-ui.button>
</div>
</x-common.component-card>
{{-- Outline Button with Left Icon --}}
<x-common.component-card title="Outline Button with Left Icon">
<div class="flex items-center gap-5">
<x-ui.button size="sm" variant="outline" :startIcon="$BoxIcon">Button Text</x-ui.button>
<x-ui.button size="md" variant="outline" :startIcon="$BoxIcon">Button Text</x-ui.button>
</div>
</x-common.component-card>
{{-- Outline Button with Right Icon --}}
<x-common.component-card title="Outline Button with Right Icon">
<div class="flex items-center gap-5">
<x-ui.button size="sm" variant="outline" :endIcon="$BoxIcon">Button Text</x-ui.button>
<x-ui.button size="md" variant="outline" :endIcon="$BoxIcon">Button Text</x-ui.button>
</div>
</x-common.component-card>
</div>
@endsection

62
resources/views/pages/ui-elements/images.blade.php Normal file
View File

@@ -0,0 +1,62 @@
@extends('layouts.app')
@php
$images = [
[
'src' => asset('images/grid-image/image-04.png'),
'alt' => 'Grid image 1',
],
[
'src' => asset('images/grid-image/image-05.png'),
'alt' => 'Grid image 2',
],
[
'src' => asset('images/grid-image/image-06.png'),
'alt' => 'Grid image 3',
],
];
@endphp
@section('content')
{{-- Page Breadcrumb --}}
<x-common.page-breadcrumb pageTitle="Images" />
<div class="space-y-5 sm:space-y-6">
<x-common.component-card title="Responsive Image">
<div class="relative">
<div id="pane" class="overflow-hidden">
<img src="{{ asset('images/grid-image/image-01.png') }}" alt="Cover"
class="w-full border border-gray-200 rounded-xl dark:border-gray-800" />
</div>
<div id="ghostpane" class="absolute top-0 left-0 duration-300 ease-in-out"></div>
</div>
</x-common.component-card>
<x-common.component-card title="Image in 2 Grid">
<div class="grid grid-cols-1 gap-5 sm:grid-cols-2">
<div>
<img src="{{ asset('images/grid-image/image-02.png') }}" alt="grid"
class="w-full border border-gray-200 rounded-xl dark:border-gray-800" />
</div>
<div>
<img src="{{ asset('images/grid-image/image-03.png') }}" alt="grid"
class="w-full border border-gray-200 rounded-xl dark:border-gray-800" />
</div>
</div>
</x-common.component-card>
<x-common.component-card title="Image in 3 Grid">
<div class="grid grid-cols-1 gap-5 sm:grid-cols-3">
@foreach ($images as $image)
<div>
<img src="{{ $image['src'] }}" alt="{{ $image['alt'] }}"
class="w-full border border-gray-200 rounded-xl dark:border-gray-800" />
</div>
@endforeach
</div>
</x-common.component-card>
</div>
@endsection

30
resources/views/pages/ui-elements/videos.blade.php Normal file
View File

@@ -0,0 +1,30 @@
@extends('layouts.app')
@section('content')
{{-- Page Breadcrumb --}}
<x-common.page-breadcrumb pageTitle="Videos" />
<div class="grid grid-cols-1 gap-5 sm:gap-6 xl:grid-cols-2">
<div class="space-y-5 sm:space-y-6">
<x-common.component-card title="Video Ratio 16:9">
<x-ui.youtube-embed videoId="dQw4w9WgXcQ" />
</x-common.component-card>
<x-common.component-card title="Video Ratio 4:3">
<x-ui.youtube-embed videoId="dQw4w9WgXcQ" aspectRatio="4:3" />
</x-common.component-card>
</div>
<div class="space-y-5 sm:space-y-6">
<x-common.component-card title="Video Ratio 21:9">
<x-ui.youtube-embed videoId="dQw4w9WgXcQ" aspectRatio="21:9" />
</x-common.component-card>
<x-common.component-card title="Video Ratio 1:1">
<x-ui.youtube-embed videoId="dQw4w9WgXcQ" aspectRatio="1:1" />
</x-common.component-card>
</div>
</div>
@endsection