Spaces:
Sleeping
Sleeping
File size: 1,791 Bytes
1fff71f |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 |
<script lang="ts">
import type { MessageMode } from '$lib/types/enums';
export let selectedMode: MessageMode = 'chat';
export let disabled = false;
const modes: { value: MessageMode; label: string; icon: string; color: string }[] = [
{ value: 'chat', label: 'Chat', icon: 'bi-chat-left-text', color: 'primary' },
{ value: 'memorize', label: 'Memorize', icon: 'bi-journal-bookmark', color: 'success' },
{ value: 'parse', label: 'Parse', icon: 'bi-code-slash', color: 'info' }
];
function selectMode(mode: MessageMode) {
if (!disabled) {
selectedMode = mode;
}
}
</script>
<div class="mode-selector">
<div class="btn-group" role="group" aria-label="Message mode selector">
{#each modes as mode}
<button
type="button"
class="btn btn-outline-{mode.color}"
class:active={selectedMode === mode.value}
on:click={() => selectMode(mode.value)}
{disabled}
title="{mode.label} mode"
>
<i class="{mode.icon} me-1"></i>
<span class="mode-label">{mode.label}</span>
</button>
{/each}
</div>
</div>
<style>
.mode-selector .btn-group {
width: 100%;
}
.mode-selector .btn {
flex: 1;
font-size: 0.875rem;
padding: 0.5rem 0.75rem;
}
.mode-selector .btn.active {
font-weight: 600;
}
/* Mobile optimizations */
@media (max-width: 576px) {
.mode-selector .btn {
font-size: 0.8125rem;
padding: 0.4rem 0.5rem;
}
.mode-label {
display: inline;
}
}
/* Very small screens - icon only */
@media (max-width: 380px) {
.mode-label {
display: none;
}
.mode-selector .btn {
padding: 0.5rem;
}
.mode-selector .btn i {
margin: 0 !important;
}
}
/* Larger screens */
@media (min-width: 768px) {
.mode-selector .btn {
font-size: 0.9375rem;
padding: 0.5rem 1rem;
}
}
</style>
|