Tweak blade componenets

This commit is contained in:
Matt Young 2024-05-28 21:49:25 -05:00
parent 7ebc3a2dd4
commit e3a12c4ce5
4 changed files with 16 additions and 13 deletions

View File

@ -1,5 +1,5 @@
@props(['heading' => false, 'subheading' => false]) @props(['heading' => false, 'subheading' => false])
<div class="overflow-hidden bg-white shadow sm:rounded-lg"> <div {{ $attributes->merge(['class' => 'overflow-hidden bg-white shadow sm:rounded-lg']) }}>
@if($heading) @if($heading)
<div class="px-4 py-6 sm:px-6 border-b border-gray-100"> <!-- HEADING --> <div class="px-4 py-6 sm:px-6 border-b border-gray-100"> <!-- HEADING -->
<h3 class="text-base font-semibold leading-7 text-gray-900">{{ $heading }}</h3> <h3 class="text-base font-semibold leading-7 text-gray-900">{{ $heading }}</h3>

View File

@ -1,10 +1,17 @@
@props(['right_link_button_type' => 'a']) {{-- Use if the link to the right needs to be a button --}}
<li class="flex items-center justify-between gap-x-6 px-4 py-5 sm:px-6"> <li class="flex items-center justify-between gap-x-6 px-4 py-5 sm:px-6">
<div class="flex min-w-0 gap-x-4"> <div class="flex min-w-0 gap-x-4">
{{ $slot }} {{ $slot }}
</div> </div>
@if(isset($right_link_button)) @if(isset($right_link_button))
@if($right_link_button_type === 'a')
<a {{ $right_link_button->attributes->merge(['class' => 'rounded-full bg-white px-2.5 py-1 text-xs font-semibold text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-50']) }}> <a {{ $right_link_button->attributes->merge(['class' => 'rounded-full bg-white px-2.5 py-1 text-xs font-semibold text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-50']) }}>
{{ $right_link_button }} {{ $right_link_button }}
</a> </a>
@else
<button {{ $right_link_button->attributes->merge(['class' => 'rounded-full bg-white px-2.5 py-1 text-xs font-semibold text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-50']) }}>
{{ $right_link_button }}
</button>
@endif
@endif @endif
</li> </li>

View File

@ -10,14 +10,7 @@
</head> </head>
<body class="h-full"> <body class="h-full">
<!--
This example requires updating your template:
```
<html class="h-full bg-gray-100">
<body class="h-full">
```
-->
<div class="min-h-full"> <div class="min-h-full">
<x-layout.navbar /> <x-layout.navbar />

View File

@ -4,11 +4,13 @@
<x-slot:page_title>Choose School</x-slot:page_title> <x-slot:page_title>Choose School</x-slot:page_title>
<x-card.card heading="Choose your school" <x-card.card heading="Choose your school"
subheading="Based on your email address, one of these schools may be yours"> subheading="Based on your email address, one of these schools may be yours"
class="mx-auto max-w-xl"
>
<x-card.list.body> <x-card.list.body>
@foreach($possibilities as $possibility) @foreach($possibilities as $possibility)
@php $school = $possibility->school; @endphp @php $school = $possibility->school; @endphp
<x-card.list.row> <x-card.list.row right_link_button_type="button">
<x-card.list.row-image <x-card.list.row-image
src="{{ $school->initialLetterImageURL() }}" src="{{ $school->initialLetterImageURL() }}"
alt=""/> alt=""/>
@ -16,6 +18,7 @@
{{ $school->name }} {{ $school->name }}
<x-slot:subtext>{{ $school->city }}, {{ $school->state }}</x-slot:subtext> <x-slot:subtext>{{ $school->city }}, {{ $school->state }}</x-slot:subtext>
</x-card.list.row-text-subtext> </x-card.list.row-text-subtext>
<x-slot:right_link_button>Choose</x-slot:right_link_button>
</x-card.list.row> </x-card.list.row>
@endforeach @endforeach
</x-card.list.body> </x-card.list.body>