download selection wip

Co-authored-by: sn <baiorett@koisu.ru>
This commit is contained in:
afnzmn
2022-07-19 17:42:31 -04:00
parent d006c09266
commit dfc0dfefa5
7 changed files with 135 additions and 11 deletions

View File

@@ -1,12 +1,12 @@
<script>
import DownloadSelection from '../atoms/DownloadSelection.svelte';
import DownloadChannel from '../atoms/DownloadChannel.svelte';
import { createEventDispatcher } from 'svelte';
const dispatch = createEventDispatcher();
export let items = ['Manager', 'CLI', 'Patches', 'Integrations'];
export let items = ['Stable', 'Development'];
export let activeTab = 'Manager';
export let activeTab = 'Stable';
$: handleTabChange = (item) => {
activeTab = item;
@@ -15,10 +15,10 @@
<div class="download-selection">
{#each items as item}
<DownloadSelection active={item === activeTab}
<DownloadChannel active={item === activeTab}
on:click={handleTabChange(item)}>
{item}
</DownloadSelection>
</DownloadChannel>
{/each}
</div>

View File

@@ -0,0 +1,25 @@
<script>
import DownloadSelector from "../atoms/DownloadSelector.svelte";
</script>
<div class="download-selector-main">
<DownloadSelector></DownloadSelector>
<DownloadSelector></DownloadSelector>
<DownloadSelector></DownloadSelector>
<DownloadSelector></DownloadSelector>
</div>
<style>
.download-selector-main {
margin-top: 2rem;
padding: 12px 12px;
border-radius: 25px;
background-color: var(--grey-one);
width: 100;
gap:15px;
align-items: center;
display: grid;
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
}
</style>