mirror of
https://github.com/hcengineering/platform.git
synced 2026-08-31 20:29:55 +02:00
55 lines
1.2 KiB
Svelte
55 lines
1.2 KiB
Svelte
<script lang="ts">
|
|
import { IntlString } from '@hcengineering/platform'
|
|
import { Button } from '@hcengineering/ui'
|
|
|
|
export let mode: string
|
|
export let config: [string, IntlString, object][]
|
|
export let onChange: (_mode: string) => void
|
|
|
|
function getButtonShape (i: number) {
|
|
if (config.length === 1) return 'round'
|
|
switch (i) {
|
|
case 0:
|
|
return 'rectangle-right'
|
|
case config.length - 1:
|
|
return 'rectangle-left'
|
|
default:
|
|
return 'rectangle'
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<div class="itemsContainer">
|
|
<div class="flex-center">
|
|
{#each config as [_mode, label, params], i}
|
|
<div class="buttonWrapper">
|
|
<Button
|
|
{label}
|
|
labelParams={params}
|
|
size="small"
|
|
on:click={() => onChange(_mode)}
|
|
selected={_mode === mode}
|
|
shape={getButtonShape(i)}
|
|
/>
|
|
</div>
|
|
{/each}
|
|
</div>
|
|
</div>
|
|
|
|
<style lang="scss">
|
|
.itemsContainer {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding: 0.65rem 1.35rem 0.65rem 2.25rem;
|
|
border-top: 1px solid var(--theme-button-border-hovered);
|
|
}
|
|
.buttonWrapper {
|
|
margin-right: 1px;
|
|
|
|
&:last-child {
|
|
margin-right: 0;
|
|
}
|
|
}
|
|
</style>
|