mirror of
https://github.com/revanced/revanced-website.git
synced 2025-04-29 22:24:31 +02:00
134 lines
2.5 KiB
Svelte
134 lines
2.5 KiB
Svelte
<script lang="ts">
|
|
import Modal from './Dialogue.svelte';
|
|
export let name = "";
|
|
export let selected: Array<string>;
|
|
export let variants;
|
|
export let clicked = false;
|
|
|
|
let has_variants = variants.length > 1;
|
|
let modalOpen = false;
|
|
|
|
// TODO: cycle between them.
|
|
let current = variants[0];
|
|
|
|
function select_logo(id) {
|
|
clicked = !clicked;
|
|
if (selected.includes(id)) {
|
|
selected = selected.filter((e) => e !== id);
|
|
} else {
|
|
selected.push(id);
|
|
// the Updater
|
|
selected = selected;
|
|
}
|
|
console.log(selected);
|
|
}
|
|
|
|
const handleClick = () => {
|
|
if (!has_variants) {
|
|
select_logo(current.id);
|
|
} else {
|
|
modalOpen = !modalOpen;
|
|
}
|
|
};
|
|
</script>
|
|
|
|
|
|
{#if has_variants}
|
|
<Modal bind:modalOpen>
|
|
<svelte:fragment slot="title">{name}</svelte:fragment>
|
|
<svelte:fragment slot="description">
|
|
guhhhhhhhhhhhhhhhhhhhhh
|
|
</svelte:fragment>
|
|
{#each variants as variant, i}
|
|
<!-- Mega Trolley -->
|
|
<svelte:self bind:selected variants={[{...variant, filename: (i + 1).toString()}]} clicked={selected.includes(variant.id)}/>
|
|
{/each}
|
|
<!-- <Variants /> -->
|
|
</Modal>
|
|
{/if}
|
|
|
|
<!-- SHUT UP -->
|
|
<!-- svelte-ignore a11y-no-noninteractive-tabindex -->
|
|
<div class="option" on:click={handleClick} on:keypress={handleClick} tabindex="0" class:clicked>
|
|
<img src={current.gdrive_direct_url} alt={current.filename} />
|
|
<div class="text">
|
|
<h2>{name}</h2>
|
|
<h6>{current.filename}</h6>
|
|
{#if has_variants}
|
|
<h4>This logo has variants</h4>
|
|
{/if}
|
|
</div>
|
|
</div>
|
|
|
|
<style>
|
|
|
|
.option {
|
|
color: var(--white);
|
|
text-decoration: none;
|
|
padding: 1.25rem;
|
|
width: 100%;
|
|
transition: all 0.3s var(--bezier-one);
|
|
border-radius: 16px;
|
|
display: flex;
|
|
gap: 1.5rem;
|
|
background-color: var(--grey-six);
|
|
cursor: pointer;
|
|
align-items: center;
|
|
}
|
|
|
|
h2 {
|
|
font-size: 1rem;
|
|
font-weight: 500;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
h4 {
|
|
font-weight: 800;
|
|
}
|
|
|
|
h6 {
|
|
font-size: 0.9rem;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
|
|
}
|
|
.text {
|
|
width: 100%;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.clicked {
|
|
background-color: var(--accent-low-opacity);
|
|
}
|
|
|
|
.clicked h2,
|
|
.clicked h6 {
|
|
color: var(--white);
|
|
}
|
|
|
|
div:hover {
|
|
filter: brightness(0.85);
|
|
}
|
|
|
|
img {
|
|
border-radius: 8px;
|
|
height: 125px;
|
|
width: 125px;
|
|
background-color: var(--grey-two);
|
|
transition: transform 0.4s var(--bezier-one);
|
|
user-select: none;
|
|
}
|
|
|
|
@media screen and (max-width: 768px) {
|
|
div {
|
|
flex-direction: column;
|
|
}
|
|
|
|
.text {
|
|
text-align: center;
|
|
}
|
|
}
|
|
</style>
|