Private
Public Access
84 lines
2.7 KiB
PHP
84 lines
2.7 KiB
PHP
<?php return [
|
|
'render' => function($prop) {
|
|
static $assets_loaded = false;
|
|
$items = is_array($prop['items'] ?? false) ? $prop['items'] : array();
|
|
$class = trim('tile-grid '.(string)first($prop['class'] ?? false, ''));
|
|
$columns = (string)first($prop['columns'] ?? false, 'repeat(auto-fit, minmax(180px, 1fr))');
|
|
$empty = (string)first($prop['empty'] ?? false, 'No tiles available.');
|
|
ob_start();
|
|
if(!$assets_loaded)
|
|
{
|
|
$assets_loaded = true;
|
|
?>
|
|
<style>
|
|
.tile-grid {
|
|
display: grid;
|
|
grid-template-columns: var(--tile-grid-columns, repeat(auto-fit, minmax(180px, 1fr)));
|
|
gap: 1rem;
|
|
margin: 1rem 0;
|
|
}
|
|
.tile-grid__tile {
|
|
position: relative;
|
|
display: flex;
|
|
min-height: 150px;
|
|
align-items: end;
|
|
overflow: hidden;
|
|
border: 1px solid var(--border, rgba(0,0,0,.16));
|
|
border-radius: 1rem;
|
|
background: linear-gradient(135deg, color-mix(in srgb, var(--primary, #2563eb) 24%, transparent), color-mix(in srgb, var(--surface-elevated, #fff) 80%, transparent));
|
|
background-position: center;
|
|
background-size: cover;
|
|
box-shadow: var(--shadow, 0 10px 24px rgba(0,0,0,.12));
|
|
color: #fff;
|
|
text-decoration: none;
|
|
}
|
|
.tile-grid__tile:hover { transform: translateY(-1px); text-decoration: none; }
|
|
.tile-grid__tile::before {
|
|
content: "";
|
|
position: absolute;
|
|
inset: 0;
|
|
background: linear-gradient(180deg, rgba(0,0,0,.08), rgba(0,0,0,.66));
|
|
}
|
|
.tile-grid__caption {
|
|
position: relative;
|
|
z-index: 1;
|
|
width: 100%;
|
|
padding: .85rem 1rem;
|
|
font-weight: 750;
|
|
text-shadow: 0 1px 8px rgba(0,0,0,.65);
|
|
}
|
|
.tile-grid__description {
|
|
display: block;
|
|
margin-top: .2rem;
|
|
font-size: .82rem;
|
|
font-weight: 550;
|
|
opacity: .86;
|
|
}
|
|
</style>
|
|
<?php
|
|
}
|
|
?>
|
|
<div class="<?= asafe($class) ?>" style="--tile-grid-columns: <?= asafe($columns) ?>;">
|
|
<?php if(!$items) { ?>
|
|
<div class="tile-grid__empty"><?= safe($empty) ?></div>
|
|
<?php } ?>
|
|
<?php foreach($items as $item) {
|
|
$url = (string)first($item['url'] ?? false, $item['route'] ?? false, '');
|
|
$params = is_array($item['params'] ?? false) ? $item['params'] : array();
|
|
$href = $url !== '' ? URL::Link($url, $params) : '#';
|
|
$image = (string)first($item['image'] ?? false, '');
|
|
$caption = (string)first($item['caption'] ?? false, $item['title'] ?? false, $url);
|
|
$description = (string)first($item['description'] ?? false, '');
|
|
$style = $image !== '' ? ' style="background-image: url(\''.asafe($image).'\');"' : '';
|
|
?>
|
|
<a class="tile-grid__tile" href="<?= asafe($href) ?>"<?= $style ?>>
|
|
<span class="tile-grid__caption"><?= safe($caption) ?><?php if($description !== '') { ?><span class="tile-grid__description"><?= safe($description) ?></span><?php } ?></span>
|
|
</a>
|
|
<?php } ?>
|
|
</div>
|
|
<?php
|
|
return ob_get_clean();
|
|
},
|
|
'about' => 'Responsive image/card navigation tiles inspired by my.kautschuk.com tile-select.',
|
|
];
|