122 lines
4.9 KiB
Plaintext
122 lines
4.9 KiB
Plaintext
|
---
|
||
|
|
interface Props {
|
||
|
|
showSizeSelector?: boolean;
|
||
|
|
showViewSelector?: boolean;
|
||
|
|
className?: string;
|
||
|
|
}
|
||
|
|
|
||
|
|
const {
|
||
|
|
showSizeSelector = true,
|
||
|
|
showViewSelector = true,
|
||
|
|
className = "",
|
||
|
|
} = Astro.props;
|
||
|
|
---
|
||
|
|
|
||
|
|
<div class={`flex items-center gap-4 ${className}`}>
|
||
|
|
{showSizeSelector && (
|
||
|
|
<div class="flex items-center gap-2">
|
||
|
|
<span class="text-sm zag-text-muted hidden sm:inline">Size:</span>
|
||
|
|
<div class="size-selector flex items-center gap-1 border-2 border-solid zag-border-b rounded-lg p-1 zag-bg zag-transition">
|
||
|
|
<button
|
||
|
|
@click="setIconSize('small')"
|
||
|
|
:class="iconSize === 'small' ? 'active-size' : 'inactive-size'"
|
||
|
|
class="p-1.5 transition-all rounded-md focus:outline-none focus:ring-2 focus:ring-current"
|
||
|
|
aria-label="Small icons"
|
||
|
|
title="Small icons (Alt+1)"
|
||
|
|
>
|
||
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||
|
|
<rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect>
|
||
|
|
</svg>
|
||
|
|
</button>
|
||
|
|
<button
|
||
|
|
@click="setIconSize('medium')"
|
||
|
|
:class="iconSize === 'medium' ? 'active-size' : 'inactive-size'"
|
||
|
|
class="p-1.5 transition-all rounded-md focus:outline-none focus:ring-2 focus:ring-current"
|
||
|
|
aria-label="Medium icons"
|
||
|
|
title="Medium icons (Alt+2)"
|
||
|
|
>
|
||
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||
|
|
<rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect>
|
||
|
|
</svg>
|
||
|
|
</button>
|
||
|
|
<button
|
||
|
|
@click="setIconSize('large')"
|
||
|
|
:class="iconSize === 'large' ? 'active-size' : 'inactive-size'"
|
||
|
|
class="p-1.5 transition-all rounded-md focus:outline-none focus:ring-2 focus:ring-current"
|
||
|
|
aria-label="Large icons"
|
||
|
|
title="Large icons (Alt+3)"
|
||
|
|
>
|
||
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||
|
|
<rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect>
|
||
|
|
</svg>
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
)}
|
||
|
|
|
||
|
|
{showViewSelector && (
|
||
|
|
<div class="flex items-center gap-2">
|
||
|
|
<span class="text-sm zag-text-muted hidden sm:inline">View:</span>
|
||
|
|
<div class="view-selector border-2 border-solid zag-border-b rounded-lg p-1 zag-bg zag-transition">
|
||
|
|
<button
|
||
|
|
@click="toggleViewMode"
|
||
|
|
:class="viewMode === 'grid' ? 'active-view' : 'inactive-view'"
|
||
|
|
class="p-1.5 transition-all rounded-md focus:outline-none focus:ring-2 focus:ring-current"
|
||
|
|
aria-label="Toggle view mode"
|
||
|
|
:title="viewMode === 'grid' ? 'Switch to list view (Alt+G)' : 'Switch to grid view (Alt+G)'"
|
||
|
|
>
|
||
|
|
<svg x-show="viewMode === 'grid'" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||
|
|
<rect x="3" y="3" width="7" height="7"></rect>
|
||
|
|
<rect x="14" y="3" width="7" height="7"></rect>
|
||
|
|
<rect x="14" y="14" width="7" height="7"></rect>
|
||
|
|
<rect x="3" y="14" width="7" height="7"></rect>
|
||
|
|
</svg>
|
||
|
|
<svg x-show="viewMode === 'list'" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||
|
|
<line x1="8" y1="6" x2="21" y2="6"></line>
|
||
|
|
<line x1="8" y1="12" x2="21" y2="12"></line>
|
||
|
|
<line x1="8" y1="18" x2="21" y2="18"></line>
|
||
|
|
<line x1="3" y1="6" x2="3.01" y2="6"></line>
|
||
|
|
<line x1="3" y1="12" x2="3.01" y2="12"></line>
|
||
|
|
<line x1="3" y1="18" x2="3.01" y2="18"></line>
|
||
|
|
</svg>
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
)}
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<style>
|
||
|
|
.size-selector, .view-selector {
|
||
|
|
box-shadow: 2px 2px 0 var(--color-zag-dark);
|
||
|
|
:where(.dark, .dark *) & {
|
||
|
|
box-shadow: 2px 2px 0 var(--color-zag-light);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.active-size, .active-view {
|
||
|
|
color: var(--color-zag-dark);
|
||
|
|
background-color: var(--color-zag-light);
|
||
|
|
transform: translateY(-1px);
|
||
|
|
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
||
|
|
:where(.dark, .dark *) & {
|
||
|
|
color: var(--color-zag-dark);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.inactive-size, .inactive-view {
|
||
|
|
color: var(--color-zag-dark-muted);
|
||
|
|
:where(.dark, .dark *) & {
|
||
|
|
color: var(--color-zag-light-muted);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.inactive-size:hover, .inactive-view:hover {
|
||
|
|
background-color: var(--color-zag-light-muted);
|
||
|
|
color: var(--color-zag-dark);
|
||
|
|
:where(.dark, .dark *) & {
|
||
|
|
background-color: var(--color-zag-dark-muted);
|
||
|
|
color: var(--color-zag-light);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</style>
|