From 52ac15d619a254da580e997d4f5b3cd6f3afec32 Mon Sep 17 00:00:00 2001
From: ZTL-UwU <zhangtianli2006@163.com>
Date: Fri, 24 May 2024 23:17:00 +0800
Subject: [PATCH] feat: header & footer

Signed-off-by: ZTL-UwU <zhangtianli2006@163.com>
---
 app.config.ts                       |  45 +++++++++++++++
 components/DarkModeToggle.vue       |   4 +-
 components/layout/Aside.vue         |  13 +++--
 components/layout/AsideTree.vue     |   2 +-
 components/layout/AsideTreeItem.vue |  84 ++++++++++++++--------------
 components/layout/Footer.vue        |  24 +++++++-
 components/layout/Header.vue        |  21 ++++++-
 components/layout/HeaderLogo.vue    |  13 +++++
 components/layout/MobileNav.vue     |   3 +-
 components/layout/Toc.vue           |   3 +-
 composables/useConfig.ts            |  40 +++++++++++++
 pages/[...slug].vue                 |   9 +--
 public/favicon.ico                  | Bin 4286 -> 1376 bytes
 public/logo-dark.svg                |  17 ++++++
 public/logo.svg                     |  17 ++++++
 15 files changed, 235 insertions(+), 60 deletions(-)
 create mode 100644 app.config.ts
 create mode 100644 components/layout/HeaderLogo.vue
 create mode 100644 composables/useConfig.ts
 create mode 100644 public/logo-dark.svg
 create mode 100644 public/logo.svg

diff --git a/app.config.ts b/app.config.ts
new file mode 100644
index 00000000..7401fde9
--- /dev/null
+++ b/app.config.ts
@@ -0,0 +1,45 @@
+export default defineAppConfig({
+  shadcnDocs: {
+    header: {
+      title: 'shadcn-docs',
+      showTitle: true,
+      logo: {
+        light: '/logo.svg',
+        dark: '/logo-dark.svg',
+      },
+      darkModeToggle: true,
+      links: [{
+        icon: 'lucide:github',
+        to: 'https://github.com/ZTL-UwU/shadcn-docs-nuxt',
+        target: '_blank',
+      }],
+    },
+    aside: {
+      useLevel: true,
+      collapse: false,
+    },
+    main: {
+      breadCrumb: true,
+      showTitle: true,
+    },
+    footer: {
+      credits: 'Copyright © 2024',
+      links: [
+        {
+          title: 'shadcn-vue',
+          to: 'https://www.shadcn-vue.com/',
+          target: '_blank',
+        },
+        {
+          icon: 'lucide:github',
+          to: 'https://github.com/ZTL-UwU/shadcn-docs-nuxt',
+          target: '_blank',
+        },
+      ],
+    },
+    toc: {
+      enable: true,
+      title: 'On This Page',
+    },
+  },
+});
diff --git a/components/DarkModeToggle.vue b/components/DarkModeToggle.vue
index 2d884162..5fdc8091 100644
--- a/components/DarkModeToggle.vue
+++ b/components/DarkModeToggle.vue
@@ -1,7 +1,7 @@
 <template>
   <UiButton variant="ghost" size="icon" @click="switchMode">
-    <Icon name="lucide:moon" class="h-4 w-4 rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
-    <Icon name="lucide:sun" class="absolute h-4 w-4 rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
+    <Icon name="lucide:sun" class="rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" size="18" />
+    <Icon name="lucide:moon" class="absolute rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" size="18" />
     <span class="sr-only">Toggle theme</span>
   </UiButton>
 </template>
diff --git a/components/layout/Aside.vue b/components/layout/Aside.vue
index ec89ae6b..03f56d71 100644
--- a/components/layout/Aside.vue
+++ b/components/layout/Aside.vue
@@ -1,6 +1,6 @@
 <template>
   <UiScrollArea orientation="vertical" class="relative overflow-hidden h-full py-6 pr-6 text-sm" type="auto">
-    <ul class="pb-3 border-b">
+    <ul v-if="useLevel" class="pb-4 border-b mb-1">
       <li v-for="link in navigation" :key="link.id">
         <NuxtLink
           :to="link._path"
@@ -25,14 +25,19 @@
 <script setup lang="ts">
 const { navDirFromPath } = useContentHelpers();
 const { navigation } = useContent();
+const { useLevel } = useConfig().value.aside;
 
 const tree = computed(() => {
   const route = useRoute();
   const path = route.path.split('/');
-  const leveledPath = path.splice(0, 2).join('/');
+  if (useLevel) {
+    const leveledPath = path.splice(0, 2).join('/');
 
-  const dir = navDirFromPath(leveledPath, navigation.value);
-  return dir ?? [];
+    const dir = navDirFromPath(leveledPath, navigation.value);
+    return dir ?? [];
+  }
+
+  return navigation.value;
 });
 
 const path = useRoute().path;
diff --git a/components/layout/AsideTree.vue b/components/layout/AsideTree.vue
index 210b1e1d..644d27cf 100644
--- a/components/layout/AsideTree.vue
+++ b/components/layout/AsideTree.vue
@@ -1,5 +1,5 @@
 <template>
-  <ul :class="[level > 0 ? 'border-l' : 'py-2', level <= 1 && 'mt-2']">
+  <ul :class="[level > 0 ? 'border-l' : '[&:not(:first-child)]:py-2']">
     <template v-for="link in links" :key="link._id">
       <LayoutAsideTreeItem
         :link="link"
diff --git a/components/layout/AsideTreeItem.vue b/components/layout/AsideTreeItem.vue
index 87c6119f..f4b038a3 100644
--- a/components/layout/AsideTreeItem.vue
+++ b/components/layout/AsideTreeItem.vue
@@ -1,46 +1,44 @@
 <template>
-  <li class="border-l-red">
-    <div
-      class="rounded-md transition-all underline-offset-4"
-      :class="[level > 0 && 'pl-4']"
+  <li
+    class="rounded-md transition-all underline-offset-4"
+    :class="[level > 0 && 'pl-4']"
+  >
+    <UiCollapsible v-if="link.children" v-model:open="isOpen">
+      <UiCollapsibleTrigger class="w-full text-left py-1.5">
+        <div class="w-full flex gap-1">
+          <Icon
+            v-if="link.icon"
+            :name="link.icon"
+            class="self-center"
+          />
+          {{ link.title }}
+          <Icon
+            :name="isOpen ? 'lucide:chevrons-down-up' : 'lucide:chevrons-up-down'"
+            size="12"
+            class="ml-auto self-center"
+          />
+        </div>
+      </UiCollapsibleTrigger>
+      <UiCollapsibleContent>
+        <LayoutAsideTree :links="link.children" :level="level + 1" />
+      </UiCollapsibleContent>
+    </UiCollapsible>
+    <NuxtLink
+      v-else
+      :to="link._path"
+      class="w-full flex hover:underline text-muted-foreground gap-1"
+      :class="[
+        isActive && 'font-semibold text-primary',
+        level > 0 ? 'py-1.5' : 'pt-2',
+      ]"
     >
-      <UiCollapsible v-if="link.children" v-model:open="isOpen">
-        <UiCollapsibleTrigger class="w-full text-left" :class="[level > 0 ? 'py-1.5' : 'pt-2']">
-          <div class="w-full flex gap-1">
-            <Icon
-              v-if="link.icon"
-              :name="link.icon"
-              class="self-center"
-            />
-            {{ link.title }}
-            <Icon
-              :name="isOpen ? 'lucide:chevrons-down-up' : 'lucide:chevrons-up-down'"
-              size="12"
-              class="ml-auto self-center"
-            />
-          </div>
-        </UiCollapsibleTrigger>
-        <UiCollapsibleContent>
-          <LayoutAsideTree :links="link.children" :level="level + 1" />
-        </UiCollapsibleContent>
-      </UiCollapsible>
-      <NuxtLink
-        v-else
-        :to="link._path"
-        class="w-full flex hover:underline text-muted-foreground gap-1"
-        :class="[
-          isActive && 'font-semibold text-primary',
-          level > 0 ? 'py-1.5' : 'pt-2',
-        ]"
-      >
-        <Icon
-          v-if="link.icon"
-          :name="link.icon"
-          class="self-center"
-        />
-        {{ link.title }}
-      </NuxtLink>
-    </div>
+      <Icon
+        v-if="link.icon"
+        :name="link.icon"
+        class="self-center"
+      />
+      {{ link.title }}
+    </NuxtLink>
   </li>
 </template>
 
@@ -52,8 +50,10 @@ const props = defineProps<{
   level: number;
 }>();
 
+const { collapse } = useConfig().value.aside;
+
 const collapsed = useCollapsedMap();
-const isOpen = ref(props.level < 1 || collapsed.value.get(props.link._path) || true);
+const isOpen = ref(collapsed.value.get(props.link._path) || (props.level < 1 && !collapse));
 watch(isOpen, (v) => {
   collapsed.value.set(props.link._path, v);
 });
diff --git a/components/layout/Footer.vue b/components/layout/Footer.vue
index df7d9226..b64ec433 100644
--- a/components/layout/Footer.vue
+++ b/components/layout/Footer.vue
@@ -1,7 +1,25 @@
 <template>
-  <footer class="py-6 md:px-8 md:py-0">
-    <div class="container flex flex-col items-center justify-between gap-4 md:h-24 md:flex-row">
-      Footer
+  <footer class="text-muted-foreground py-6 md:px-8 md:py-0">
+    <div class="container flex flex-col items-center justify-between gap-2 md:h-24 md:flex-row">
+      <span class="text-sm">
+        {{ footer.credits }}
+      </span>
+      <span class="flex-1" />
+      <NuxtLink
+        v-for="(link, i) in footer.links"
+        :key="i"
+        :to="link?.to"
+        :target="link?.target"
+      >
+        <UiButton variant="ghost" :size="link?.icon && !link?.title ? 'icon' : 'default'" class="flex gap-2">
+          <Icon v-if="link?.icon" :name="link.icon" size="20" />
+          <span v-if="link?.title">{{ link.title }}</span>
+        </UiButton>
+      </NuxtLink>
     </div>
   </footer>
 </template>
+
+<script setup lang="ts">
+const { footer } = useConfig().value;
+</script>
diff --git a/components/layout/Header.vue b/components/layout/Header.vue
index d4a5213f..34671d03 100644
--- a/components/layout/Header.vue
+++ b/components/layout/Header.vue
@@ -1,12 +1,29 @@
 <template>
   <header class="sticky z-40 top-0 bg-background/80 backdrop-blur-lg lg:border-b">
     <div class="container px-4 md:px-8 flex h-14 max-w-screen-2xl items-center border-b lg:border-none">
+      <LayoutHeaderLogo class="hidden md:flex" />
       <LayoutMobileNav />
+
       <span class="flex-1" />
-      <DarkModeToggle />
+
+      <DarkModeToggle v-if="config.header.darkModeToggle" />
+      <NuxtLink
+        v-for="(link, i) in config.header.links"
+        :key="i"
+        :to="link?.to"
+        :target="link?.target"
+      >
+        <UiButton variant="ghost" size="icon" class="flex gap-2">
+          <Icon v-if="link?.icon" :name="link.icon" size="18" />
+        </UiButton>
+      </NuxtLink>
     </div>
-    <div class="lg:hidden">
+    <div v-if="config.toc.enable" class="lg:hidden">
       <LayoutToc is-small />
     </div>
   </header>
 </template>
+
+<script setup lang="ts">
+const config = useConfig();
+</script>
diff --git a/components/layout/HeaderLogo.vue b/components/layout/HeaderLogo.vue
new file mode 100644
index 00000000..2ab4ab72
--- /dev/null
+++ b/components/layout/HeaderLogo.vue
@@ -0,0 +1,13 @@
+<template>
+  <NuxtLink v-if="logo.light && logo.dark" to="/" class="flex">
+    <img :src="logo.light" class="dark:hidden h-7">
+    <img :src="logo.dark" class="hidden dark:block h-7">
+    <span v-if="showTitle && title" class="self-center font-bold ml-3">
+      {{ title }}
+    </span>
+  </NuxtLink>
+</template>
+
+<script setup lang="ts">
+const { logo, title, showTitle } = useConfig().value.header;
+</script>
diff --git a/components/layout/MobileNav.vue b/components/layout/MobileNav.vue
index c70b8f79..712233aa 100644
--- a/components/layout/MobileNav.vue
+++ b/components/layout/MobileNav.vue
@@ -6,10 +6,11 @@
         size="icon"
         class="md:hidden"
       >
-        <Icon name="lucide:menu" />
+        <Icon name="lucide:menu" size="18" />
       </UiButton>
     </UiSheetTrigger>
     <UiSheetContent side="left" class="pr-0">
+      <LayoutHeaderLogo />
       <LayoutAside />
     </UiSheetContent>
   </UiSheet>
diff --git a/components/layout/Toc.vue b/components/layout/Toc.vue
index 3391a713..16f98525 100644
--- a/components/layout/Toc.vue
+++ b/components/layout/Toc.vue
@@ -7,7 +7,7 @@
       type="hover"
     >
       <p class="mb-2 text-base font-semibold">
-        On This Page
+        {{ title }}
       </p>
       <LayoutTocTree :links="toc.links" :level="0" />
     </UiScrollArea>
@@ -35,5 +35,6 @@
 defineProps<{ isSmall: boolean }>();
 
 const { toc } = useContent();
+const { title } = useConfig().value.toc;
 const isOpen = ref(false);
 </script>
diff --git a/composables/useConfig.ts b/composables/useConfig.ts
new file mode 100644
index 00000000..6e10ecfd
--- /dev/null
+++ b/composables/useConfig.ts
@@ -0,0 +1,40 @@
+export function useConfig() {
+  const appConfig = computed(() => useAppConfig()?.shadcnDocs || {});
+
+  const { navKeyFromPath } = useContentHelpers();
+  const { navigation, page } = useContent();
+  const route = useRoute();
+
+  return computed(
+    () => {
+      const header = appConfig?.value?.header || {};
+      const main = appConfig?.value?.main || {};
+      const aside = appConfig?.value?.aside || {};
+      const footer = appConfig?.value?.footer || {};
+
+      return {
+        ...appConfig.value,
+        header: {
+          ...header,
+          ...navKeyFromPath(route.path, 'header', navigation.value || []),
+          ...page.value?.header,
+        } as typeof header,
+        main: {
+          ...main,
+          ...navKeyFromPath(route.path, 'main', navigation.value || []),
+          ...page.value?.main,
+        } as typeof main,
+        aside: {
+          ...aside,
+          ...navKeyFromPath(route.path, 'aside', navigation.value || []),
+          ...page.value?.aside,
+        } as typeof aside,
+        footer: {
+          ...footer,
+          ...navKeyFromPath(route.path, 'footer', navigation.value || []),
+          ...page.value?.footer,
+        } as typeof footer,
+      };
+    },
+  );
+}
diff --git a/pages/[...slug].vue b/pages/[...slug].vue
index 3b69d870..1e46f8a1 100644
--- a/pages/[...slug].vue
+++ b/pages/[...slug].vue
@@ -5,11 +5,11 @@
       <aside class="fixed top-[102px] lg:top-[60px] z-30 -ml-2 hidden h-[calc(100vh-3.5rem)] w-full shrink-0 md:sticky md:block overflow-y-auto">
         <LayoutAside />
       </aside>
-      <main class="relative py-6 lg:gap-10 lg:py-8 lg:grid lg:grid-cols-[1fr_200px]">
+      <main class="relative py-6" :class="[config.toc.enable && 'lg:gap-10 lg:py-8 lg:grid lg:grid-cols-[1fr_200px]']">
         <div class="mx-auto w-full min-w-0">
-          <LayoutBreadcrumb class="mb-4" />
+          <LayoutBreadcrumb v-if="config.main.breadCrumb" class="mb-4" />
 
-          <div class="space-y-2 mb-6">
+          <div v-if="config.main.showTitle" class="space-y-2 mb-6">
             <ProseH1>
               {{ page?.title }}
             </ProseH1>
@@ -35,7 +35,7 @@
 
           <LayoutPrevNext />
         </div>
-        <div class="hidden text-sm lg:block">
+        <div v-if="config.toc.enable" class="hidden text-sm lg:block">
           <div class="sticky top-[90px] h-[calc(100vh-3.5rem)] overflow-hidden">
             <LayoutToc :is-small="false" />
           </div>
@@ -48,4 +48,5 @@
 
 <script setup lang="ts">
 const { page } = useContent();
+const config = useConfig();
 </script>
diff --git a/public/favicon.ico b/public/favicon.ico
index 18993ad91cfd43e03b074dd0b5cc3f37ab38e49c..30af0cba728e0f5dae6f0ca44904fe813a30f243 100644
GIT binary patch
literal 1376
zcmb7^Yf#cz6u_aCjU*LKEK6G-ZKPnYO)1k=5fL#h3>D2SsjXZTGb~%nS3bcPOCz>s
zwg#*HWl_+wLM^AiWsQ?rt<aVdYG#v!Wsat3xVPEanf<yS&hOlF?r+YAGk30FPk69}
z`D$|n0$~wCqeOsQ`6bX_1NtD3kASo+g%*>FK%fL)0?AFNF@h#CH6oadXnN%E78GVj
z1Hu9jh-M*XfsF#?bO<GY`7_d>_2msvR~1eAHDb1t{KK*5CnP7_)b)p|p6)oy^cGjF
zppp0y^^(w2qTNn!%tY-sTR!3VTiis0C_ZZD)m(2!<vnC@|ByX4E-T^k=1tlTUh3Fb
zFsawLwc`Dq-kNHw<d-Uy8cn>EN?KIS!JCsO)Lu^#YDq2|jw}wg$H=aPhNS9J)(e}X
za^pg;>R9U)D$NS~?%OwvS-8hSU**-Q$<B6+S66IXIwAhoXUX5I(vRtgnw4J3QQjlF
zzS+~hZSu2GFHJ4bo_`^|i?NOmdzYNtFvEzaxvs2^wp2YWW7#%V8RiKEju~rr?!f#t
zOZV4PP5Z;Sfd>lGw!NYil(!D;+n()%ZS+~=fl6wBJbc8|T$V9?%SPEKdgGJWZ0d8y
zAp0EOjTPje(HI8SPU1wQ1hDwIN-T=)Yz~uc^9wfouM783=}e75Tm8#of9Y?_N9S{v
zj^26Md|Us6AuUEancnU!Uoe!&s>R*Gtb(Z^wPR~Hm4(6x+%;M2<m71qr^0XVM>94K
z+ReP!;Y!m%2QzQmvvKRhknM-5WrP)OL3KF;{w#Z%hdXM}5~jx$Gu(!*W24}RGCJ}`
zk<v!YW7@C}yG=vu;GS?xMo7L`949%4Cal>J^sRN29j~MZ8#Tf!1%!EJfD&FgU@lJx
zc#zHqB+~_eF7#r+C3N6x9@2rYDWwBnvx^RV&2l>MHFr6{*W`16uc2^&uQB6%ng63F
z^)Q+siIr~6$A$DV?BU|t8E84XtQ3mP_jHjM3zbwda{!%aMwxbCI|`sQSGjA2U8Ho<
zq_JdMFk_jA78@Pm)wPvSTTFu=Jl=2}YST$K!Q+>^p~8uyusJi8d1G9tT+;7=!@n2x
zuT?+R6)7#9WW(r0D~Y!y+u+Z<?<&XhIS%=)XQA#uRwBi7BW%OCH=8N5DuG5IZ=$65
z$_pjmy~(}HMK&wLltA^2NEXGjh6B6Eeu}iVV}vPYm3+?HprRn=l$#e(av@s8wpK3`
z1NG@1CW|62KM2%owm_}J&x286F+hFW<0Yq3#4Sl(Z8%09aRBtW&kJ7<*i$?eNnNo5
zD58?fDocC6N<t63&aR^B!biAEJO2D26keiRFskHTJz*YTVHar9(~_<Eo}zOaE&1Q&
zQs}Hx`aI?OmI&W}l#FNELMQn$&z@siE|jMwjtY-D52^CB9at>#zpt0Yvbw}wjU33(
z^Q`PN!F|+FaAs#Jvztb<%k_0Rm8~g?u3pw&Z*lhY=U9JzglYeyq(H*vQ55I=$b-o5
z20o?bOrGR*rq`9^5KctL${yk)oA<pMiyKyy-%=7z_I;K1soFu5QYuW&YEj_z7}Ke#
z=e>PP3g^QN1n(0q$A{05bgFcZ+D^a04&Q5c%HWAm`}*oNsE>`@ExSm<#HdW->jUUR
z<Bn%4W~pZ`CUov3Wvk|XpK-<uSFzuzUhA|Al4*f)W9I&}q(2(2aGoi%u$R>^*%-~G
i%$zpuoI7x{R&m(<{*$o>Y7g)sB0_?~DNW?~+`j>pWPAny

literal 4286
zcmeHLOKuuL5PjK%MHWVi6lD<!mRb4$mdFuu1m7S&L72}0%nh7nb{xS*IY7K-1~WG>
zOGiR<sv2rs-P1h`ut*jRDypfj@9U}_3E&NVhC}c-e)fS606r6u2w#X;ZXeov|87fL
z!TI})z`sQxSz?%$m}Cpw?WF=YNnu;Mk#t%h*=w(2a7>EbCw`xmFozJ^aNatJY>w+g
ze6a2@u~m#^BZm@8wco9#Crlli0uLb^3E$t2-WIc^#(?t)*@`UpuofJ(Uyh@F>b3Ph
z$D^m8Xq~pTkGJ4Q`Q2)te3mgkWYZ^Ijq|hkiP^9`De={bQQ%heZC$QU2UpP(-tbl8
zPWD2abEew;oat@w`uP3J^YpsgT%~jT(Dk%oU}sa$7|n6hBjDj`+I;RX(>)%<Y^V1u
zxpEJLVzZ2NFGX+1TXChn89VxczG?Ja<o=SJ8n{y5$ezyw`8sz3-<3{&C8oX)|94kh
z+0M_EV^O^m@tH21JEPN_ux%Gy1GUw?U~8Zr)3xvGXUSPO+3I<5aAh6uT<iYgm~_ug
ziEA0#JM$)SV%(oc@>lm_7N{+B7Mu%H?422lE%MBJH!!YTN2oT7xr>>N-8OF$C&qU^
z>vLsa{$0X%q1fjOe3P1mCv#lN{xQ4_*HCSAZjTb1`}mlc+9rl8$B3OP%VT@mch_~G
z7Y+4b{r>9e=M+7vSI;BgB?ryZDY4m>&w<W+!o=%S{hjU42>cHSn81VH1N~`0gvwH{
z8dv#hG|OK`>1;j7tM#B)Z7zDN?{6=dUal}$e<J#b(FPcAa6L9y8G}E@q!eIA^eYgE
GM1KL3x?{8e

diff --git a/public/logo-dark.svg b/public/logo-dark.svg
new file mode 100644
index 00000000..76bc7978
--- /dev/null
+++ b/public/logo-dark.svg
@@ -0,0 +1,17 @@
+<svg width="300" height="300" viewBox="0 0 300 300" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_2_2)">
+<g clip-path="url(#clip1_2_2)">
+<path d="M252 172L172 252" stroke="white" stroke-width="16" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M236 84L84 236" stroke="white" stroke-width="16" stroke-linecap="round" stroke-linejoin="round"/>
+</g>
+<rect x="8" y="8" width="284" height="284" rx="22" stroke="white" stroke-width="16"/>
+</g>
+<defs>
+<clipPath id="clip0_2_2">
+<rect width="300" height="300" fill="white"/>
+</clipPath>
+<clipPath id="clip1_2_2">
+<rect width="256" height="256" fill="white" transform="translate(44 44)"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/public/logo.svg b/public/logo.svg
new file mode 100644
index 00000000..3b89fbe5
--- /dev/null
+++ b/public/logo.svg
@@ -0,0 +1,17 @@
+<svg width="300" height="300" viewBox="0 0 300 300" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_1_2)">
+<g clip-path="url(#clip1_1_2)">
+<path d="M252 172L172 252" stroke="black" stroke-width="16" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M236 84L84 236" stroke="black" stroke-width="16" stroke-linecap="round" stroke-linejoin="round"/>
+</g>
+<rect x="8" y="8" width="284" height="284" rx="22" stroke="black" stroke-width="16"/>
+</g>
+<defs>
+<clipPath id="clip0_1_2">
+<rect width="300" height="300" fill="white"/>
+</clipPath>
+<clipPath id="clip1_1_2">
+<rect width="256" height="256" fill="white" transform="translate(44 44)"/>
+</clipPath>
+</defs>
+</svg>