matt
/
auditionadmin
1
0
Fork 0
Code Issues 16 Pull Requests Packages Projects Releases Wiki Activity

Progress on results page

This commit is contained in:
Matt Young 2024-06-24 21:33:16 -05:00
parent 43f5201345
commit f3a8eca8b4
8 changed files with 99 additions and 299 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
app/Http/Controllers/ResultsPage.php
View File

@ -3,14 +3,17 @@
namespace App\Http\Controllers;
use App\Services\AuditionCacheService;
use App\Services\SeatingService;
use Illuminate\Http\Request;
class ResultsPage extends Controller
{
protected $auditionCacheService;
public function __construct(AuditionCacheService $auditionCacheService)
protected $seatingService;
public function __construct(AuditionCacheService $auditionCacheService, SeatingService $seatingService)
{
$this->auditionCacheService = $auditionCacheService;
$this->seatingService = $seatingService;
}
/**
@ -20,6 +23,10 @@ class ResultsPage extends Controller
{
$publishedAuditions = $this->auditionCacheService->getPublishedAuditions();
foreach ($publishedAuditions as $audition) {
$audition->seats = $this->seatingService->getSeatsForAudition($audition->id);
}
return view('results.index', compact('publishedAuditions'));
}
}

1
app/Models/Audition.php
View File

@ -24,6 +24,7 @@ class Audition extends Model
protected $scored_entries_count; //Set by TabulationService
public static function deadlineNotPast()
{
return Audition::where('entry_deadline', '>=', now())->get();

6
app/Services/SeatingService.php
View File

@ -58,7 +58,11 @@ class SeatingService
$cacheKey = 'audition'.$auditionId.'seats';
return Cache::remember($cacheKey, now()->addHour(), function () use ($auditionId) {
return Seat::with('entry.student')->where('audition_id', $auditionId)->orderBy('seat')->get()->groupBy('ensemble_id');
return Seat::with('entry.student')
->where('audition_id', $auditionId)
->orderBy('seat')
->get()
->groupBy('ensemble_id');
});
}

44
resources/views/components/results/layout.blade.php Normal file
View File

@ -0,0 +1,44 @@
@php use App\Settings; @endphp
<!doctype html>
<html lang="en" class="h-full bg-white">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>AuditionAdmin Results</title>
@vite(['resources/css/app.css', 'resources/js/app.js'])
<script src="https://cdn.jsdelivr.net/npm/sortablejs@1.14.0/Sortable.min.js"></script>
</head>
<body class="h-full">
<div class="flex items-center gap-x-6 bg-indigo-600 px-6 py-2.5 sm:px-3.5 sm:before:flex-1">
{{-- Desktop/Tablet Header --}}
<p class="text-sm leading-6 text-white hidden md:block">
<strong class="font-semibold">Audition Results</strong>
<svg viewBox="0 0 2 2" class="mx-2 inline h-0.5 w-0.5 fill-current" aria-hidden="true">
<circle cx="1" cy="1" r="1"/>
</svg>
{{ Settings::get('auditionName') }}
</p>
{{-- mobile header --}}
<p class="text-sm leading-6 text-white block md:hidden">
<strong class="font-semibold">{{ Settings::get('auditionAbbreviation') }}</strong>
<svg viewBox="0 0 2 2" class="mx-2 inline h-0.5 w-0.5 fill-current" aria-hidden="true">
<circle cx="1" cy="1" r="1"/>
</svg>
Audition Results
</p>
<div class="flex flex-1 justify-end">
</div>
</div>
<div class="mx-auto max-w-7xl">
{{ $slot }}
</div>
</body>
</html>

11
resources/views/components/results/table-audition-section.blade.php Normal file
View File

@ -0,0 +1,11 @@
@props(['auditionName'])
<div {{ $attributes->class(['relative']) }}>
<div class="sticky top-0 z-10 border-y border-b-gray-200 border-t-gray-100 bg-gray-50 px-3 py-1.5 text-sm font-semibold leading-6 text-gray-900">
<h3>{{ $auditionName }}</h3>
</div>
<ul role="list" class="divide-y divide-gray-100">
{{ $slot }}
</ul>
</div>

10
resources/views/components/results/table-seat-row.blade.php Normal file
View File

@ -0,0 +1,10 @@
@props(['seat','student_name','school'])
<li {{ $attributes->class(['flex gap-x-4 px-3 py-5 justify-between']) }}>
<div>
{{ $seat }}
</div>
<div class="min-w-0 text-right">
<p class="text-sm font-semibold leading-6 text-gray-900">{{ $student_name }}</p>
<p class="mt-1 truncate text-xs leading-5 text-gray-500">{{ $school }}</p>
</div>
</li>

56
resources/views/results/index.blade.php
View File

@ -1,38 +1,22 @@
@php use App\Settings; @endphp
<!doctype html>
<html lang="en" class="h-full bg-white">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>AuditionAdmin Results</title>
@vite(['resources/css/app.css', 'resources/js/app.js'])
<x-results.layout>
@php
dump($publishedAuditions);
@endphp
<nav class="h-full overflow-y-auto mt-3" aria-label="Directory">
@foreach($publishedAuditions as $audition)
<x-results.table-audition-section :auditionName="$audition->name">
@foreach($audition->seats as $seat)
<x-results.table-seat-row
seat="d"
student_name="name"
school="school" />
@endforeach
</x-results.table-audition-section>
@endforeach
<x-results.table-audition-section audition-name="HS Flute">
<x-results.table-seat-row seat="Wind Ensemble 1" student_name="Matt Young" school="Chelsea"/>
</x-results.table-audition-section>
<script src="https://cdn.jsdelivr.net/npm/sortablejs@1.14.0/Sortable.min.js"></script>
</head>
<body class="h-full">
</nav>
<div class="flex items-center gap-x-6 bg-indigo-600 px-6 py-2.5 sm:px-3.5 sm:before:flex-1">
{{-- Desktop/Tablet Header --}}
<p class="text-sm leading-6 text-white hidden md:block">
<strong class="font-semibold">Audition Results</strong>
<svg viewBox="0 0 2 2" class="mx-2 inline h-0.5 w-0.5 fill-current" aria-hidden="true">
<circle cx="1" cy="1" r="1" />
</svg>
{{ Settings::get('auditionName') }}
</p>
{{-- mobile header --}}
<p class="text-sm leading-6 text-white block md:hidden">
<strong class="font-semibold">{{ Settings::get('auditionAbbreviation') }}</strong><svg viewBox="0 0 2 2" class="mx-2 inline h-0.5 w-0.5 fill-current" aria-hidden="true"><circle cx="1" cy="1" r="1" /></svg>Audition Results
</p>
<div class="flex flex-1 justify-end">
</div>
</div>
<div class="mx-auto max-w-sm">
@include('results.results-table')
</div>
</body>
</html>
</x-results.layout>

261
resources/views/results/results-table.blade.php
View File

@ -1,261 +0,0 @@
<nav class="h-full overflow-y-auto mt-3" aria-label="Directory">
<div class="relative">
<div class="sticky top-0 z-10 border-y border-b-gray-200 border-t-gray-100 bg-gray-50 px-3 py-1.5 text-sm font-semibold leading-6 text-gray-900">
<h3>Instrument Name Here</h3>
</div>
<ul role="list" class="divide-y divide-gray-100">
<li class="flex gap-x-4 px-3 py-5 justify-between">
<div>
Wind Ensemble 1
</div>
<div class="min-w-0 text-right">
<p class="text-sm font-semibold leading-6 text-gray-900">Student Name</p>
<p class="mt-1 truncate text-xs leading-5 text-gray-500">School Name</p>
</div>
</li>
<li class="flex gap-x-4 px-3 py-5">
<img class="h-12 w-12 flex-none rounded-full bg-gray-50" src="https://images.unsplash.com/photo-1500648767791-00dcc994a43e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt="">
<div class="min-w-0">
<p class="text-sm font-semibold leading-6 text-gray-900">Hector Adams</p>
<p class="mt-1 truncate text-xs leading-5 text-gray-500">hector.adams@example.com</p>
</div>
</li>
<li class="flex gap-x-4 px-3 py-5">
<img class="h-12 w-12 flex-none rounded-full bg-gray-50" src="https://images.unsplash.com/photo-1520785643438-5bf77931f493?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt="">
<div class="min-w-0">
<p class="text-sm font-semibold leading-6 text-gray-900">Blake Alexander</p>
<p class="mt-1 truncate text-xs leading-5 text-gray-500">blake.alexander@example.com</p>
</div>
</li>
<li class="flex gap-x-4 px-3 py-5">
<img class="h-12 w-12 flex-none rounded-full bg-gray-50" src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt="">
<div class="min-w-0">
<p class="text-sm font-semibold leading-6 text-gray-900">Fabricio Andrews</p>
<p class="mt-1 truncate text-xs leading-5 text-gray-500">fabricio.andrews@example.com</p>
</div>
</li>
</ul>
</div>
<div class="relative">
<div class="sticky top-0 z-10 border-y border-b-gray-200 border-t-gray-100 bg-gray-50 px-3 py-1.5 text-sm font-semibold leading-6 text-gray-900">
<h3>B</h3>
</div>
<ul role="list" class="divide-y divide-gray-100">
<li class="flex gap-x-4 px-3 py-5">
<img class="h-12 w-12 flex-none rounded-full bg-gray-50" src="https://images.unsplash.com/photo-1501031170107-cfd33f0cbdcc?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt="">
<div class="min-w-0">
<p class="text-sm font-semibold leading-6 text-gray-900">Angela Beaver</p>
<p class="mt-1 truncate text-xs leading-5 text-gray-500">angela.beaver@example.com</p>
</div>
</li>
<li class="flex gap-x-4 px-3 py-5">
<img class="h-12 w-12 flex-none rounded-full bg-gray-50" src="https://images.unsplash.com/photo-1506980595904-70325b7fdd90?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt="">
<div class="min-w-0">
<p class="text-sm font-semibold leading-6 text-gray-900">Yvette Blanchard</p>
<p class="mt-1 truncate text-xs leading-5 text-gray-500">yvette.blanchard@example.com</p>
</div>
</li>
<li class="flex gap-x-4 px-3 py-5">
<img class="h-12 w-12 flex-none rounded-full bg-gray-50" src="https://images.unsplash.com/photo-1513910367299-bce8d8a0ebf6?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt="">
<div class="min-w-0">
<p class="text-sm font-semibold leading-6 text-gray-900">Lawrence Brooks</p>
<p class="mt-1 truncate text-xs leading-5 text-gray-500">lawrence.brooks@example.com</p>
</div>
</li>
</ul>
</div>
<div class="relative">
<div class="sticky top-0 z-10 border-y border-b-gray-200 border-t-gray-100 bg-gray-50 px-3 py-1.5 text-sm font-semibold leading-6 text-gray-900">
<h3>C</h3>
</div>
<ul role="list" class="divide-y divide-gray-100">
<li class="flex gap-x-4 px-3 py-5">
<img class="h-12 w-12 flex-none rounded-full bg-gray-50" src="https://images.unsplash.com/photo-1517070208541-6ddc4d3efbcb?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt="">
<div class="min-w-0">
<p class="text-sm font-semibold leading-6 text-gray-900">Jeffrey Clark</p>
<p class="mt-1 truncate text-xs leading-5 text-gray-500">jeffrey.clark@example.com</p>
</div>
</li>
<li class="flex gap-x-4 px-3 py-5">
<img class="h-12 w-12 flex-none rounded-full bg-gray-50" src="https://images.unsplash.com/photo-1487412720507-e7ab37603c6f?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt="">
<div class="min-w-0">
<p class="text-sm font-semibold leading-6 text-gray-900">Kathryn Cooper</p>
<p class="mt-1 truncate text-xs leading-5 text-gray-500">kathryn.cooper@example.com</p>
</div>
</li>
</ul>
</div>
<div class="relative">
<div class="sticky top-0 z-10 border-y border-b-gray-200 border-t-gray-100 bg-gray-50 px-3 py-1.5 text-sm font-semibold leading-6 text-gray-900">
<h3>E</h3>
</div>
<ul role="list" class="divide-y divide-gray-100">
<li class="flex gap-x-4 px-3 py-5">
<img class="h-12 w-12 flex-none rounded-full bg-gray-50" src="https://images.unsplash.com/photo-1509783236416-c9ad59bae472?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt="">
<div class="min-w-0">
<p class="text-sm font-semibold leading-6 text-gray-900">Alicia Edwards</p>
<p class="mt-1 truncate text-xs leading-5 text-gray-500">alicia.edwards@example.com</p>
</div>
</li>
<li class="flex gap-x-4 px-3 py-5">
<img class="h-12 w-12 flex-none rounded-full bg-gray-50" src="https://images.unsplash.com/photo-1531427186611-ecfd6d936c79?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt="">
<div class="min-w-0">
<p class="text-sm font-semibold leading-6 text-gray-900">Benjamin Emerson</p>
<p class="mt-1 truncate text-xs leading-5 text-gray-500">benjamin.emerson@example.com</p>
</div>
</li>
<li class="flex gap-x-4 px-3 py-5">
<img class="h-12 w-12 flex-none rounded-full bg-gray-50" src="https://images.unsplash.com/photo-1504703395950-b89145a5425b?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt="">
<div class="min-w-0">
<p class="text-sm font-semibold leading-6 text-gray-900">Jillian Erics</p>
<p class="mt-1 truncate text-xs leading-5 text-gray-500">jillian.erics@example.com</p>
</div>
</li>
<li class="flex gap-x-4 px-3 py-5">
<img class="h-12 w-12 flex-none rounded-full bg-gray-50" src="https://images.unsplash.com/photo-1550525811-e5869dd03032?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt="">
<div class="min-w-0">
<p class="text-sm font-semibold leading-6 text-gray-900">Chelsea Evans</p>
<p class="mt-1 truncate text-xs leading-5 text-gray-500">chelsea.evans@example.com</p>
</div>
</li>
</ul>
</div>
<div class="relative">
<div class="sticky top-0 z-10 border-y border-b-gray-200 border-t-gray-100 bg-gray-50 px-3 py-1.5 text-sm font-semibold leading-6 text-gray-900">
<h3>G</h3>
</div>
<ul role="list" class="divide-y divide-gray-100">
<li class="flex gap-x-4 px-3 py-5">
<img class="h-12 w-12 flex-none rounded-full bg-gray-50" src="https://images.unsplash.com/photo-1519244703995-f4e0f30006d5?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt="">
<div class="min-w-0">
<p class="text-sm font-semibold leading-6 text-gray-900">Michael Gillard</p>
<p class="mt-1 truncate text-xs leading-5 text-gray-500">micheal.gillard@example.com</p>
</div>
</li>
<li class="flex gap-x-4 px-3 py-5">
<img class="h-12 w-12 flex-none rounded-full bg-gray-50" src="https://images.unsplash.com/photo-1506794778202-cad84cf45f1d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt="">
<div class="min-w-0">
<p class="text-sm font-semibold leading-6 text-gray-900">Dries Giuessepe</p>
<p class="mt-1 truncate text-xs leading-5 text-gray-500">dries.giuessepe@example.com</p>
</div>
</li>
</ul>
</div>
<div class="relative">
<div class="sticky top-0 z-10 border-y border-b-gray-200 border-t-gray-100 bg-gray-50 px-3 py-1.5 text-sm font-semibold leading-6 text-gray-900">
<h3>M</h3>
</div>
<ul role="list" class="divide-y divide-gray-100">
<li class="flex gap-x-4 px-3 py-5">
<img class="h-12 w-12 flex-none rounded-full bg-gray-50" src="https://images.unsplash.com/photo-1507101105822-7472b28e22ac?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt="">
<div class="min-w-0">
<p class="text-sm font-semibold leading-6 text-gray-900">Jenny Harrison</p>
<p class="mt-1 truncate text-xs leading-5 text-gray-500">jenny.harrison@example.com</p>
</div>
</li>
<li class="flex gap-x-4 px-3 py-5">
<img class="h-12 w-12 flex-none rounded-full bg-gray-50" src="https://images.unsplash.com/photo-1517841905240-472988babdf9?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt="">
<div class="min-w-0">
<p class="text-sm font-semibold leading-6 text-gray-900">Lindsay Hatley</p>
<p class="mt-1 truncate text-xs leading-5 text-gray-500">lindsay.hatley@example.com</p>
</div>
</li>
<li class="flex gap-x-4 px-3 py-5">
<img class="h-12 w-12 flex-none rounded-full bg-gray-50" src="https://images.unsplash.com/photo-1534528741775-53994a69daeb?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt="">
<div class="min-w-0">
<p class="text-sm font-semibold leading-6 text-gray-900">Anna Hill</p>
<p class="mt-1 truncate text-xs leading-5 text-gray-500">anna.hill@example.com</p>
</div>
</li>
</ul>
</div>
<div class="relative">
<div class="sticky top-0 z-10 border-y border-b-gray-200 border-t-gray-100 bg-gray-50 px-3 py-1.5 text-sm font-semibold leading-6 text-gray-900">
<h3>S</h3>
</div>
<ul role="list" class="divide-y divide-gray-100">
<li class="flex gap-x-4 px-3 py-5">
<img class="h-12 w-12 flex-none rounded-full bg-gray-50" src="https://images.unsplash.com/photo-1438761681033-6461ffad8d80?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt="">
<div class="min-w-0">
<p class="text-sm font-semibold leading-6 text-gray-900">Courtney Samuels</p>
<p class="mt-1 truncate text-xs leading-5 text-gray-500">courtney.samuels@example.com</p>
</div>
</li>
<li class="flex gap-x-4 px-3 py-5">
<img class="h-12 w-12 flex-none rounded-full bg-gray-50" src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt="">
<div class="min-w-0">
<p class="text-sm font-semibold leading-6 text-gray-900">Tom Simpson</p>
<p class="mt-1 truncate text-xs leading-5 text-gray-500">tom.simpson@example.com</p>
</div>
</li>
</ul>
</div>
<div class="relative">
<div class="sticky top-0 z-10 border-y border-b-gray-200 border-t-gray-100 bg-gray-50 px-3 py-1.5 text-sm font-semibold leading-6 text-gray-900">
<h3>T</h3>
</div>
<ul role="list" class="divide-y divide-gray-100">
<li class="flex gap-x-4 px-3 py-5">
<img class="h-12 w-12 flex-none rounded-full bg-gray-50" src="https://images.unsplash.com/photo-1463453091185-61582044d556?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt="">
<div class="min-w-0">
<p class="text-sm font-semibold leading-6 text-gray-900">Floyd Thompson</p>
<p class="mt-1 truncate text-xs leading-5 text-gray-500">floyd.thompson@example.com</p>
</div>
</li>
<li class="flex gap-x-4 px-3 py-5">
<img class="h-12 w-12 flex-none rounded-full bg-gray-50" src="https://images.unsplash.com/photo-1519345182560-3f2917c472ef?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt="">
<div class="min-w-0">
<p class="text-sm font-semibold leading-6 text-gray-900">Leonard Timmons</p>
<p class="mt-1 truncate text-xs leading-5 text-gray-500">leonard.timmons@example.com</p>
</div>
</li>
<li class="flex gap-x-4 px-3 py-5">
<img class="h-12 w-12 flex-none rounded-full bg-gray-50" src="https://images.unsplash.com/photo-1517365830460-955ce3ccd263?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt="">
<div class="min-w-0">
<p class="text-sm font-semibold leading-6 text-gray-900">Whitney Trudeau</p>
<p class="mt-1 truncate text-xs leading-5 text-gray-500">whitney.trudeau@example.com</p>
</div>
</li>
</ul>
</div>
<div class="relative">
<div class="sticky top-0 z-10 border-y border-b-gray-200 border-t-gray-100 bg-gray-50 px-3 py-1.5 text-sm font-semibold leading-6 text-gray-900">
<h3>W</h3>
</div>
<ul role="list" class="divide-y divide-gray-100">
<li class="flex gap-x-4 px-3 py-5">
<img class="h-12 w-12 flex-none rounded-full bg-gray-50" src="https://images.unsplash.com/photo-1500917293891-ef795e70e1f6?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt="">
<div class="min-w-0">
<p class="text-sm font-semibold leading-6 text-gray-900">Kristin Watson</p>
<p class="mt-1 truncate text-xs leading-5 text-gray-500">kristin.watson@example.com</p>
</div>
</li>
<li class="flex gap-x-4 px-3 py-5">
<img class="h-12 w-12 flex-none rounded-full bg-gray-50" src="https://images.unsplash.com/photo-1502685104226-ee32379fefbe?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt="">
<div class="min-w-0">
<p class="text-sm font-semibold leading-6 text-gray-900">Emily Wilson</p>
<p class="mt-1 truncate text-xs leading-5 text-gray-500">emily.wilson@example.com</p>
</div>
</li>
</ul>
</div>
<div class="relative">
<div class="sticky top-0 z-10 border-y border-b-gray-200 border-t-gray-100 bg-gray-50 px-3 py-1.5 text-sm font-semibold leading-6 text-gray-900">
<h3>Y</h3>
</div>
<ul role="list" class="divide-y divide-gray-100">
<li class="flex gap-x-4 px-3 py-5">
<img class="h-12 w-12 flex-none rounded-full bg-gray-50" src="https://images.unsplash.com/photo-1505840717430-882ce147ef2d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt="">
<div class="min-w-0">
<p class="text-sm font-semibold leading-6 text-gray-900">Emma Young</p>
<p class="mt-1 truncate text-xs leading-5 text-gray-500">emma.young@example.com</p>
</div>
</li>
</ul>
</div>
</nav>