Tweak blade componenets
This commit is contained in:
parent
7ebc3a2dd4
commit
e3a12c4ce5
|
|
@ -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>
|
||||||
|
|
|
||||||
|
|
@ -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>
|
||||||
|
|
|
||||||
|
|
@ -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 />
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -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>
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue