chore: add product hunt banner

src/components/ConversationView/index.tsx

@@ -17,6 +17,7 @@ import EmptyView from "../EmptyView";
 import MessageView from "./MessageView";
 import MessageTextarea from "./MessageTextarea";
 import DataStorageBanner from "../DataStorageBanner";
+import ProductHuntBanner from "../ProductHuntBanner";
 
 // The maximum number of tokens that can be sent to the OpenAI API.
 // reference: https://platform.openai.com/docs/api-reference/completions/create#completions/create-max_tokens
@@ -216,6 +217,8 @@ const ConversationView = () => {
       } relative w-full h-full max-h-full flex flex-col justify-start items-start overflow-y-auto bg-white dark:bg-zinc-800`}
     >
       <div className="sticky top-0 z-1 bg-white dark:bg-zinc-800 w-full flex flex-col justify-start items-start">
+        {/* TODO(steven): remove this after released */}
+        <ProductHuntBanner className="hidden" />
         <DataStorageBanner />
         <Header className={showHeaderShadow ? "shadow" : ""} />
       </div>

src/components/ProductHuntBanner.tsx

@@ -0,0 +1,31 @@
+import { useTranslation } from "react-i18next";
+import { useLocalStorage } from "react-use";
+import Icon from "./Icon";
+
+interface Props {
+  className?: string;
+}
+
+const ProductHuntBanner = (props: Props) => {
+  const { className } = props;
+  const { t } = useTranslation();
+  const [hideBanner, setHideBanner] = useLocalStorage("hide-product-hunt-banner", false);
+  const show = !hideBanner;
+
+  return (
+    <div
+      className={`${!show && "!hidden"} ${
+        className || ""
+      } relative w-full flex bg-[#c65a33] text-white flex-row justify-start sm:justify-center items-center px-4 py-1`}
+    >
+      <a className="text-sm leading-6 pr-4 cursor-pointer hover:underline" href="" target="_blank">
+        {t("banner.product-hunt")}
+      </a>
+      <button className="absolute right-2 sm:right-4 opacity-60 hover:opacity-100" onClick={() => setHideBanner(true)}>
+        <Icon.BiX className="w-6 h-auto" />
+      </button>
+    </div>
+  );
+};
+
+export default ProductHuntBanner;

src/locales/en.json

@@ -63,6 +63,7 @@
   },
   "banner": {
     "data-storage": "Connection settings are stored in your local browser",
-    "non-select-sql-warning": "The current statement may be non-SELECT SQL, which will result in a database schema or data change. Make sure you know what you are doing."
+    "non-select-sql-warning": "The current statement may be non-SELECT SQL, which will result in a database schema or data change. Make sure you know what you are doing.",
+    "product-hunt": "🚀🚀🚀 We just launched on Product Hunt, please give us a vote! 🚀🚀🚀"
   }
 }

src/locales/zh.json

@@ -63,6 +63,7 @@
   },
   "banner": {
     "data-storage": "连接设置存储在您的本地浏览器中",
-    "non-select-sql-warning": "当前语句可能是非 SELECT SQL，这将导致数据库模式或数据变化。"
+    "non-select-sql-warning": "当前语句可能是非 SELECT SQL，这将导致数据库模式或数据变化。",
+    "product-hunt": "🚀🚀🚀 我们刚在 Product Hunt 发布, 来给我们点个赞! 🚀🚀🚀"
   }
 }