mirror of
https://github.com/revanced/revanced-website.git
synced 2025-04-29 22:24:31 +02:00
refactor: Reduce repetition by adding icon arguments to Button
This commit is contained in:
parent
2f24780f34
commit
24650c71a9
@ -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>
|
||||||
|
@ -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}
|
||||||
|
@ -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>
|
||||||
|
@ -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}
|
||||||
|
Loading…
x
Reference in New Issue
Block a user