60 lines
1.4 KiB
Vue
60 lines
1.4 KiB
Vue
<script setup lang="ts">
|
|
import fontColorContrast from "font-color-contrast"
|
|
import { getHex } from "pastel-color"
|
|
|
|
import { useGitHubLogin } from "@/hooks/useGitHubLogin.hook"
|
|
import { useFavoriteRepos } from "@/modules/repo/hooks/useFavoriteRepos.hook"
|
|
|
|
const { username } = useGitHubLogin()
|
|
const { savedFavoriteRepos } = useFavoriteRepos()
|
|
|
|
const getStyle = (seed: string) => {
|
|
const backgroundColor = getHex(seed)
|
|
return { backgroundColor, color: fontColorContrast(backgroundColor) }
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<section class="repo-list">
|
|
<router-link :to="{ name: 'PublicNoteListView' }" class="btn special"
|
|
>Public notes</router-link
|
|
>
|
|
<router-link
|
|
v-for="favoriteRepo in savedFavoriteRepos"
|
|
:key="favoriteRepo._id"
|
|
:to="{
|
|
name: 'FluxNoteView',
|
|
params: {
|
|
user: username,
|
|
repo: favoriteRepo.name
|
|
}
|
|
}"
|
|
class="btn"
|
|
:style="getStyle(`${favoriteRepo.name}-${username}`)"
|
|
>
|
|
{{ favoriteRepo.name }}
|
|
</router-link>
|
|
</section>
|
|
</template>
|
|
|
|
<style scoped lang="scss">
|
|
.repo-list {
|
|
display: flex;
|
|
justify-content: space-evenly;
|
|
gap: 1rem;
|
|
flex-wrap: wrap;
|
|
|
|
a {
|
|
border: 0;
|
|
width: 160px;
|
|
height: 90px;
|
|
font-size: 1.5rem;
|
|
}
|
|
|
|
.special {
|
|
background-image: linear-gradient(to left bottom, #8cd18d 0%, #fbc2f1 100%);
|
|
color: black;
|
|
}
|
|
}
|
|
</style>
|