67 lines
2.9 KiB
PHP

@props([
// title of the card
'title' => null,
// should the card be displayed with a shadow
'has_shadow' => config('bladewind.card.has_shadow', true),
// for backward compatibility with Laravel 8
'hasShadow' => config('bladewind.card.has_shadow', true),
// display a border around the card. useful on white backgrounds
'has_border' => config('bladewind.card.has_border', true),
// display a thicker shadow on hover
'hover_effect' => config('bladewind.card.hover_effect', false),
// reduce padding within the card
'compact' => config('bladewind.card.compact', false),
// TODO: deprecate this
'reduce_padding' => config('bladewind.card.reduce_padding', false),
// for backward compatibility with Laravel 8
'reducePadding' => config('bladewind.card.reduce_padding', false),
// content to display as card header
'header' => null,
// content to display as card footer
'footer' => null,
// additional css
'class' => null,
// the contact card uses this card component but needs to have a different class name
'is_contact_card' => false,
])
@php
// reset variables for Laravel 8 support
$compact = parseBladewindVariable($compact);
$has_shadow = parseBladewindVariable($has_shadow);
$hasShadow = parseBladewindVariable($hasShadow);
$reduce_padding = parseBladewindVariable($reduce_padding);
$reducePadding = parseBladewindVariable($reducePadding);
$hover_effect = parseBladewindVariable($hover_effect);
$has_border = parseBladewindVariable($has_border);
$is_contact_card = parseBladewindVariable($is_contact_card);
if ( !$hasShadow ) $has_shadow = $hasShadow;
if ( $reducePadding ) {
$reduce_padding = $reducePadding;
$compact = $reduce_padding;
}
$class = "bg-white dark:bg-dark-800/30 rounded-lg $class";
$contact_card_css = ($is_contact_card) ? 'bw-contact-card' : 'bw-card';
$has_border_css = ($has_border) ? 'border border-slate-200 dark:border-dark-600/60 focus:outline-none' : '';
$header_compact_css = (!$header && ! $compact) ? 'p-8' : (($compact) ? 'p-4' : '');
$shadow_css = ($has_shadow) ? 'shadow-sm shadow-slate-200/50 dark:shadow-dark-800/70' : '';
$hover_css = ($hover_effect) ? 'hover:shadow-slate-400 hover:dark:shadow-dark-900 cursor-pointer' : '';
@endphp
<div {{ $attributes->merge([ 'class' => "$class $contact_card_css $has_border_css $header_compact_css $shadow_css $hover_css"]) }}>
@if($header)
<div class="border-b border-gray-100/30 dark:border-dark-600/60">
{{ $header }}
</div>
@endif
@if($title && ! $header)
<div class="uppercase tracking-wide text-xs text-gray-500/90 mb-2">{{ $title }}</div>
@endif
<div @if($title && ! $header) class="mt-6" @endif>
{{ $slot }}
</div>
@if($footer)
<div class="border-t border-gray-100/30 dark:border-dark-600/60">
{{$footer}}
</div>
@endif
</div>