zudoku 0.0.0-f9211eb → 0.0.0-f98e47d6

package/src/lib/components/index.ts

@@ -3,48 +3,40 @@ import { Helmet } from "@zudoku/react-helmet-async";
 import { useTheme as useThemeImport } from "next-themes";
 import { Link as LinkImport } from "react-router";
 import { useAuth as useAuthImport } from "../authentication/hook.js";
-import { RouteGuard as RouteGuardImport } from "../core/RouteGuard.js";
-import { RouterError as RouterErrorImport } from "../errors/RouterError.js";
-import { ServerError as ServerErrorImport } from "../errors/ServerError.js";
 import { Button as ButtonImport } from "../ui/Button.js";
 import { Callout as CalloutImport } from "../ui/Callout.js";
-import {
-  Bootstrap as BootstrapImport,
-  BootstrapStatic as BootstrapStaticImport,
-} from "./Bootstrap.js";
+import { ClientOnly as ClientOnlyImport } from "./ClientOnly.js";
 import {
   CACHE_KEYS as CACHE_KEYS_IMPORT,
   useCache as useCacheImport,
 } from "./cache.js";
-import { ClientOnly as ClientOnlyImport } from "./ClientOnly.js";
 import { useZudoku as useZudokuImport } from "./context/ZudokuContext.js";
-import { Layout as LayoutImport } from "./Layout.js";
 import { Markdown as MarkdownImport } from "./Markdown.js";
+import { Slot as SlotImport } from "./Slot.js";
 import { Spinner as SpinnerImport } from "./Spinner.js";
-import { StatusPage as StatusPageImport } from "./StatusPage.js";
+import { Typography as TypographyImport } from "./Typography.js";
 import { Zudoku as ZudokuImport } from "./Zudoku.js";
 
-export const useMDXComponents = /*@__PURE__*/ useMDXComponentsImport;
-export const Layout = /*@__PURE__*/ LayoutImport;
-export const RouterError = /*@__PURE__*/ RouterErrorImport;
-export const ServerError = /*@__PURE__*/ ServerErrorImport;
-export const Bootstrap = /*@__PURE__*/ BootstrapImport;
-export const BootstrapStatic = /*@__PURE__*/ BootstrapStaticImport;
-export const RouteGuard = /*@__PURE__*/ RouteGuardImport;
-
 export const Head = /*@__PURE__*/ Helmet;
-
-export const useZudoku = /*@__PURE__*/ useZudokuImport;
-export const useAuth = /*@__PURE__*/ useAuthImport;
-export const useCache = /*@__PURE__*/ useCacheImport;
-export const CACHE_KEYS = /*@__PURE__*/ CACHE_KEYS_IMPORT;
-export const Zudoku = /*@__PURE__*/ ZudokuImport;
-
-export const StatusPage = /*@__PURE__*/ StatusPageImport;
 export const Callout = /*@__PURE__*/ CalloutImport;
 export const Markdown = /*@__PURE__*/ MarkdownImport;
 export const Spinner = /*@__PURE__*/ SpinnerImport;
 export const ClientOnly = /*@__PURE__*/ ClientOnlyImport;
 export const Button = /*@__PURE__*/ ButtonImport;
 export const Link = /*@__PURE__*/ LinkImport;
+export const Zudoku = /*@__PURE__*/ ZudokuImport;
+export const Typography = /*@__PURE__*/ TypographyImport;
+export const Slot = /*@__PURE__*/ SlotImport;
+
+/** @deprecated Import from `zudoku/hooks` instead */
+export const useMDXComponents = /*@__PURE__*/ useMDXComponentsImport;
+/** @deprecated Import from `zudoku/hooks` instead */
+export const useZudoku = /*@__PURE__*/ useZudokuImport;
+/** @deprecated Import from `zudoku/hooks` instead */
+export const useAuth = /*@__PURE__*/ useAuthImport;
+/** @deprecated Import from `zudoku/hooks` instead */
+export const useCache = /*@__PURE__*/ useCacheImport;
+/** @deprecated Import from `zudoku/hooks` instead */
+export const CACHE_KEYS = /*@__PURE__*/ CACHE_KEYS_IMPORT;
+/** @deprecated Import from `zudoku/hooks` instead */
 export const useTheme = /*@__PURE__*/ useThemeImport;

package/src/lib/components/navigation/Navigation.tsx

@@ -0,0 +1,50 @@
+import { VisuallyHidden } from "@radix-ui/react-visually-hidden";
+import type { NavigationItem as NavigationItemType } from "../../../config/validators/NavigationSchema.js";
+import { DrawerContent, DrawerTitle } from "../../ui/Drawer.js";
+import { Slot } from "../Slot.js";
+import { NavigationItem } from "./NavigationItem.js";
+import { NavigationWrapper } from "./NavigationWrapper.js";
+
+export const Navigation = ({
+  onRequestClose,
+  navigation,
+}: {
+  onRequestClose?: () => void;
+  navigation: NavigationItemType[];
+}) => (
+  <>
+    <NavigationWrapper>
+      <Slot.Target name="navigation-before" />
+      {navigation.map((item) => (
+        <NavigationItem
+          key={
+            item.type +
+            (item.label ?? "") +
+            ("path" in item ? item.path : "") +
+            ("file" in item ? item.file : "") +
+            ("to" in item ? item.to : "")
+          }
+          item={item}
+        />
+      ))}
+      <Slot.Target name="navigation-after" />
+    </NavigationWrapper>
+    <DrawerContent
+      className="lg:hidden h-[100dvh] start-0 w-[320px] rounded-none"
+      aria-describedby={undefined}
+    >
+      <div className="p-4 overflow-y-auto overscroll-none">
+        <VisuallyHidden>
+          <DrawerTitle>Navigation</DrawerTitle>
+        </VisuallyHidden>
+        {navigation.map((item) => (
+          <NavigationItem
+            key={item.label}
+            item={item}
+            onRequestClose={onRequestClose}
+          />
+        ))}
+      </div>
+    </DrawerContent>
+  </>
+);

package/src/lib/components/navigation/NavigationBadge.tsx

@@ -0,0 +1,48 @@
+import { cn } from "../../util/cn.js";
+
+export const ColorMap = {
+  green: "bg-green-400 dark:bg-green-800",
+  blue: "bg-sky-400 dark:bg-sky-800",
+  yellow: "bg-yellow-400 dark:bg-yellow-800",
+  red: "bg-red-400 dark:bg-red-800",
+  purple: "bg-purple-400 dark:bg-purple-600",
+  indigo: "bg-indigo-400 dark:bg-indigo-600",
+  gray: "bg-gray-400 dark:bg-gray-600",
+  outline: "border border-border rounded-md text-foreground",
+};
+
+export const ColorMapInvert = {
+  green: "text-green-500 dark:text-green-600",
+  blue: "text-sky-400 dark:text-sky-600",
+  yellow: "text-yellow-400 dark:text-yellow-600",
+  red: "text-red-400 dark:text-red-600",
+  purple: "text-purple-400 dark:text-purple-600",
+  indigo: "text-indigo-400 dark:text-indigo-600",
+  gray: "text-gray-400 dark:text-gray-600",
+  outline: "",
+};
+
+export const NavigationBadge = ({
+  color,
+  label,
+  className,
+  invert,
+}: {
+  color: keyof typeof ColorMap;
+  label: string;
+  className?: string;
+  invert?: boolean;
+}) => {
+  return (
+    <span
+      className={cn(
+        "flex items-center duration-200 transition-opacity text-center uppercase text-[0.65rem] leading-5 font-bold rounded-sm text-background dark:text-zinc-50 h-full",
+        color === "outline" ? "px-3" : "mt-0.5 px-1",
+        invert ? ColorMapInvert[color] : ColorMap[color],
+        className,
+      )}
+    >
+      {label}
+    </span>
+  );
+};

package/src/lib/components/navigation/NavigationCategory.tsx

@@ -0,0 +1,153 @@
+import * as Collapsible from "@radix-ui/react-collapsible";
+import { deepEqual } from "fast-equals";
+import { ChevronRightIcon } from "lucide-react";
+import { memo, useEffect, useState } from "react";
+import { NavLink, useLocation, useMatch } from "react-router";
+import { Button } from "zudoku/ui/Button.js";
+import type { NavigationCategory as NavigationCategoryType } from "../../../config/validators/NavigationSchema.js";
+import { cn } from "../../util/cn.js";
+import { joinUrl } from "../../util/joinUrl.js";
+import { NavigationItem } from "./NavigationItem.js";
+import { navigationListItem, useIsCategoryOpen } from "./utils.js";
+
+const NavigationCategoryInner = ({
+  category,
+  onRequestClose,
+}: {
+  category: NavigationCategoryType;
+  onRequestClose?: () => void;
+}) => {
+  const isCategoryOpen = useIsCategoryOpen(category);
+  const [hasInteracted, setHasInteracted] = useState(false);
+  const location = useLocation();
+
+  const isCollapsible = category.collapsible ?? true;
+  const isCollapsed = category.collapsed ?? true;
+  const isDefaultOpen = Boolean(
+    !isCollapsible || !isCollapsed || isCategoryOpen,
+  );
+  const [open, setOpen] = useState(isDefaultOpen);
+  const isActive = useMatch(category.link?.path ?? "");
+
+  useEffect(() => {
+    // this is triggered when an item from the navigation is clicked
+    // and the navigation, enclosing this item, is not opened
+    if (isCategoryOpen) {
+      setOpen(true);
+    }
+  }, [isCategoryOpen]);
+
+  const ToggleButton = isCollapsible && (
+    <Button
+      onClick={(e) => {
+        e.preventDefault();
+        setOpen((prev) => !prev);
+        setHasInteracted(true);
+      }}
+      variant="ghost"
+      size="icon"
+      className="size-6 hover:bg-[hsl(from_var(--accent)_h_s_calc(l+6*var(--dark)))]"
+    >
+      <ChevronRightIcon
+        size={16}
+        className={cn(
+          hasInteracted && "transition",
+          "shrink-0 group-data-[state=open]:rotate-90 rtl:rotate-180",
+        )}
+      />
+    </Button>
+  );
+
+  const icon = category.icon && (
+    <category.icon
+      size={16}
+      className={cn("align-[-0.125em] ", isActive && "text-primary")}
+    />
+  );
+
+  const styles = navigationListItem({
+    className: [
+      "group text-start font-medium",
+      isCollapsible || typeof category.link !== "undefined"
+        ? "cursor-pointer"
+        : "cursor-default hover:bg-transparent",
+    ],
+  });
+
+  return (
+    <Collapsible.Root
+      className="flex flex-col"
+      defaultOpen={isDefaultOpen}
+      open={open}
+      onOpenChange={() => setOpen(true)}
+    >
+      <Collapsible.Trigger className="group" asChild disabled={!isCollapsible}>
+        {category.link?.type === "doc" ? (
+          <NavLink
+            to={{
+              pathname: joinUrl(category.link.path),
+              search: location.search,
+            }}
+            className={styles}
+            onClick={() => {
+              setHasInteracted(true);
+              // if it is the current path and closed then open it because there's no path change to trigger the open
+              if (isActive && !open) {
+                setOpen(true);
+              }
+            }}
+          >
+            {icon}
+            <div className="flex items-center gap-2 justify-between w-full text-foreground/80 group-aria-[current='page']:text-primary">
+              <div className="truncate">{category.label}</div>
+              {ToggleButton}
+            </div>
+          </NavLink>
+        ) : (
+          // biome-ignore lint/a11y/noStaticElementInteractions: This is only to track if the user has interacted
+          <div
+            onClick={() => setHasInteracted(true)}
+            onKeyUp={(e) => {
+              if (e.key === "Enter" || e.key === " ") setHasInteracted(true);
+            }}
+            className={styles}
+          >
+            {icon}
+            <div className="flex items-center justify-between w-full">
+              <div className="flex gap-2 truncate w-full">{category.label}</div>
+              {ToggleButton}
+            </div>
+          </div>
+        )}
+      </Collapsible.Trigger>
+      <Collapsible.Content
+        className={cn(
+          // CollapsibleContent class is used to animate and it should only be applied when the user has triggered the toggle
+          hasInteracted && "CollapsibleContent",
+          category.items.length === 0 && "hidden",
+          "ms-6 my-1",
+        )}
+      >
+        <ul className="relative after:absolute after:-start-(--padding-nav-item) after:translate-x-[1.5px] after:top-0 after:bottom-0 after:w-px after:bg-border">
+          {category.items.map((item) => (
+            <NavigationItem
+              key={
+                item.type +
+                (item.label ?? "") +
+                ("path" in item ? item.path : "") +
+                ("file" in item ? item.file : "") +
+                ("to" in item ? item.to : "")
+              }
+              onRequestClose={onRequestClose}
+              item={item}
+            />
+          ))}
+        </ul>
+      </Collapsible.Content>
+    </Collapsible.Root>
+  );
+};
+
+export const NavigationCategory = memo(NavigationCategoryInner, deepEqual);
+
+NavigationCategory.displayName = "NavigationCategory";

package/src/lib/components/navigation/NavigationItem.tsx

@@ -0,0 +1,161 @@
+import { ExternalLinkIcon } from "lucide-react";
+import { useEffect, useRef, useState } from "react";
+import { NavLink, useLocation } from "react-router";
+import {
+  Tooltip,
+  TooltipArrow,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from "zudoku/ui/Tooltip.js";
+import type { NavigationItem as NavigationItemType } from "../../../config/validators/NavigationSchema.js";
+import { useAuth } from "../../authentication/hook.js";
+import { cn } from "../../util/cn.js";
+import { joinUrl } from "../../util/joinUrl.js";
+import { AnchorLink } from "../AnchorLink.js";
+import { useViewportAnchor } from "../context/ViewportAnchorContext.js";
+import { useZudoku } from "../context/ZudokuContext.js";
+import { NavigationBadge } from "./NavigationBadge.js";
+import { NavigationCategory } from "./NavigationCategory.js";
+import { navigationListItem, shouldShowItem } from "./utils.js";
+
+const TruncatedLabel = ({
+  label,
+  className,
+}: {
+  label: string;
+  className?: string;
+}) => {
+  const ref = useRef<HTMLSpanElement>(null);
+  const [isTruncated, setIsTruncated] = useState(false);
+
+  useEffect(() => {
+    if (!ref.current) return;
+
+    if (ref.current.offsetWidth < ref.current.scrollWidth) {
+      setIsTruncated(true);
+    }
+  }, []);
+
+  return (
+    <>
+      <span
+        className={cn("truncate flex-1", className)}
+        title={label}
+        ref={ref}
+      >
+        {label}
+      </span>
+      {isTruncated && (
+        <TooltipProvider delayDuration={500}>
+          <Tooltip disableHoverableContent>
+            <TooltipTrigger className="absolute inset-0 z-10" />
+            <TooltipContent
+              className="max-w-64 rounded-lg"
+              side="bottom"
+              align="center"
+            >
+              <TooltipArrow />
+              {label}
+            </TooltipContent>
+          </Tooltip>
+        </TooltipProvider>
+      )}
+    </>
+  );
+};
+
+export const DATA_ANCHOR_ATTR = "data-anchor";
+
+export const NavigationItem = ({
+  item,
+  onRequestClose,
+}: {
+  item: NavigationItemType;
+  onRequestClose?: () => void;
+}) => {
+  const location = useLocation();
+  const { activeAnchor } = useViewportAnchor();
+  const auth = useAuth();
+  const context = useZudoku();
+
+  if (!shouldShowItem(auth, context)(item)) {
+    return null;
+  }
+
+  switch (item.type) {
+    case "category":
+      return (
+        <NavigationCategory category={item} onRequestClose={onRequestClose} />
+      );
+    case "doc":
+      return (
+        <NavLink
+          viewTransition
+          className={({ isActive, isPending }) =>
+            navigationListItem({ isActive, isPending })
+          }
+          to={joinUrl(item.path)}
+          onClick={onRequestClose}
+          end
+        >
+          {item.icon && <item.icon size={16} className="align-[-0.125em]" />}
+          {item.badge ? (
+            <>
+              {item.label && (
+                <TruncatedLabel label={item.label} className="flex-1" />
+              )}
+              <NavigationBadge {...item.badge} />
+            </>
+          ) : (
+            item.label
+          )}
+        </NavLink>
+      );
+    case "link":
+    case "custom-page": {
+      const href = item.type === "link" ? item.to : joinUrl(item.path);
+      return !href.startsWith("http") ? (
+        <AnchorLink
+          to={{
+            pathname: href.split("#")[0],
+            hash: href.split("#")[1],
+            search: location.search,
+          }}
+          {...{ [DATA_ANCHOR_ATTR]: href.split("#")[1] }}
+          className={navigationListItem({
+            isActive:
+              href ===
+              [location.pathname, activeAnchor].filter(Boolean).join("#"),
+          })}
+          onClick={onRequestClose}
+        >
+          {item.icon && <item.icon size={16} className="align-[-0.125em]" />}
+          {item.badge ? (
+            <>
+              {item.label && <TruncatedLabel label={item.label} />}
+              <NavigationBadge {...item.badge} />
+            </>
+          ) : (
+            <span className="break-all">{item.label}</span>
+          )}
+        </AnchorLink>
+      ) : (
+        <a
+          className={navigationListItem()}
+          href={href}
+          target="_blank"
+          rel="noopener noreferrer"
+          onClick={onRequestClose}
+        >
+          {item.icon && <item.icon size={16} className="align-[-0.125em]" />}
+          <span className="whitespace-normal">{item.label}</span>
+          {/* This prevents that the icon would be positioned in its own line if the text fills a line entirely */}
+          <span className="whitespace-nowrap">
+            <ExternalLinkIcon className="inline -translate-y-0.5" size={12} />
+          </span>
+        </a>
+      );
+    }
+  }
+};

package/src/lib/components/navigation/NavigationWrapper.tsx

@@ -0,0 +1,49 @@
+import { type PropsWithChildren, useEffect, useRef } from "react";
+import { cn } from "../../util/cn.js";
+import { scrollIntoViewIfNeeded } from "../../util/scrollIntoViewIfNeeded.js";
+import { useZudoku } from "../context/ZudokuContext.js";
+import { PoweredByZudoku } from "./PoweredByZudoku.js";
+
+export const NavigationWrapper = ({
+  children,
+  className,
+}: PropsWithChildren<{
+  className?: string;
+}>) => {
+  const { options } = useZudoku();
+  const navRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    const active = navRef.current?.querySelector('[aria-current="page"]');
+    scrollIntoViewIfNeeded(active ?? null);
+  }, []);
+
+  return (
+    <div
+      className="grid sticky top-(--header-height) lg:h-[calc(100vh-var(--header-height))] grid-rows-[1fr_min-content] border-r"
+      data-pagefind-ignore="all"
+    >
+      <nav
+        ref={navRef}
+        className={cn(
+          "hidden max-w-[calc(var(--side-nav-width)+var(--padding-nav-item))] lg:flex scrollbar flex-col overflow-y-auto shrink-0 text-sm pe-3 ps-4 lg:ps-8",
+          "-mx-(--padding-nav-item) pb-[8vh] pt-(--padding-content-top) scroll-pt-2 gap-1",
+          // Revert the padding/margin on the first child
+          "-mt-2.5",
+          className,
+        )}
+        style={{
+          maskImage: `linear-gradient(180deg, transparent 1%, rgba(0, 0, 0, 1) 20px, rgba(0, 0, 0, 1) 90%, transparent 99%)`,
+        }}
+      >
+        {children}
+      </nav>
+
+      <div className="bg-background border-t p-2 mx-5  gap-2 items-center mt-2 drop-shadow-[0_-3px_1px_rgba(0,0,0,0.015)] hidden lg:[&:has(>_:nth-child(1):last-child)]:flex">
+        {options.site?.showPoweredBy !== false && <PoweredByZudoku />}
+      </div>
+    </div>
+  );
+};
+
+NavigationWrapper.displayName = "NavigationWrapper";

package/src/lib/components/navigation/PoweredByZudoku.tsx

@@ -1,23 +1,33 @@
 import { ChevronRightIcon } from "lucide-react";
 import { cn } from "../../util/cn.js";
 import ZudokuLogo from "./ZudokuLogo.js";
+import ZuploLogo from "./ZuploLogo.js";
 
 export const PoweredByZudoku = ({ className }: { className?: string }) => (
   <a
-    href="https://zudoku.dev"
+    href={import.meta.env.IS_ZUPLO ? "https://zuplo.com" : "https://zudoku.dev"}
     target="_blank"
     rel="noopener noreferrer"
     className={cn(
-      "flex justify-between items-center w-full border border-transparent hover:border-border rounded-full hover:shadow-sm h-7 px-3 text-nowrap hover:bg-muted/80 transition-all",
+      "flex justify-between items-center w-full border border-transparent hover:border-border rounded-full hover:shadow-xs h-7 px-3 text-nowrap hover:bg-muted/80 transition-all",
       className,
     )}
   >
     <div className="opacity-70 hover:opacity-100 transition-opacity gap-1.5 text-[11px] font-medium rounded-full h-7 flex items-center text-nowrap">
-      <ZudokuLogo className="w-3.5 h-3.5 dark:fill-white" />
-      powered by Zudoku
+      {import.meta.env.IS_ZUPLO ? (
+        <ZuploLogo className="w-3.5 h-3.5 dark:fill-white" />
+      ) : (
+        <ZudokuLogo className="w-3.5 h-3.5 dark:fill-white" />
+      )}
+      powered by {import.meta.env.IS_ZUPLO ? "Zuplo" : "Zudoku"}
     </div>
     <div className="text-xs font-medium opacity-70 hover:text-foreground transition-colors cursor-pointer">
-      <ChevronRightIcon size={12} absoluteStrokeWidth strokeWidth={1.5} />
+      <ChevronRightIcon
+        size={12}
+        absoluteStrokeWidth
+        strokeWidth={1.5}
+        className="rtl:rotate-180"
+      />
     </div>
   </a>
 );

package/src/lib/components/navigation/Toc.tsx

@@ -1,11 +1,11 @@
 import type { TocEntry } from "@stefanprobst/rehype-extract-toc";
 import { ListTreeIcon } from "lucide-react";
 import {
+  type CSSProperties,
+  type PropsWithChildren,
   useEffect,
   useRef,
   useState,
-  type CSSProperties,
-  type PropsWithChildren,
 } from "react";
 import { cn } from "../../util/cn.js";
 import { AnchorLink } from "../AnchorLink.js";
@@ -80,16 +80,16 @@ export const Toc = ({ entries }: { entries: TocEntry[] }) => {
   }, [activeAnchor]);
 
   return (
-    <aside className="sticky scrollbar top-8 lg:top-[--header-height] h-[calc(100vh-var(--header-height))] pt-[--padding-content-top] pb-[--padding-content-bottom] overflow-y-auto ps-1 text-sm">
+    <aside className="sticky scrollbar top-8 lg:top-(--header-height) h-[calc(100vh-var(--header-height))] pt-(--padding-content-top) pb-(--padding-content-bottom) overflow-y-auto ps-1 text-sm">
       <div className="flex items-center gap-2 font-medium mb-2">
         <ListTreeIcon size={16} />
         On this page
       </div>
       <div className="relative ms-2 ps-4">
-        <div className="absolute inset-0 right-auto bg-border w-[2px]" />
+        <div className="absolute inset-0 end-auto bg-border w-[2px]" />
         <div
           className={cn(
-            "absolute -left-px -translate-y-1 h-6 w-[4px] rounded bg-primary",
+            "absolute -start-px -translate-y-1 h-6 w-[4px] rounded-sm bg-primary",
             paintedOnce.current &&
               "ease-out [transition:top_150ms,opacity_325ms]",
           )}
@@ -104,10 +104,10 @@ export const Toc = ({ entries }: { entries: TocEntry[] }) => {
               isActive={item.id === activeAnchor}
               key={item.id}
               item={item}
-              className="pl-0"
+              className="ps-0"
             >
               {item.children && (
-                <ul className="list-none pl-4 pt-2 space-y-2">
+                <ul className="list-none ps-4 pt-2 space-y-2">
                   {item.children.map((child) => (
                     <TocItem
                       item={child}

package/src/lib/components/navigation/ZudokuLogo.tsx

@@ -1,4 +1,4 @@
-import * as React from "react";
+import type * as React from "react";
 
 const ZudokuLogo = (props: React.SVGProps<SVGSVGElement>) => (
   <svg

package/src/lib/components/navigation/ZuploLogo.tsx

@@ -0,0 +1,14 @@
+import type * as React from "react";
+
+const ZuploLogo = (props: React.SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 76 66"
+    fill="none"
+    {...props}
+  >
+    <path d="M55.331 43.537H32.527l24.295-24.343a1.642 1.642 0 0 0-1.157-2.802H17.07V.239h42.336a16.407 16.407 0 0 1 8.81 2.438 16.471 16.471 0 0 1 6.147 6.775 16.037 16.037 0 0 1-3.167 18.201L55.331 43.535v.002Z" />
+    <path d="M20.695 21.888H43.5L19.204 46.23a1.643 1.643 0 0 0 1.158 2.802h38.595v16.153H16.621a16.406 16.406 0 0 1-8.81-2.438 16.471 16.471 0 0 1-6.147-6.775 16.038 16.038 0 0 1 3.167-18.201L20.695 21.89v-.002Z" />
+  </svg>
+);
+export default ZuploLogo;