add social share + fallbacks

Mintbase · Mar 1, 2024 · c85b881 · c85b881
1 parent 8ee4a3a
commit c85b881
Show file tree

Hide file tree

Showing 38 changed files with 904 additions and 73 deletions.
diff --git a/ai-chat/package.json b/ai-chat/package.json
@@ -1,7 +1,10 @@
 {
   "name": "AI-Chat-Mintbase-Templates",
   "version": "0.1.0",
-  "author": "Mintbase Team",
+  "keywords": ["templates", "mintbase", "web3", "nextjs", "react", "ai"],
+  "repository": "https://github.com/mintbase/templates.git",
+  "homepage": "https;//templates.mintbase.xyz/ai-chat",
+  "author": "Mintbase Team <[email protected]>",
   "scripts": {
     "dev": "next dev",
     "build": "next build",

diff --git a/ai-chat/src/app/globals.css b/ai-chat/src/app/globals.css
@@ -203,7 +203,6 @@ body {
   margin-bottom: 120px;
 }
 
-
 .connect {
   background: #101223;
   height: 40px;
@@ -214,8 +213,6 @@ body {
   justify-content: right;
 }
 
-
-
 @media (max-width: 768px) {
   .chat-card {
     margin-top: 20px;
@@ -238,17 +235,16 @@ body {
   .connect span {
     display: none;
   }
-  .connect p{
+  .connect p {
     position: absolute;
     right: 0px;
     margin-top: -11px;
   }
 }
 
-
-.social-networks{
-  position:relative;
+.social-networks {
+  position: relative;
   top: -3px;
   display: flex;
-  gap:4px;
-}
+  gap: 4px;
+}
diff --git a/ai-minter/package.json b/ai-minter/package.json
@@ -1,5 +1,9 @@
 {
-  "name": "minter",
+  "name": "AI-Minter-Mintbase",
+  "keywords": ["templates", "mintbase", "web3", "nextjs", "react", "ai"],
+  "repository": "https://github.com/mintbase/templates.git",
+  "homepage": "https;//templates.mintbase.xyz/ai-minter",
+  "author": "Mintbase Team <[email protected]>",
   "version": "0.1.0",
   "private": true,
   "scripts": {
@@ -22,7 +26,9 @@
     "next": "14.0.3",
     "react": "^18",
     "react-dom": "^18",
+    "react-github-btn": "^1.4.0",
     "react-hook-form": "^7.48.2",
+    "react-share": "^5.1.0",
     "tailwind-merge": "^2.0.0",
     "tailwindcss-animate": "^1.0.7",
     "zod": "^3.22.4"

diff --git a/ai-minter/pnpm-lock.yaml b/ai-minter/pnpm-lock.yaml
diff --git a/ai-minter/src/app/globals.css b/ai-minter/src/app/globals.css
@@ -1,71 +1,71 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
- 
+
 @layer base {
   :root {
     --background: 0 0% 100%;
     --foreground: 0 0% 3.9%;
 
     --card: 0 0% 100%;
     --card-foreground: 0 0% 3.9%;
- 
+
     --popover: 0 0% 100%;
     --popover-foreground: 0 0% 3.9%;
- 
+
     --primary: 0 0% 9%;
     --primary-foreground: 0 0% 98%;
- 
+
     --secondary: 0 0% 96.1%;
     --secondary-foreground: 0 0% 9%;
- 
+
     --muted: 0 0% 96.1%;
     --muted-foreground: 0 0% 45.1%;
- 
+
     --accent: 0 0% 96.1%;
     --accent-foreground: 0 0% 9%;
- 
+
     --destructive: 0 84.2% 60.2%;
     --destructive-foreground: 0 0% 98%;
 
     --border: 0 0% 89.8%;
     --input: 0 0% 89.8%;
     --ring: 0 0% 3.9%;
- 
+
     --radius: 0.5rem;
   }
- 
+
   .dark {
     --background: 0 0% 3.9%;
     --foreground: 0 0% 98%;
- 
+
     --card: 0 0% 3.9%;
     --card-foreground: 0 0% 98%;
- 
+
     --popover: 0 0% 3.9%;
     --popover-foreground: 0 0% 98%;
- 
+
     --primary: 0 0% 98%;
     --primary-foreground: 0 0% 9%;
- 
+
     --secondary: 0 0% 14.9%;
     --secondary-foreground: 0 0% 98%;
- 
+
     --muted: 0 0% 14.9%;
     --muted-foreground: 0 0% 63.9%;
- 
+
     --accent: 0 0% 14.9%;
     --accent-foreground: 0 0% 98%;
- 
+
     --destructive: 0 62.8% 30.6%;
     --destructive-foreground: 0 0% 98%;
- 
+
     --border: 0 0% 14.9%;
     --input: 0 0% 14.9%;
     --ring: 0 0% 83.1%;
   }
 }
- 
+
 @layer base {
   * {
     @apply border-border;
@@ -75,7 +75,7 @@
   }
 }
 
-.gradient { 
+.gradient {
 background: rgb(144,40,47);
 background: radial-gradient(circle, rgba(144,40,47,0.3) 0%, rgba(144,40,47,0.6) 0%, rgba(16,18,35,0.3730085784313726) 55%);
 }
@@ -147,4 +147,11 @@ background: radial-gradient(circle, rgba(144,40,47,0.3) 0%, rgba(144,40,47,0.6)
   100% {
     transform: translate(24px, 0);
   }
-}
+}
+
+.social-networks {
+  position: relative;
+  top: -3px;
+  display: flex;
+  gap: 4px;
+}
diff --git a/ai-minter/src/app/layout.tsx b/ai-minter/src/app/layout.tsx
@@ -2,6 +2,7 @@ import { AppProvider } from "@/components/Provider";
 import { Metadata } from "next";
 import { headers } from "next/headers";
 import "./globals.css";
+import { SocialMedias } from "@/components/Social";
 
 const extractSignMeta = (url: string): string | null => {
   const signMetaIndex = url.indexOf("signMeta=");
@@ -60,5 +61,9 @@ export default function RootLayout({
 }: {
   children: React.ReactNode;
 }) {
-  return <AppProvider> {children} </AppProvider>;
+  return (
+    <AppProvider>
+      <SocialMedias /> {children}
+    </AppProvider>
+  );
 }
diff --git a/ai-minter/src/components/Social.tsx b/ai-minter/src/components/Social.tsx
@@ -0,0 +1,59 @@
+// @ts-nocheck
+
+"use client";
+
+import GitHubButton from "react-github-btn";
+import {
+  FacebookIcon,
+  FacebookShareButton,
+  LinkedinIcon,
+  LinkedinShareButton,
+  TelegramIcon,
+  TelegramShareButton,
+  TwitterShareButton,
+  XIcon,
+} from "react-share";
+
+export const SocialMedias = () => {
+  const url = 'https://ai-minter.mintbase.xyz';
+  const title = "Mintbase Templates - AI Minter";
+
+  return (
+    <div className="relative pt-5 top-0 left-0  w-full h-[30px] z-50">
+      <div className="flex gap-2 justify-end	pr-4">
+        <GitHubButton
+          href="https://github.com/mintbase/templates/generate"
+          data-color-scheme="no-preference: light; light: light; dark: dark;"
+          data-size="large"
+          aria-label="Use this template mintbase/templates on GitHub"
+        >
+          Use this template
+        </GitHubButton>
+        <GitHubButton
+          href="https://github.com/mintbase/templates"
+          data-color-scheme="no-preference: dark; light: light; dark: dark;"
+          data-icon="octicon-star"
+          data-size="large"
+          aria-label="Star mintbase/templates on GitHub"
+        >
+          Star
+        </GitHubButton>{" "}
+        <div className="social-networks">
+          <FacebookShareButton url={url}>
+            <FacebookIcon size={24} round />
+          </FacebookShareButton>
+          <TwitterShareButton url={url} title={title}>
+            <XIcon size={24} round />
+          </TwitterShareButton>
+
+          <TelegramShareButton url={url} title={title}>
+            <TelegramIcon size={24} round />
+          </TelegramShareButton>
+          <LinkedinShareButton url={url}>
+            <LinkedinIcon size={24} round />
+          </LinkedinShareButton>
+        </div>
+      </div>
+    </div>
+  );
+};
diff --git a/ai-minter/src/server/replicate.ts b/ai-minter/src/server/replicate.ts
@@ -18,6 +18,7 @@ const replicate = () => {
           "https://api.replicate.com/v1/predictions/" + id,
           {
             headers: {
+              // get your REPLICATE Token on https://replicate.com/account/api-tokens
               Authorization: `Token ${process.env.REPLICATE_API_TOKEN}`,
               "Content-Type": "application/json",
             },
@@ -51,6 +52,7 @@ const replicate = () => {
           {
             method: "POST",
             headers: {
+              // get your REPLICATE Token on https://replicate.com/account/api-tokens
               Authorization: `Token ${process.env.REPLICATE_API_TOKEN}`,
               "Content-Type": "application/json",
             },