revanced-website/src/lib/components/molecules/ContributorHost.svelte
2022-10-21 21:16:08 +02:00

74 lines
1.6 KiB
Svelte

<script lang="ts">
import type { Contributor } from '$lib/types';
import ContributorButton from '../atoms/ContributorPerson.svelte';
export let contribs: Contributor[];
export let repo: string;
let repo_name = repo
.replace(/-/g, ' ')
.replace(/revanced\/revanced/g, 'ReVanced')
.replace(/cli/g, 'CLI')
.replace(/api/g, 'API')
.replace(/(?:^|\s)\S/g, (x) => x.toUpperCase());
let usersIwantToExplodeSoBadly = ['semantic-release-bot'];
</script>
{#if contribs}
<div class="container">
<a href="https://github.com/{repo}" target="_blank">
<h2>{repo_name}</h2>
</a>
<div class="contrib-host">
{#each contribs as contrib}
{#if !usersIwantToExplodeSoBadly.includes(contrib.login)}
<ContributorButton
name={contrib.login}
pfp={contrib.avatar_url}
url={contrib.html_url}
/>
{/if}
{/each}
</div>
</div>
{/if}
<style>
h2 {
margin-bottom: 1rem;
}
a {
transition: all 0.3s var(--bezier-one);
display: block;
text-decoration: none;
width: max-content;
border-radius: 8px;
}
a > h2 {
transition: all 0.3s var(--bezier-one);
width: max-content;
padding: 0rem 0.4rem;
border-radius: 8px;
}
a:hover > h2 {
width: max-content;
background-color: var(--grey-three);
color: var(--accent-color);
}
.contrib-host {
gap: 1.5rem;
display: grid;
justify-items: center;
grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
background-color: var(--grey-six);
padding: 1.5rem;
border-radius: 16px;
}
</style>