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

first commit

Browse Source
This commit is contained in:
Dyzulk Developer
2025-12-21 08:03:18 +07:00
commit 7c746f776a
300 changed files with 24836 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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