91 lines
1.7 KiB
Svelte
91 lines
1.7 KiB
Svelte
<script lang="ts">
|
|
import { ripple } from "$lib/actions/ripple";
|
|
import Icon from "$lib/components/ui/Icon.svelte";
|
|
|
|
interface Props {
|
|
icon: string;
|
|
label: string;
|
|
onclick?: () => void;
|
|
soon?: boolean;
|
|
value?: string;
|
|
}
|
|
|
|
let { icon, label, value, soon = false, onclick }: Props = $props();
|
|
</script>
|
|
|
|
<button
|
|
class="settings-item"
|
|
disabled={soon}
|
|
{onclick}
|
|
type="button"
|
|
class:soon
|
|
use:ripple
|
|
>
|
|
<Icon class="leading" name={icon} size="1.5rem" />
|
|
<span class="label">{label}</span>
|
|
{#if soon}
|
|
<span class="soon-tag">скоро</span>
|
|
{:else if value}
|
|
<span class="value">{value}</span>
|
|
{/if}
|
|
{#if onclick && !soon}
|
|
<Icon class="chevron" name="arrow-right" size="1rem" />
|
|
{/if}
|
|
</button>
|
|
|
|
<style lang="scss">
|
|
.settings-item {
|
|
cursor: pointer;
|
|
position: relative;
|
|
overflow: hidden;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 1.5rem;
|
|
|
|
width: 100%;
|
|
min-height: 3.5rem;
|
|
padding: 0 1.25rem;
|
|
border: 0;
|
|
|
|
font-size: 1rem;
|
|
text-align: start;
|
|
color: var(--color-text);
|
|
background-color: transparent;
|
|
transition: background-color 0.15s ease;
|
|
|
|
&:hover:not(:disabled) {
|
|
background-color: var(--color-chat-hover);
|
|
}
|
|
|
|
&:disabled {
|
|
cursor: default;
|
|
}
|
|
}
|
|
|
|
:global(.settings-item .leading) {
|
|
flex-shrink: 0;
|
|
color: var(--color-icon-secondary);
|
|
}
|
|
|
|
.label {
|
|
overflow: hidden;
|
|
flex: 1;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.value {
|
|
color: var(--color-text-secondary);
|
|
}
|
|
|
|
.soon-tag {
|
|
font-size: 0.75rem;
|
|
color: var(--color-text-secondary);
|
|
}
|
|
|
|
:global(.settings-item .chevron) {
|
|
flex-shrink: 0;
|
|
color: var(--color-icon-secondary);
|
|
}
|
|
</style>
|