refactor: Reduce repetition by adding icon arguments to Button

This commit is contained in:
Ushie 2024-12-22 03:19:02 +03:00
parent 2f24780f34
commit 24650c71a9
No known key found for this signature in database
GPG Key ID: B3AAD18842E34632
4 changed files with 15 additions and 13 deletions

View File

@ -12,14 +12,8 @@
Customize your mobile experience through ReVanced <br /> by applying patches to your applications. Customize your mobile experience through ReVanced <br /> by applying patches to your applications.
</p> </p>
<div class="hero-buttons"> <div class="hero-buttons">
<Button type="filled" href="download"> <Button type="filled" icon={TrayArrowDown} href="download">Download</Button>
<TrayArrowDown size="20px" /> <Button type="tonal" icon={FileDocumentOutline} href="patches">View patches</Button>
Download
</Button>
<Button type="tonal" href="patches">
<FileDocumentOutline size="20px" />
View patches
</Button>
</div> </div>
</div> </div>
</section> </section>

View File

@ -1,5 +1,8 @@
<script lang="ts"> <script lang="ts">
export let type: 'filled' | 'tonal' | 'text' | 'outlined'; export let type: 'filled' | 'tonal' | 'text' | 'outlined';
export let icon: any | undefined = undefined;
export let iconSize = 20;
export let iconColor = 'currentColor';
export let href: string = ''; export let href: string = '';
export let target: string = ''; export let target: string = '';
export let label: string = ''; export let label: string = '';
@ -7,10 +10,12 @@
{#if href} {#if href}
<a {href} {target} class={`button-${type}`} aria-label={label}> <a {href} {target} class={`button-${type}`} aria-label={label}>
<svelte:component this={icon} size={iconSize} color={iconColor} />
<slot /> <slot />
</a> </a>
{:else} {:else}
<button on:click class={`button-${type}`} aria-label={label}> <button on:click class={`button-${type}`} aria-label={label}>
<svelte:component this={icon} size={iconSize} color={iconColor} />
<slot /> <slot />
</button> </button>
{/if} {/if}

View File

@ -25,7 +25,7 @@
<a href={url} rel="noreferrer" target="_blank" on:click|stopPropagation> <a href={url} rel="noreferrer" target="_blank" on:click|stopPropagation>
<h4>{name}</h4> <h4>{name}</h4>
</a> </a>
<div id="arrow" style:transform={expanded ? 'rotate(0deg)' : 'rotate(-180deg)'}> <div id="arrow" style:transform={expanded ? 'rotate(0deg)' : 'rotate(180deg)'}>
<ChevronUp size="24px" color="var(--surface-six)" /> <ChevronUp size="24px" color="var(--surface-six)" />
</div> </div>
</div> </div>

View File

@ -91,13 +91,16 @@
<div class="buttons"> <div class="buttons">
<Query {query} let:data> <Query {query} let:data>
{#if !isAndroid || androidVersion < 8} {#if !isAndroid || androidVersion < 8}
<Button on:click={handleClick} type="filled"> <Button on:click={handleClick} icon={TrayArrowDown} type="filled">
<TrayArrowDown size="20px" />
{data.release.version} {data.release.version}
</Button> </Button>
{:else} {:else}
<Button on:click={handleClick} type="filled" href={data.release.download_url}> <Button
<TrayArrowDown size="20px" /> on:click={handleClick}
icon={TrayArrowDown}
type="filled"
href={data.release.download_url}
>
{data.release.version} {data.release.version}
</Button> </Button>
{/if} {/if}