APIConfig APIDiscovery Root SvgYacd Backend

haishanh · Oct 3, 2023 · 57eb322 · 57eb322
1 parent 3b2666e
commit 57eb322
Show file tree

Hide file tree

Showing 7 changed files with 45 additions and 98 deletions.
diff --git a/src/components/APIConfig.module.scss b/src/components/APIConfig.module.scss
@@ -11,9 +11,10 @@
   align-items: center;
 
   .icon {
-    --stroke: #f3f3f3;
+    --stroke: var(--color-text-secondary);
+
     color: #20497e;
-    opacity: 0.7;
+    opacity: 0.4;
     transition: opacity 400ms;
     &:hover {
       opacity: 1;

diff --git a/src/components/APIConfig.tsx b/src/components/APIConfig.tsx
@@ -14,7 +14,7 @@ const { useState, useRef, useCallback, useEffect } = React;
 const Ok = 0;
 
 // eslint-disable-next-line @typescript-eslint/no-empty-function
-const noop = () => {};
+const noop = () => { };
 
 export default function APIConfig() {
   const [baseURL, setBaseURL] = useState('');
@@ -95,7 +95,15 @@ export default function APIConfig() {
     <div className={s0.root} ref={contentEl} onKeyDown={handleContentOnKeyDown}>
       <div className={s0.header}>
         <div className={s0.icon}>
-          <SvgYacd width={160} height={160} stroke="var(--stroke)" />
+          <SvgYacd
+            width={160}
+            height={160}
+            c0="transparent"
+            eye="transparent"
+            shapeStroke="var(--stroke)"
+            mouth="var(--stroke)"
+            eyeStroke="var(--stroke)"
+          />
         </div>
       </div>
       <div className={s0.body}>

diff --git a/src/components/APIDiscovery.module.scss b/src/components/APIDiscovery.module.scss
diff --git a/src/components/APIDiscovery.tsx b/src/components/APIDiscovery.tsx
diff --git a/src/components/Root.tsx b/src/components/Root.tsx
@@ -15,8 +15,7 @@ import { AppConfigSideEffect } from '$src/components/fn/AppConfigSideEffect';
 import { darkModePureBlackToggleAtom } from '$src/store/app';
 
 import { actions, initialState } from '../store';
-import APIConfig from './APIConfig';
-import APIDiscovery from './APIDiscovery';
+import { Backend } from './backend/Backend';
 import { MutableConnRefCtx } from './conns/ConnCtx';
 import ErrorBoundary from './ErrorBoundary';
 import Home from './Home';
@@ -59,7 +58,6 @@ function RouteInnerApp() {
 function SideBarApp() {
   return (
     <>
-      <APIDiscovery />
       <SideBar />
       <div className={s0.content}>
         <Suspense fallback={<Loading2 />}>
@@ -72,7 +70,7 @@ function SideBarApp() {
 
 function App() {
   return useRoutes([
-    { path: '/backend', element: <APIConfig /> },
+    { path: '/backend', element: <Backend /> },
     { path: '*', element: <SideBarApp /> },
   ]);
 }

diff --git a/src/components/SvgYacd.tsx b/src/components/SvgYacd.tsx
@@ -9,18 +9,20 @@ type Props = {
   animate?: boolean;
   c0?: string;
   c1?: string;
-  stroke?: string;
+  shapeStroke?: string;
   eye?: string;
+  eyeStroke?: string;
   mouth?: string;
 };
 
-function SvgYacd({
+export default function SvgYacd({
   width = 320,
   height = 320,
   animate = false,
   c0 = 'currentColor',
-  stroke = '#eee',
+  shapeStroke = '#eee',
   eye = '#eee',
+  eyeStroke = '#eee',
   mouth = '#eee',
 }: Props) {
   const faceClassName = cx({ [s.path]: animate });
@@ -30,14 +32,14 @@ function SvgYacd({
         {/* face */}
         <path
           d="M71.689 53.055c9.23-1.487 25.684 27.263 41.411 56.663 18.572-8.017 71.708-7.717 93.775 0 4.714-15.612 31.96-57.405 41.626-56.663 3.992.088 13.07 31.705 23.309 94.96 2.743 16.949 7.537 47.492 14.38 91.63-42.339 17.834-84.37 26.751-126.095 26.751-41.724 0-83.756-8.917-126.095-26.751C52.973 116.244 65.536 54.047 71.689 53.055z"
-          stroke={stroke}
+          stroke={shapeStroke}
           strokeWidth="4"
           strokeLinecap="round"
           fill={c0}
           className={faceClassName}
         />
-        <circle fill={eye} cx="216.5" cy="181.5" r="14.5" />
-        <circle fill={eye} cx="104.5" cy="181.5" r="14.5" />
+        <circle fill={eye} cx="216.5" cy="181.5" r="14.5" strokeWidth="4" stroke={eyeStroke} />
+        <circle fill={eye} cx="104.5" cy="181.5" r="14.5" strokeWidth="4" stroke={eyeStroke} />
         {/* mouth */}
         <g stroke={mouth} strokeLinecap="round" strokeWidth="4">
           <path d="M175.568 218.694c-2.494 1.582-5.534 2.207-8.563 1.508-3.029-.7-5.487-2.594-7.035-5.11M143.981 218.694c2.494 1.582 5.534 2.207 8.563 1.508 3.03-.7 5.488-2.594 7.036-5.11" />
@@ -46,5 +48,3 @@ function SvgYacd({
     </svg>
   );
 }
-
-export default SvgYacd;
diff --git a/src/components/backend/Backend.tsx b/src/components/backend/Backend.tsx
@@ -0,0 +1,22 @@
+import React from 'react';
+
+import APIConfig from '../APIConfig';
+import { ThemeSwitcher } from '../shared/ThemeSwitcher';
+
+export function Backend() {
+  return (
+    <>
+      <APIConfig />
+      <div
+        style={{
+          position: 'fixed',
+          padding: 16,
+          right: 0,
+          bottom: 0,
+        }}
+      >
+        <ThemeSwitcher />
+      </div>
+    </>
+  );
+}