feat: start port Header component to svelte
This commit is contained in:
@@ -1,139 +1,17 @@
|
||||
---
|
||||
import CartButton from "./CartButton.svelte";
|
||||
import MenuIcon from "../svgs/MenuIcon.astro";
|
||||
import CloseIconMenu from "../svgs/CloseIconMenu.svelte";
|
||||
import Logo from "../svgs/Logo.astro";
|
||||
import UserIcon from "../svgs/UserIcon.astro";
|
||||
import Logout from "./Logout.astro";
|
||||
import UiLanguages from "./UiLanguages.svelte";
|
||||
import HeaderButtons from "./HeaderButtons.svelte";
|
||||
import SearchIcon from "../svgs/SearchIcon.svelte";
|
||||
<script lang="ts">
|
||||
import { t } from "../i18n/store";
|
||||
import CloseIconMenu from "../svgs/CloseIconMenu.svelte";
|
||||
import Logo from "../svgs/Logo.svelte";
|
||||
import MenuIcon from "../svgs/MenuIcon.svelte";
|
||||
import SearchIcon from "../svgs/SearchIcon.svelte";
|
||||
import UserIcon from "../svgs/UserIcon.svelte";
|
||||
import CartButton from "./CartButton.svelte";
|
||||
import HeaderButtons from "./HeaderButtons.svelte";
|
||||
import Logout from "./Logout.svelte";
|
||||
import UiLanguages from "./UiLanguages.svelte";
|
||||
|
||||
const { t } = Astro.locals;
|
||||
let auth: any = undefined;
|
||||
|
||||
let user;
|
||||
const accessToken = Astro.cookies.get("access-token");
|
||||
|
||||
if (accessToken) {
|
||||
// {"id":8,"token":"pat_XYZ","accountingId":"395711"}
|
||||
user = JSON.parse(accessToken.value);
|
||||
}
|
||||
---
|
||||
|
||||
<header class="sticky top-0 z-100 w-full px-2 py-3 md:px-6 md:py-8">
|
||||
<div class="mx-auto max-w-[1440px] px-2">
|
||||
<div
|
||||
class="border-gray-light flex flex-col rounded-xl border bg-white/50 backdrop-blur-xl transition-all duration-300"
|
||||
id="header-container"
|
||||
>
|
||||
<div
|
||||
class="flex items-center justify-between px-2 py-3 md:px-4 md:py-6"
|
||||
id="header-main"
|
||||
>
|
||||
<div class="flex items-center gap-2 md:gap-4">
|
||||
<a href="/" class="shrink-0"><Logo /></a>
|
||||
<div class="hidden sm:block">
|
||||
<HeaderButtons client:load />
|
||||
</div>
|
||||
</div>
|
||||
<nav>
|
||||
<ul class="flex items-center gap-1 md:gap-4">
|
||||
{
|
||||
accessToken && (
|
||||
<li class="flex items-center pr-2">
|
||||
<CartButton client:load />
|
||||
</li>
|
||||
)
|
||||
}
|
||||
<li class="flex items-center gap-1 pr-2 text-sm md:text-base">
|
||||
{
|
||||
accessToken ? (
|
||||
<div class="relative inline-block w-full">
|
||||
<button
|
||||
id="dropdown-btn"
|
||||
class="flex w-full cursor-pointer items-center gap-1"
|
||||
>
|
||||
<UserIcon />
|
||||
<span class="hidden sm:inline">
|
||||
{t("greeting")}, {user.person.firstName}
|
||||
</span>
|
||||
</button>
|
||||
|
||||
<div
|
||||
id="user-dropdown"
|
||||
class="absolute top-full left-0 mt-2 flex hidden w-full min-w-[120px] flex-col rounded-lg bg-white p-2 shadow-lg"
|
||||
>
|
||||
<a
|
||||
href="/me"
|
||||
class="border-grey text-secondary hover:bg-grey block w-full overflow-hidden border-b px-4 py-2 font-bold overflow-ellipsis"
|
||||
>
|
||||
{t("header.goToProfile")}
|
||||
</a>
|
||||
<Logout />
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<a href="/login" class="flex w-full items-center gap-1">
|
||||
<UserIcon />
|
||||
<span class="hidden sm:inline">{t("header.login")}</span>
|
||||
</a>
|
||||
)
|
||||
}
|
||||
</li>
|
||||
<li class="hidden items-center pr-2 md:flex">
|
||||
<UiLanguages client:load />
|
||||
</li>
|
||||
<li class="flex items-center md:hidden">
|
||||
<button id="mobile-menu-button" class="p-1">
|
||||
<div id="menu-icon">
|
||||
<MenuIcon />
|
||||
</div>
|
||||
<div id="close-icon" class="hidden">
|
||||
<CloseIconMenu client:load />
|
||||
</div>
|
||||
</button>
|
||||
</li>
|
||||
<li class="hidden items-center md:flex">
|
||||
<MenuIcon />
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
|
||||
<div
|
||||
id="mobile-menu"
|
||||
class="hidden -translate-y-5 transform overflow-hidden opacity-0 transition-all duration-300 ease-in-out md:hidden"
|
||||
>
|
||||
<div class="border-gray-light border-t">
|
||||
<div class="flex flex-col gap-4 p-4">
|
||||
<div class="flex gap-2">
|
||||
<a
|
||||
href="/search"
|
||||
class="font-karla text-secondary disabled:bg-grey bg-purple-tint flex w-auto items-center justify-center gap-2 rounded-2xl px-4 py-2 text-base leading-6 font-bold transition hover:cursor-pointer"
|
||||
>
|
||||
<SearchIcon width="16" height="16" />
|
||||
{t("header.search")}
|
||||
</a>
|
||||
|
||||
<a
|
||||
href="/create/project"
|
||||
class="font-karla bg-primary text-secondary hover:bg-primary-hover flex-1 rounded-lg px-3 py-2 text-center text-base leading-6 font-bold"
|
||||
>
|
||||
{t("header.createProject")}
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-col gap-2 pt-1">
|
||||
<UiLanguages client:load />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<script>
|
||||
function initMobileMenu() {
|
||||
const menuButton = document.getElementById("mobile-menu-button");
|
||||
const mobileMenu = document.getElementById("mobile-menu");
|
||||
@@ -179,13 +57,7 @@ if (accessToken) {
|
||||
});
|
||||
}
|
||||
|
||||
if (document.readyState === "loading") {
|
||||
document.addEventListener("DOMContentLoaded", initMobileMenu);
|
||||
} else {
|
||||
initMobileMenu();
|
||||
}
|
||||
|
||||
document.addEventListener("DOMContentLoaded", () => {
|
||||
function initUserDropdown() {
|
||||
const btn = document.getElementById("dropdown-btn");
|
||||
const dropdown = document.getElementById("user-dropdown");
|
||||
|
||||
@@ -199,5 +71,114 @@ if (accessToken) {
|
||||
document.addEventListener("click", () => {
|
||||
dropdown.classList.add("hidden");
|
||||
});
|
||||
});
|
||||
}
|
||||
</script>
|
||||
|
||||
<header class="sticky top-0 z-100 w-full px-2 py-3 md:px-6 md:py-8">
|
||||
<div class="mx-auto max-w-[1440px] px-2">
|
||||
<div
|
||||
class="border-gray-light flex flex-col rounded-xl border bg-white/50 backdrop-blur-xl transition-all duration-300"
|
||||
id="header-container"
|
||||
>
|
||||
<div
|
||||
class="flex items-center justify-between px-2 py-3 md:px-4 md:py-6"
|
||||
id="header-main"
|
||||
>
|
||||
<div class="flex items-center gap-2 md:gap-4">
|
||||
<a href="/" class="shrink-0"><Logo /></a>
|
||||
<div class="hidden sm:block">
|
||||
<HeaderButtons />
|
||||
</div>
|
||||
</div>
|
||||
<nav>
|
||||
<ul class="flex items-center gap-1 md:gap-4">
|
||||
{#if auth}
|
||||
<li class="flex items-center pr-2">
|
||||
<CartButton />
|
||||
</li>
|
||||
{/if}
|
||||
<li class="flex items-center gap-1 pr-2 text-sm md:text-base">
|
||||
{#if auth}
|
||||
<div class="relative inline-block w-full">
|
||||
<button
|
||||
id="dropdown-btn"
|
||||
class="flex w-full cursor-pointer items-center gap-1"
|
||||
>
|
||||
<UserIcon />
|
||||
<span class="hidden sm:inline">
|
||||
{$t("greeting")}, {auth?.user.person.firstName}
|
||||
</span>
|
||||
</button>
|
||||
|
||||
<div
|
||||
id="user-dropdown"
|
||||
class="absolute top-full left-0 mt-2 flex hidden w-full min-w-[120px] flex-col rounded-lg bg-white p-2 shadow-lg"
|
||||
>
|
||||
<a
|
||||
href="/me"
|
||||
class="border-grey text-secondary hover:bg-grey block w-full overflow-hidden border-b px-4 py-2 font-bold overflow-ellipsis"
|
||||
>
|
||||
{$t("header.goToProfile")}
|
||||
</a>
|
||||
<Logout />
|
||||
</div>
|
||||
</div>
|
||||
{:else}
|
||||
<a href="/login" class="flex w-full items-center gap-1">
|
||||
<UserIcon />
|
||||
<span class="hidden sm:inline">{$t("header.login")}</span>
|
||||
</a>
|
||||
{/if}
|
||||
</li>
|
||||
<li class="hidden items-center pr-2 md:flex">
|
||||
<UiLanguages />
|
||||
</li>
|
||||
<li class="flex items-center md:hidden">
|
||||
<button id="mobile-menu-button" class="p-1">
|
||||
<div id="menu-icon">
|
||||
<MenuIcon />
|
||||
</div>
|
||||
<div id="close-icon" class="hidden">
|
||||
<CloseIconMenu />
|
||||
</div>
|
||||
</button>
|
||||
</li>
|
||||
<li class="hidden items-center md:flex">
|
||||
<MenuIcon />
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
|
||||
<div
|
||||
id="mobile-menu"
|
||||
class="hidden -translate-y-5 transform overflow-hidden opacity-0 transition-all duration-300 ease-in-out md:hidden"
|
||||
>
|
||||
<div class="border-gray-light border-t">
|
||||
<div class="flex flex-col gap-4 p-4">
|
||||
<div class="flex gap-2">
|
||||
<a
|
||||
href="/search"
|
||||
class="font-karla text-secondary disabled:bg-grey bg-purple-tint flex w-auto items-center justify-center gap-2 rounded-2xl px-4 py-2 text-base leading-6 font-bold transition hover:cursor-pointer"
|
||||
>
|
||||
<SearchIcon width="16" height="16" />
|
||||
{$t("header.search")}
|
||||
</a>
|
||||
|
||||
<a
|
||||
href="/create/project"
|
||||
class="font-karla bg-primary text-secondary hover:bg-primary-hover flex-1 rounded-lg px-3 py-2 text-center text-base leading-6 font-bold"
|
||||
>
|
||||
{$t("header.createProject")}
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-col gap-2 pt-1">
|
||||
<UiLanguages />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
@@ -1,76 +0,0 @@
|
||||
---
|
||||
import TextInput from "./library/TextInput.svelte";
|
||||
|
||||
const { t } = Astro.locals;
|
||||
---
|
||||
|
||||
<div>
|
||||
<div class="mt-8 w-full max-w-md">
|
||||
<form id="login" method="POST" class="flex flex-col gap-6">
|
||||
<TextInput
|
||||
name="identifier"
|
||||
placeholder={t("login.form.email")}
|
||||
required={true}
|
||||
labelText={t("login.form.email")}
|
||||
/>
|
||||
<TextInput
|
||||
type="password"
|
||||
name="password"
|
||||
placeholder={t("login.form.password")}
|
||||
required={true}
|
||||
labelText={t("login.form.password")}
|
||||
/>
|
||||
</form>
|
||||
|
||||
<div id="login-error-content" class="mt-4 text-center text-red-500"></div>
|
||||
<!-- <a href="#" class="text-secondary font-bold underline">
|
||||
{t("login.page.forgotPassword")}
|
||||
</a> -->
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
import { actions, isInputError } from "astro:actions";
|
||||
|
||||
const form = document.getElementById("login");
|
||||
const errorContent = document.getElementById("login-error-content");
|
||||
|
||||
if (form instanceof HTMLFormElement) {
|
||||
form.addEventListener("submit", async (event) => {
|
||||
event.preventDefault();
|
||||
|
||||
const formData = new FormData(form);
|
||||
|
||||
const { error } = await actions.login(formData);
|
||||
console.log("error", error);
|
||||
|
||||
if (error && errorContent instanceof HTMLElement) {
|
||||
errorContent.innerHTML = "";
|
||||
|
||||
if (isInputError(error)) {
|
||||
const ul = document.createElement("ul");
|
||||
error.issues.forEach((err) => {
|
||||
const li = document.createElement("li");
|
||||
li.innerText = err.message;
|
||||
ul.appendChild(li);
|
||||
});
|
||||
|
||||
errorContent.appendChild(ul);
|
||||
return;
|
||||
}
|
||||
errorContent.innerText = error.message;
|
||||
}
|
||||
|
||||
if (!error) {
|
||||
const urlParams = new URLSearchParams(window.location.search);
|
||||
const isFromCheckout = urlParams.get("checkout") === "true";
|
||||
|
||||
if (isFromCheckout) {
|
||||
window.location.href = `/payment`;
|
||||
} else {
|
||||
window.location.href = `/`;
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
</script>
|
||||
@@ -1,16 +1,6 @@
|
||||
---
|
||||
const { t } = Astro.locals;
|
||||
---
|
||||
|
||||
<button
|
||||
id="btn-logout"
|
||||
class="text-secondary hover:bg-grey block w-full cursor-pointer overflow-hidden px-4 py-2 font-bold overflow-ellipsis"
|
||||
>
|
||||
{t("logout.label")}
|
||||
</button>
|
||||
|
||||
<script>
|
||||
import { actions } from "astro:actions";
|
||||
import { t } from "../i18n/store";
|
||||
|
||||
const button = document.querySelector("#btn-logout");
|
||||
button?.addEventListener("click", async () => {
|
||||
@@ -21,3 +11,10 @@ const { t } = Astro.locals;
|
||||
window.location.href = `/`;
|
||||
});
|
||||
</script>
|
||||
|
||||
<button
|
||||
id="btn-logout"
|
||||
class="text-secondary hover:bg-grey block w-full cursor-pointer overflow-hidden px-4 py-2 font-bold overflow-ellipsis"
|
||||
>
|
||||
{$t("logout.label")}
|
||||
</button>
|
||||
@@ -2,7 +2,7 @@
|
||||
import "../styles/global.css";
|
||||
import Metatags from "../components/Metatags.astro";
|
||||
// import ThemeToggle from "../components/ThemeToggle.astro";
|
||||
import Header from "../components/Header.astro";
|
||||
import Header from "../components/Header.svelte";
|
||||
import Footer from "../components/Footer.astro";
|
||||
|
||||
const { lang } = Astro.locals;
|
||||
@@ -25,7 +25,7 @@ const { title, description, class: className } = Astro.props;
|
||||
<Metatags {title} {description} />
|
||||
</head>
|
||||
<body class="grid min-h-screen overflow-x-hidden">
|
||||
<Header />
|
||||
<Header client:load />
|
||||
<main
|
||||
class={`w-full max-w-screen flex-1 flex flex-col ${className ? ` ${className}` : ""}`}
|
||||
>
|
||||
|
||||
@@ -40,7 +40,9 @@ if (accessToken.error) {
|
||||
console.error(accessToken);
|
||||
return Astro.redirect("/error");
|
||||
}
|
||||
|
||||
Astro.cookies.set("access-token", accessToken, { path: "/" });
|
||||
---
|
||||
|
||||
<LocalStorage set={{ oauth2: accessToken }} client:load />
|
||||
<LocalStorage set={{ "access-token": accessToken }} client:load />
|
||||
<Redirect location="/success" client:load />
|
||||
|
||||
@@ -1,6 +1,11 @@
|
||||
---
|
||||
import CSRF from "csrf";
|
||||
|
||||
const accessToken = Astro.cookies.get("access-token");
|
||||
if (accessToken) {
|
||||
Astro.redirect("/");
|
||||
}
|
||||
|
||||
const oauth2Authorize = new URL("/oauth/authorize", import.meta.env.PUBLIC_API_URL);
|
||||
|
||||
oauth2Authorize.searchParams.set("client_id", import.meta.env.OAUTH2_CLIENT_ID);
|
||||
|
||||
@@ -1,17 +1,22 @@
|
||||
<svg width="97" height="24" viewBox="0 0 97 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path
|
||||
d="M19.8701 7.67198C18.4595 7.81705 16.9816 7.8935 15.5572 8.02467C15.2749 7.55819 14.9676 7.16902 14.7414 6.85108C14.2951 6.22563 13.4008 5.40125 12.5271 5.092C8.78915 3.77074 4.94931 6.30468 4.48573 10.4865C4.06359 14.2835 5.60971 18.2143 8.79778 19.0474C12.5617 20.0325 15.1817 17.6193 15.8015 14.7239C14.3961 14.7239 12.4926 14.7821 10.8955 14.7066C10.8955 13.4948 10.8955 12.2847 10.8955 11.0703C14.0422 11.0703 17.1897 11.0703 20.3354 11.0703C20.3225 15.7464 19.3927 18.5922 17.1888 20.6874C13.4327 24.2595 6.56622 23.8659 3.08636 20.452C0.864293 18.2716 -0.271774 14.8291 0.0554068 10.4813C0.435247 5.45164 3.72777 1.36449 9.37963 0.864131C15.2154 0.351608 18.6486 3.23302 19.8701 7.67198Z"
|
||||
fill="#3D3D3D"></path>
|
||||
fill="#3D3D3D"
|
||||
></path>
|
||||
<path
|
||||
d="M31.7556 0.987442C38.1507 0.661686 42.7028 5.38297 42.7131 11.8946C42.7269 18.9031 37.7795 23.1527 32.1061 23.1527C26.4801 23.1536 22.484 19.096 21.9661 13.771C21.2591 6.45492 25.2232 1.31841 31.7556 0.987442ZM26.8626 15.4119C27.6542 17.4933 29.6052 19.122 32.1069 19.1655C40.3823 19.3123 40.2744 3.84888 31.5242 4.97469C27.4608 5.49677 25.0134 10.5577 26.8626 15.4119Z"
|
||||
fill="#3D3D3D"></path>
|
||||
fill="#3D3D3D"
|
||||
></path>
|
||||
<path
|
||||
d="M85.4884 0.98751C91.4234 0.661755 95.8977 4.71502 96.4433 10.3701C97.1287 17.4464 92.7735 23.1528 85.9554 23.1528C79.6388 23.1537 75.7127 18.3099 75.6988 12.2456C75.685 6.0137 79.3047 1.32456 85.4884 0.98751ZM83.0418 5.67839C78.7376 8.41995 79.0224 19.2107 86.0719 19.1655C91.3413 19.1308 93.7637 11.9068 90.9676 7.55474C89.9161 5.92075 87.8537 4.59341 85.2561 4.97476C84.0847 5.14589 83.6686 5.27706 83.0418 5.67839Z"
|
||||
fill="#3D3D3D"></path>
|
||||
fill="#3D3D3D"
|
||||
></path>
|
||||
<path
|
||||
d="M58.2159 1.22114C58.2159 2.55109 58.2159 3.88018 58.2159 5.20926C56.39 5.20926 54.5642 5.20926 52.7375 5.20926C52.7375 11.0346 52.7375 16.8591 52.7375 22.6845C51.2985 22.6845 49.8628 22.6845 48.4246 22.6845C48.4246 16.8974 48.4246 11.0216 48.4246 5.23619C46.6799 5.23619 44.8576 5.20926 43.0637 5.20926C43.0637 3.77072 43.0378 2.58932 43.0378 1.22114C48.0482 1.22114 53.2028 1.22114 58.2159 1.22114Z"
|
||||
fill="#3D3D3D"></path>
|
||||
fill="#3D3D3D"
|
||||
></path>
|
||||
<path
|
||||
d="M74.0658 1.22117C74.0658 2.51204 74.1193 3.9054 74.1193 5.19539C71.0944 5.19539 68.2094 5.20929 65.0921 5.20929C65.0921 6.73383 65.0921 8.39475 65.0921 9.91755C67.7648 9.91755 70.5152 9.90104 73.484 9.90104C73.484 11.1893 73.484 12.4802 73.484 13.7701C70.6878 13.7701 67.8908 13.7701 65.0921 13.7701C65.0921 15.5787 65.0532 17.3891 65.0532 18.8372C67.9633 18.8372 70.314 18.8128 73.9493 18.8128C73.9493 20.1028 73.9493 21.3937 73.9493 22.6837C69.5215 22.6837 65.0921 22.6837 60.6644 22.6837C60.7403 15.5692 60.5072 8.14109 60.7792 1.22031C65.2078 1.22117 69.6355 1.22117 74.0658 1.22117Z"
|
||||
fill="#3D3D3D"></path>
|
||||
fill="#3D3D3D"
|
||||
></path>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 2.8 KiB After Width: | Height: | Size: 2.8 KiB |
@@ -4,5 +4,6 @@
|
||||
fill-rule="evenodd"
|
||||
clip-rule="evenodd"
|
||||
d="M11 12C11 11.4477 11.3663 11 11.8182 11H28.1818C28.6337 11 29 11.4477 29 12C29 12.5523 28.6337 13 28.1818 13H11.8182C11.3663 13 11 12.5523 11 12ZM11 20C11 19.4477 11.3663 19 11.8182 19H28.1818C28.6337 19 29 19.4477 29 20C29 20.5523 28.6337 21 28.1818 21H11.8182C11.3663 21 11 20.5523 11 20ZM11 28C11 27.4477 11.3663 27 11.8182 27H28.1818C28.6337 27 29 27.4477 29 28C29 28.5523 28.6337 29 28.1818 29H11.8182C11.3663 29 11 28.5523 11 28Z"
|
||||
fill="#462949"></path>
|
||||
fill="#462949"
|
||||
></path>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 711 B After Width: | Height: | Size: 716 B |
@@ -1,8 +0,0 @@
|
||||
<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path
|
||||
d="M16 31C24.2843 31 31 24.2843 31 16C31 7.71573 24.2843 1 16 1C7.71573 1 1 7.71573 1 16C1 24.2843 7.71573 31 16 31ZM16 31C11.499 31.0002 7.5 28.8 5.09535 26.3C5.09535 23.8 9.75 19.75 16 19.75C22.25 19.75 26.4096 24.3 26.4096 26.8C24 29.3 20.501 30.9998 16 31ZM21 12.25C21 15.0114 18.7614 17.25 16 17.25C13.2386 17.25 11 15.0114 11 12.25C11 9.48858 13.2386 7.25 16 7.25C18.7614 7.25 21 9.48858 21 12.25Z"
|
||||
stroke="#462949"
|
||||
stroke-width="2"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"></path>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 647 B |
@@ -1,18 +1,9 @@
|
||||
<svg width="32" height="32" viewBox="0 0 33 32" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
clip-rule="evenodd"
|
||||
d="M25.332 24.7792C25.332 20.4834 21.3026 17.001 16.332 17.001C11.3615 17.001 7.33203 20.4834 7.33203 24.7792C7.33203 26.8746 11.6152 27.948 16.0028 27.9991H16.6612C21.0489 27.948 25.332 26.8746 25.332 24.7792Z"
|
||||
d="M16 31C24.2843 31 31 24.2843 31 16C31 7.71573 24.2843 1 16 1C7.71573 1 1 7.71573 1 16C1 24.2843 7.71573 31 16 31ZM16 31C11.499 31.0002 7.5 28.8 5.09535 26.3C5.09535 23.8 9.75 19.75 16 19.75C22.25 19.75 26.4096 24.3 26.4096 26.8C24 29.3 20.501 30.9998 16 31ZM21 12.25C21 15.0114 18.7614 17.25 16 17.25C13.2386 17.25 11 15.0114 11 12.25C11 9.48858 13.2386 7.25 16 7.25C18.7614 7.25 21 9.48858 21 12.25Z"
|
||||
stroke="#462949"
|
||||
stroke-width="2"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
/>
|
||||
<path
|
||||
d="M21.332 9.00098C21.332 11.7624 19.0935 14.001 16.332 14.001C13.5706 14.001 11.332 11.7624 11.332 9.00098C11.332 6.23955 13.5706 4.00098 16.332 4.00098C19.0935 4.00098 21.332 6.23955 21.332 9.00098Z"
|
||||
stroke="#462949"
|
||||
stroke-width="2"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
/>
|
||||
></path>
|
||||
</svg>
|
||||
|
||||
|
Before Width: | Height: | Size: 849 B After Width: | Height: | Size: 652 B |
Reference in New Issue
Block a user