Merge pull request #12 from pixiv/gh-pages/update-new-demo-link

旧デモの提供終了のメッセージと新デモへの動線を追加
pixiv · Jul 12, 2023 · 608f049 · 608f049
2 parents bdbba41 + 116a5e3
commit 608f049
Show file tree

Hide file tree

Showing 3 changed files with 29 additions and 11 deletions.
diff --git a/src/components/githubLink.tsx b/src/components/githubLink.tsx
@@ -2,21 +2,23 @@ import { buildUrl } from "@/utils/buildUrl";
 
 export const GitHubLink = () => {
   return (
-    <div className="absolute right-0 z-10 m-24">
+    <div>
       <a
         draggable={false}
         href="https://github.com/pixiv/ChatVRM"
         rel="noopener noreferrer"
         target="_blank"
       >
         <div className="p-8 rounded-16 bg-[#1F2328] hover:bg-[#33383E] active:bg-[565A60] flex">
-          <img
-            alt="https://github.com/pixiv/ChatVRM"
-            height={24}
-            width={24}
-            src={buildUrl("/github-mark-white.svg")}
-          ></img>
-          <div className="mx-4 text-white font-M_PLUS_2 font-bold">Fork me</div>
+          <div className="w-[24px]">
+            <img
+              alt="https://github.com/pixiv/ChatVRM"
+              height={24}
+              width={24}
+              src={buildUrl("/github-mark-white.svg")}
+            ></img>
+          </div>
+          <div className="mx-8 text-white font-M_PLUS_2 font-bold">Fork me</div>
         </div>
       </a>
     </div>

diff --git a/src/components/menu.tsx b/src/components/menu.tsx
@@ -6,6 +6,7 @@ import React, { useCallback, useContext, useRef, useState } from "react";
 import { Settings } from "./settings";
 import { ViewerContext } from "@/features/vrmViewer/viewerContext";
 import { AssistantText } from "./assistantText";
+import { GitHubLink } from "./githubLink";
 
 type Props = {
   openAiKey: string;
@@ -89,8 +90,22 @@ export const Menu = ({
 
   return (
     <>
-      <div className="absolute z-10 m-24">
-        <div className="grid grid-flow-col gap-[8px]">
+      <div className="absolute z-10 w-full font-M_PLUS_2">
+        <div className="px-24 py-4 mb-8 text-center text-primary bg-white">
+          Koemotionの正式リリースに伴い、
+          <a
+            href="https://chatvrm.glitch.me"
+            className="text-secondary hover:text-secondary-hover active:text-secondary-press"
+          >
+            Koeiromap 1.0対応版
+          </a>
+          を公開しました。このページのデモは2023/7/18以降はご利用いただけません。
+        </div>
+        <div
+          className="px-24 grid grid-flow-col 
+        grid-cols-[min-content_min-content_1fr_min-content]
+        gap-[8px] auto-cols-min whitespace-nowrap"
+        >
           <IconButton
             iconName="24/Menu"
             label="設定"
@@ -113,6 +128,8 @@ export const Menu = ({
               onClick={() => setShowChatLog(true)}
             />
           )}
+          <div></div>
+          <GitHubLink />
         </div>
       </div>
       {showChatLog && <ChatLog messages={chatLog} />}

diff --git a/src/pages/index.tsx b/src/pages/index.tsx
@@ -218,7 +218,6 @@ export default function Home() {
         handleClickResetChatLog={() => setChatLog([])}
         handleClickResetSystemPrompt={() => setSystemPrompt(SYSTEM_PROMPT)}
       />
-      <GitHubLink />
     </div>
   );
 }