kushal.saha
1c84a162ac
- overhaul the interviewer panel setup for more compact design - assesment scheduling is now in a drawer - replaced emojies with icon in candidate panel
62 lines
2.7 KiB
PHP
62 lines
2.7 KiB
PHP
@props([
|
|
'id',
|
|
'title' => null,
|
|
'description' => null,
|
|
'width' => 'lg',
|
|
'side' => 'right',
|
|
'onClose' => null,
|
|
])
|
|
|
|
@php
|
|
$widths = [
|
|
'sm' => 'max-w-sm',
|
|
'md' => 'max-w-md',
|
|
'lg' => 'max-w-lg',
|
|
'xl' => 'max-w-xl',
|
|
'2xl' => 'max-w-2xl',
|
|
'3xl' => 'max-w-3xl',
|
|
'full' => 'max-w-full',
|
|
];
|
|
|
|
$widthClass = $widths[$width] ?? $widths['lg'];
|
|
$isLeft = $side === 'left';
|
|
$justifyClass = $isLeft ? 'justify-start' : 'justify-end';
|
|
$translateClosed = $isLeft ? '-translate-x-full' : 'translate-x-full';
|
|
$borderClass = $isLeft ? 'border-r' : 'border-l';
|
|
@endphp
|
|
|
|
<div id="{{ $id }}" {{ $attributes->merge(['class' => "admin-drawer fixed inset-0 w-screen h-screen z-[1000] opacity-0 pointer-events-none transition-opacity duration-300 [&.active]:opacity-100 [&.active]:pointer-events-auto flex $justifyClass"]) }}>
|
|
<!-- Backdrop Overlay Target -->
|
|
<div class="fixed inset-0" onclick="document.getElementById('{{ $id }}').classList.remove('active'); {{ $onClose ? $onClose . '();' : '' }}"></div>
|
|
|
|
<!-- Slide-Over Drawer Content Container -->
|
|
<div class="drawer-panel relative z-10 w-full {{ $widthClass }} h-full bg-slate-900 {{ $borderClass }} border-slate-700/60 shadow-2xl flex flex-col text-white transform {{ $translateClosed }} transition-transform duration-300 ease-out [.active_&]:translate-x-0">
|
|
<!-- Header -->
|
|
<div class="flex items-start justify-between p-6 border-b border-white/10 shrink-0">
|
|
<div class="pr-4">
|
|
@if($title)
|
|
<h3 class="font-outfit text-xl font-bold text-white m-0 leading-snug">{{ $title }}</h3>
|
|
@endif
|
|
@if($description)
|
|
<p class="text-xs text-slate-400 mt-1 mb-0 leading-relaxed">{{ $description }}</p>
|
|
@endif
|
|
</div>
|
|
<button type="button" onclick="document.getElementById('{{ $id }}').classList.remove('active'); {{ $onClose ? $onClose . '();' : '' }}" class="w-8 h-8 rounded-lg bg-slate-800/80 border border-slate-700/60 text-slate-400 hover:text-white hover:bg-slate-700/60 transition-colors flex items-center justify-center cursor-pointer shrink-0 text-sm focus:outline-none focus:ring-1 focus:ring-indigo-500">
|
|
<i class="fa-solid fa-xmark"></i>
|
|
</button>
|
|
</div>
|
|
|
|
<!-- Scrollable Body Content -->
|
|
<div class="flex-1 overflow-y-auto p-6 space-y-4">
|
|
{{ $slot }}
|
|
</div>
|
|
|
|
<!-- Optional Fixed Footer -->
|
|
@if(isset($footer))
|
|
<div class="p-6 border-t border-white/10 bg-slate-950/40 shrink-0">
|
|
{{ $footer }}
|
|
</div>
|
|
@endif
|
|
</div>
|
|
</div>
|