Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

feat: translate github links #71

Merged
merged 2 commits into from
Apr 10, 2024
Merged

feat: translate github links #71

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
a826b89
feat: add translation for github links
Stuyk Apr 10, 2024
0f35637
lint: fix
Stuyk Apr 10, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
99 changes: 50 additions & 49 deletions src/components/common/MarkdownParser.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,15 +2,17 @@
import { onMounted, ref, computed } from "vue";
import markdownit from "markdown-it";
import MarkdownItMermaid from "@agoose77/markdown-it-mermaid";
import { alertPlugin} from 'markdown-it-github-alert'
import { alertPlugin } from "markdown-it-github-alert";

import DOMPurify from "dompurify";

const md = markdownit({
html: true,
linkify: true,
typographer: true,
}).use(MarkdownItMermaid).use(alertPlugin);
})
.use(MarkdownItMermaid)
.use(alertPlugin);

const props = defineProps<{ limit?: number }>();
const content = defineModel<string>();
Expand All @@ -30,34 +32,34 @@ async function parseData() {

const getClasses = computed(() => {
return [
'prose',
'max-w-none',
'prose:font-interVar',
'prose-a:text-accent-100',
'prose-p:text-light',
'prose-code:text-accent-200',
'prose-li:text-light',
'prose-h1:text-light',
'prose-h1:text-400',
'prose-h2:text-light',
'prose-h2:text-300',
'prose-h3:text-light',
'prose-h3:text-200',
'prose-h4:text-light',
'prose-h4:text-200',
'prose-h5:text-light',
'prose-h5:text-200',
'prose-strong:text-light',
'prose-pre:bg-grey-500',
'prose-table:text-light',
'prose-table:border',
'prose-td:text-center',
'prose-td:p-2',
'prose-td:border',
'prose-th:text-center',
'prose-th:text-light',
'prose-th:border',
]
"prose",
"max-w-none",
"prose:font-interVar",
"prose-a:text-accent-100",
"prose-p:text-light",
"prose-code:text-accent-200",
"prose-li:text-light",
"prose-h1:text-light",
"prose-h1:text-400",
"prose-h2:text-light",
"prose-h2:text-300",
"prose-h3:text-light",
"prose-h3:text-200",
"prose-h4:text-light",
"prose-h4:text-200",
"prose-h5:text-light",
"prose-h5:text-200",
"prose-strong:text-light",
"prose-pre:bg-grey-500",
"prose-table:text-light",
"prose-table:border",
"prose-td:text-center",
"prose-td:p-2",
"prose-td:border",
"prose-th:text-center",
"prose-th:text-light",
"prose-th:border",
];
});

onMounted(parseData);
Expand All @@ -66,50 +68,49 @@ onMounted(parseData);
<template>
<div :class="getClasses">
<!-- eslint-disable vue/no-v-html -->
<div v-if="content" v-html="trimmedContent"></div>
<div v-if="content" v-html="trimmedContent"></div>
<!--eslint-enable-->
</div>
</template>

<style>
.markdown-alert {
padding: 1em;
border-left: 0.25rem solid;
padding-bottom: 0px;
padding-top: 0px;
border-color: var(--border-color);
padding: 1em;
border-left: 0.25rem solid;
padding-bottom: 0px;
padding-top: 0px;
border-color: var(--border-color);
}

.markdown-alert > span {
display: flex;
flex-direction: row;
align-items: center;
color: var(--border-color);
display: flex;
flex-direction: row;
align-items: center;
color: var(--border-color);
}

.markdown-alert .markdown-alert-icon {
margin-right: 0.5em;
fill: var(--border-color);
margin-right: 0.5em;
fill: var(--border-color);
}

.markdown-alert.note {
--border-color: #539BF5;
--border-color: #539bf5;
}

.markdown-alert.warning {
--border-color: #C69026;
--border-color: #c69026;
}

.markdown-alert.important {
--border-color: #986EE2;
--border-color: #986ee2;
}

.markdown-alert.caution {
--border-color: #E5534B;
--border-color: #e5534b;
}

.markdown-alert.tip {
--border-color: #57AB5A;
--border-color: #57ab5a;
}

</style>
</style>
20 changes: 13 additions & 7 deletions src/components/proposals/GithubComments.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -73,16 +73,18 @@ onMounted(refresh);
v-if="!isLoggedIn"
class="flex flex-row gap-8 px-8 py-6 bg-gradient from-gradient-100 to-gradient-900 rounded-md text-dark justify-between items-center"
>
<span class="text-400 font-medium">{{ $t('components.GithubComments.signInLong') }}</span>
<button class="bg-dark py-4 px-6 text-light rounded-md" @click="login">{{ $t('components.GithubComments.signIn') }}</button>
<span class="text-400 font-medium">{{ $t("components.GithubComments.signInLong") }}</span>
<button class="bg-dark py-4 px-6 text-light rounded-md" @click="login">
{{ $t("components.GithubComments.signIn") }}
</button>
</div>
<div v-else class="flex flex-col gap-8 w-full">
<div class="flex flex-row justify-between items-center">
<div class="flex flex-row gap-3 items-center">
<img :src="avatar" class="w-10 h-10 rounded-circle" />
<span class="pt-1 font-medium text-400">{{ username }}</span>
</div>
<CommonButton @click="logout">{{ $t('components.GithubComments.signOut') }}</CommonButton>
<CommonButton @click="logout">{{ $t("components.GithubComments.signOut") }}</CommonButton>
</div>
<div class="flex flex-col relative">
<textarea
Expand All @@ -105,7 +107,7 @@ onMounted(refresh);
</div>

<div class="flex flex-row w-full justify-between items-center mt-[72px] mb-8">
<div class="text-500 font-medium">{{ $t('components.GithubComments.proposalDiscussion') }}</div>
<div class="text-500 font-medium">{{ $t("components.GithubComments.proposalDiscussion") }}</div>
<DropDown v-model="sortingType" :values="sortingList" @select="handleSortingChange" />
</div>
<!-- Ratio Controller -->
Expand All @@ -119,8 +121,10 @@ onMounted(refresh);
class="w-full appearance-none bg-transparent rounded-lg focus:outline-none [&::-webkit-slider-runnable-track]:bg-grey-400 [&::-webkit-slider-runnable-track]:rounded-lg cursor-pointer"
/>
<div class="flex flex-row justify-between gap-8">
<span class="text-grey-100">{{ $t('components.GithubComments.upvoteRatio') }}: {{ ratio }}</span>
<div class="text-200 text-grey-100 text-right">{{ sortedComments.length }} {{ $t('components.GithubComments.totalComments') }}</div>
<span class="text-grey-100">{{ $t("components.GithubComments.upvoteRatio") }}: {{ ratio }}</span>
<div class="text-200 text-grey-100 text-right">
{{ sortedComments.length }} {{ $t("components.GithubComments.totalComments") }}
</div>
</div>
</div>
<!-- Comments -->
Expand Down Expand Up @@ -154,7 +158,9 @@ onMounted(refresh);
<div>{{ comment.createdAtHuman }}</div>
<div class="flex flex-row gap-6">
<!-- GithHub Link -->
<a :href="comment.url" target="_blank" class="hover:opacity-50">{{ $t('components.GithubComments.viewOnGithub') }}</a>
<a :href="comment.url" target="_blank" class="hover:opacity-50">{{
$t("components.GithubComments.viewOnGithub")
}}</a>
<!-- Upvote -->
<div
:class="isLoggedIn ? ['cursor-pointer'] : []"
Expand Down
34 changes: 22 additions & 12 deletions src/components/proposals/GithubLinks.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -73,12 +73,14 @@ onMounted(refresh);
<div>
<!-- Login, or Add Link -->
<div class="flex flex-col justify-between items-center gap-3 md:flex-row md:gap-6 w-full">
<div class="text-light text-500 font-medium text-left w-full">Community Links</div>
<div class="text-light text-500 font-medium text-left w-full">
{{ $t("components.GithubLinks.communityLinks") }}
</div>
<div class="flex flex-col gap-3 md:flex-row md:gap-6 w-full justify-end">
<CommonButton v-if="!isLoggedIn" @click="login"> Login with GitHub </CommonButton>
<CommonButton v-if="!isLoggedIn" @click="login">{{ $t("components.GithubLinks.signIn") }}</CommonButton>
<template v-else>
<CommonButton @click="logout"> Sign Out </CommonButton>
<CommonButton @click="state.isAddingLink = true"> Add Link </CommonButton>
<CommonButton @click="logout">{{ $t("components.GithubLinks.signOut") }}</CommonButton>
<CommonButton @click="state.isAddingLink = true">{{ $t("components.GithubLinks.addLink") }}</CommonButton>
</template>
</div>
</div>
Expand All @@ -93,14 +95,16 @@ onMounted(refresh);
class="w-full appearance-none bg-transparent rounded-lg focus:outline-none [&::-webkit-slider-runnable-track]:bg-grey-400 [&::-webkit-slider-runnable-track]:rounded-lg cursor-pointer"
/>
<div class="flex flex-row justify-between gap-8">
<span class="text-grey-100">Upvote Ratio: {{ ratio }}</span>
<div class="text-200 text-grey-100 text-right">{{ links.length }} Total Link(s)</div>
<span class="text-grey-100">{{ $t("components.GithubLinks.upvoteRatio") }}: {{ ratio }}</span>
<div class="text-200 text-grey-100 text-right">
{{ links.length }} {{ $t("components.GithubLinks.totalLinks") }}
</div>
</div>
</div>
<!-- Input Link Section -->
<div v-if="state.isAddingLink" class="flex flex-col gap-6 pt-6 w-full">
<!-- Link Input -->
<label for="link">Link</label>
<label for="link">{{ $t("components.GithubLinks.link") }}</label>
<input
id="link"
v-model="linkInput"
Expand All @@ -111,7 +115,9 @@ onMounted(refresh);
:placeholder="inputLinkText"
@input="verifyLinkInput()"
/>
<div v-if="!state.isLinkValid" class="text-neg-200 text-100">Link is not valid, must be https</div>
<div v-if="!state.isLinkValid" class="text-neg-200 text-100">
{{ $t("components.GithubLinks.invalidHttpsLink") }}
</div>
<!-- Context Input -->
<label for="link">Context</label>
<textarea
Expand All @@ -125,10 +131,14 @@ onMounted(refresh);
:placeholder="textInputLinkText"
@input="verifyContextInput()"
></textarea>
<div v-if="!state.isContextValid" class="text-neg-200 text-100">Context must be at least 32 characters</div>
<div v-if="!state.isContextValid" class="text-neg-200 text-100">
{{ $t("components.GithubLinks.invalidLinkContentLength") }}
</div>
<div class="flex flex-row w-full justify-end gap-6">
<CommonButton @click="state.isAddingLink = false">Cancel</CommonButton>
<CommonButton :disabled="!isInputValid" @click="isInputValid ? createPost() : () => {}">Post</CommonButton>
<CommonButton @click="state.isAddingLink = false">{{ $t("components.GithubLinks.cancel") }}</CommonButton>
<CommonButton :disabled="!isInputValid" @click="isInputValid ? createPost() : () => {}">{{
$t("components.GithubLinks.post")
}}</CommonButton>
</div>
</div>
<!-- Rendered Links -->
Expand All @@ -145,7 +155,7 @@ onMounted(refresh);
target="_blank"
class="flex items-center text-400 start-8 font-normal hover:opacity-50"
>
<Icon icon="link" class="text-400 mr-[6px]" />Link
<Icon icon="link" class="text-400 mr-[6px]" />{{ $t("components.GithubLinks.link") }}
</a>

<!-- eslint-disable vue/no-v-html -->
Expand Down
61 changes: 32 additions & 29 deletions src/components/proposals/ProposalWrapper.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -384,35 +384,38 @@ function showBreakdown(type: BreakdownType) {
<div>
<div class="flex flex-row justify-between items-center">
<div class="badges my-8 md:my-12">
<template v-if="inVoting">
<SimpleBadge :type="ContextTypes.INFO" icon="progress" class="mr-3"
>{{ $t("proposalpage.badges.votingPeriod") }}
</SimpleBadge>
<SimpleBadge v-if="turnout < quorum" :type="ContextTypes.PLAIN" icon="warning">
{{ $t("proposalpage.badges.quorumPending") }}</SimpleBadge
>
</template>
<template v-if="inDeposit">
<SimpleBadge :type="ContextTypes.INFO" icon="progress" class="mr-3">{{
$t("proposalpage.badges.depositPeriod")
<template v-if="inVoting">
<SimpleBadge :type="ContextTypes.INFO" icon="progress" class="mr-3"
>{{ $t("proposalpage.badges.votingPeriod") }}
</SimpleBadge>
<SimpleBadge v-if="turnout < quorum" :type="ContextTypes.PLAIN" icon="warning">
{{ $t("proposalpage.badges.quorumPending") }}</SimpleBadge
>
</template>
<template v-if="inDeposit">
<SimpleBadge :type="ContextTypes.INFO" icon="progress" class="mr-3">{{
$t("proposalpage.badges.depositPeriod")
}}</SimpleBadge>
<SimpleBadge :type="ContextTypes.PLAIN" icon="warning">{{
$t("proposalpage.badges.depositPending")
}}</SimpleBadge>
</template>
<SimpleBadge v-if="failed" :type="ContextTypes.FAIL" class="mr-3">{{
$t("proposalpage.badges.depositFailed")
}}</SimpleBadge>
<SimpleBadge :type="ContextTypes.PLAIN" icon="warning">{{
$t("proposalpage.badges.depositPending")
<SimpleBadge v-if="rejected" icon="close" :type="ContextTypes.FAIL" class="mr-3"
>{{ $t("proposalpage.badges.rejected") }}
</SimpleBadge>
<SimpleBadge v-if="passed" :type="ContextTypes.SUCCESS" class="mr-3">{{
$t("proposalpage.badges.passed")
}}</SimpleBadge>
</template>
<SimpleBadge v-if="failed" :type="ContextTypes.FAIL" class="mr-3">{{
$t("proposalpage.badges.depositFailed")
}}</SimpleBadge>
<SimpleBadge v-if="rejected" icon="close" :type="ContextTypes.FAIL" class="mr-3"
>{{ $t("proposalpage.badges.rejected") }}
</SimpleBadge>
<SimpleBadge v-if="passed" :type="ContextTypes.SUCCESS" class="mr-3">{{
$t("proposalpage.badges.passed")
}}</SimpleBadge>
</div>
<div class="flex items-center text-300 text-grey-100 start-7 hover:opacity-50 hover:cursor-pointer" @click="showJsonModal = true">
<Icon icon="Curlybrackets" />&nbsp; JSON
</div>
</div>
<div
class="flex items-center text-300 text-grey-100 start-7 hover:opacity-50 hover:cursor-pointer"
@click="showJsonModal = true"
>
<Icon icon="Curlybrackets" />&nbsp; JSON
</div>
</div>

<div class="flex mb-12 flex-col md:flex-row">
Expand Down Expand Up @@ -776,8 +779,8 @@ function showBreakdown(type: BreakdownType) {
</div>
</Transition>
</div>
<ModalBox title="JSON" v-model="showJsonModal" @close="showJsonModal = false">
<div class="p-4" v-if="proposal">
<ModalBox v-model="showJsonModal" title="JSON" @close="showJsonModal = false">
<div v-if="proposal" class="p-4">
<VCodeBlock :code="JSON.stringify(proposal, null, '\t')" prismjs />
</div>
</ModalBox>
Expand Down
15 changes: 9 additions & 6 deletions src/components/ui/icons/Curlybrackets.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,10 @@
<template>
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
<path fill-rule="evenodd" clip-rule="evenodd" d="M7.5 3C6.66886 3 5.97463 3.14224 5.41197 3.44311C4.83669 3.75073 4.44961 4.19732 4.20014 4.71186C3.7489 5.64254 3.74949 6.82294 3.74997 7.78253L3.75 7.875C3.75 8.96211 3.73429 9.79767 3.45014 10.3837C3.32461 10.6426 3.14918 10.8406 2.88072 10.9841C2.59963 11.1344 2.16886 11.25 1.5 11.25C1.08579 11.25 0.75 11.5858 0.75 12C0.75 12.4142 1.08579 12.75 1.5 12.75C2.16886 12.75 2.59963 12.8656 2.88072 13.0159C3.14918 13.1594 3.32461 13.3574 3.45014 13.6163C3.73429 14.2023 3.75 15.0379 3.75 16.125L3.74997 16.2175C3.74949 17.1771 3.7489 18.3575 4.20014 19.2881C4.44961 19.8027 4.83669 20.2493 5.41197 20.5569C5.97463 20.8578 6.66886 21 7.5 21C7.91421 21 8.25 20.6642 8.25 20.25C8.25 19.8358 7.91421 19.5 7.5 19.5C6.83114 19.5 6.40037 19.3844 6.11928 19.2341C5.85082 19.0906 5.67539 18.8926 5.54986 18.6337C5.26571 18.0477 5.25 17.2121 5.25 16.125L5.25003 16.0325C5.25051 15.0729 5.2511 13.8925 4.79986 12.9619C4.62402 12.5992 4.37983 12.2703 4.04955 12C4.37983 11.7297 4.62402 11.4008 4.79986 11.0381C5.2511 10.1075 5.25051 8.92706 5.25003 7.96747L5.25 7.875C5.25 6.78789 5.26571 5.95233 5.54986 5.36627C5.67539 5.10737 5.85082 4.90943 6.11928 4.76588C6.40037 4.61557 6.83114 4.5 7.5 4.5C7.91421 4.5 8.25 4.16421 8.25 3.75C8.25 3.33579 7.91421 3 7.5 3ZM16.5 3C16.0858 3 15.75 3.33579 15.75 3.75C15.75 4.16421 16.0858 4.5 16.5 4.5C17.1689 4.5 17.5996 4.61557 17.8807 4.76588C18.1492 4.90943 18.3246 5.10737 18.4501 5.36627C18.7343 5.95233 18.75 6.78789 18.75 7.875L18.75 7.96747C18.7495 8.92706 18.7489 10.1075 19.2001 11.0381C19.376 11.4008 19.6202 11.7297 19.9505 12C19.6202 12.2703 19.376 12.5992 19.2001 12.9619C18.7489 13.8925 18.7495 15.0729 18.75 16.0325L18.75 16.125C18.75 17.2121 18.7343 18.0477 18.4501 18.6337C18.3246 18.8926 18.1492 19.0906 17.8807 19.2341C17.5996 19.3844 17.1689 19.5 16.5 19.5C16.0858 19.5 15.75 19.8358 15.75 20.25C15.75 20.6642 16.0858 21 16.5 21C17.3311 21 18.0254 20.8578 18.588 20.5569C19.1633 20.2493 19.5504 19.8027 19.7999 19.2881C20.2511 18.3575 20.2505 17.1771 20.25 16.2175L20.25 16.125C20.25 15.0379 20.2657 14.2023 20.5499 13.6163C20.6754 13.3574 20.8508 13.1594 21.1193 13.0159C21.4004 12.8656 21.8311 12.75 22.5 12.75C22.9142 12.75 23.25 12.4142 23.25 12C23.25 11.5858 22.9142 11.25 22.5 11.25C21.8311 11.25 21.4004 11.1344 21.1193 10.9841C20.8508 10.8406 20.6754 10.6426 20.5499 10.3837C20.2657 9.79767 20.25 8.96211 20.25 7.875L20.25 7.78253C20.2505 6.82294 20.2511 5.64254 19.7999 4.71186C19.5504 4.19732 19.1633 3.75073 18.588 3.44311C18.0254 3.14224 17.3311 3 16.5 3Z" fill="currentColor"/>
</svg>


</template>
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M7.5 3C6.66886 3 5.97463 3.14224 5.41197 3.44311C4.83669 3.75073 4.44961 4.19732 4.20014 4.71186C3.7489 5.64254 3.74949 6.82294 3.74997 7.78253L3.75 7.875C3.75 8.96211 3.73429 9.79767 3.45014 10.3837C3.32461 10.6426 3.14918 10.8406 2.88072 10.9841C2.59963 11.1344 2.16886 11.25 1.5 11.25C1.08579 11.25 0.75 11.5858 0.75 12C0.75 12.4142 1.08579 12.75 1.5 12.75C2.16886 12.75 2.59963 12.8656 2.88072 13.0159C3.14918 13.1594 3.32461 13.3574 3.45014 13.6163C3.73429 14.2023 3.75 15.0379 3.75 16.125L3.74997 16.2175C3.74949 17.1771 3.7489 18.3575 4.20014 19.2881C4.44961 19.8027 4.83669 20.2493 5.41197 20.5569C5.97463 20.8578 6.66886 21 7.5 21C7.91421 21 8.25 20.6642 8.25 20.25C8.25 19.8358 7.91421 19.5 7.5 19.5C6.83114 19.5 6.40037 19.3844 6.11928 19.2341C5.85082 19.0906 5.67539 18.8926 5.54986 18.6337C5.26571 18.0477 5.25 17.2121 5.25 16.125L5.25003 16.0325C5.25051 15.0729 5.2511 13.8925 4.79986 12.9619C4.62402 12.5992 4.37983 12.2703 4.04955 12C4.37983 11.7297 4.62402 11.4008 4.79986 11.0381C5.2511 10.1075 5.25051 8.92706 5.25003 7.96747L5.25 7.875C5.25 6.78789 5.26571 5.95233 5.54986 5.36627C5.67539 5.10737 5.85082 4.90943 6.11928 4.76588C6.40037 4.61557 6.83114 4.5 7.5 4.5C7.91421 4.5 8.25 4.16421 8.25 3.75C8.25 3.33579 7.91421 3 7.5 3ZM16.5 3C16.0858 3 15.75 3.33579 15.75 3.75C15.75 4.16421 16.0858 4.5 16.5 4.5C17.1689 4.5 17.5996 4.61557 17.8807 4.76588C18.1492 4.90943 18.3246 5.10737 18.4501 5.36627C18.7343 5.95233 18.75 6.78789 18.75 7.875L18.75 7.96747C18.7495 8.92706 18.7489 10.1075 19.2001 11.0381C19.376 11.4008 19.6202 11.7297 19.9505 12C19.6202 12.2703 19.376 12.5992 19.2001 12.9619C18.7489 13.8925 18.7495 15.0729 18.75 16.0325L18.75 16.125C18.75 17.2121 18.7343 18.0477 18.4501 18.6337C18.3246 18.8926 18.1492 19.0906 17.8807 19.2341C17.5996 19.3844 17.1689 19.5 16.5 19.5C16.0858 19.5 15.75 19.8358 15.75 20.25C15.75 20.6642 16.0858 21 16.5 21C17.3311 21 18.0254 20.8578 18.588 20.5569C19.1633 20.2493 19.5504 19.8027 19.7999 19.2881C20.2511 18.3575 20.2505 17.1771 20.25 16.2175L20.25 16.125C20.25 15.0379 20.2657 14.2023 20.5499 13.6163C20.6754 13.3574 20.8508 13.1594 21.1193 13.0159C21.4004 12.8656 21.8311 12.75 22.5 12.75C22.9142 12.75 23.25 12.4142 23.25 12C23.25 11.5858 22.9142 11.25 22.5 11.25C21.8311 11.25 21.4004 11.1344 21.1193 10.9841C20.8508 10.8406 20.6754 10.6426 20.5499 10.3837C20.2657 9.79767 20.25 8.96211 20.25 7.875L20.25 7.78253C20.2505 6.82294 20.2511 5.64254 19.7999 4.71186C19.5504 4.19732 19.1633 3.75073 18.588 3.44311C18.0254 3.14224 17.3311 3 16.5 3Z"
fill="currentColor"
/>
</svg>
</template>
Loading
Loading