Merge pull request #20 from Luancss/develop

Button on header and information on footer
Luancss · Feb 18, 2025 · 443cbc2 · 443cbc2
2 parents 3e0165b + bb86601
commit 443cbc2
Show file tree

Hide file tree

Showing 4 changed files with 88 additions and 38 deletions.
diff --git a/next.config.ts b/next.config.ts
@@ -1,7 +1,13 @@
-import type { NextConfig } from "next";
-
-const nextConfig: NextConfig = {
-  /* config options here */
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+  images: {
+    remotePatterns: [
+      {
+        protocol: "https",
+        hostname: "avatars.githubusercontent.com",
+      },
+    ],
+  },
 };
 
-export default nextConfig;
+module.exports = nextConfig;
diff --git a/src/app/(root)/_components/Header.tsx b/src/app/(root)/_components/Header.tsx
@@ -8,6 +8,7 @@ import { ThemeSelector } from "./ThemeSelector";
 import { LanguageSelector } from "./LanguageSelector";
 import { RunButton } from "./RunButton";
 import { HeaderProfileBtn } from "./HeaderProfileBtn";
+import { StarGithub } from "./githubBtn";
 
 export async function Header() {
   const convex = new ConvexHttpClient(process.env.NEXT_PUBLIC_CONVEX_URL!);
@@ -45,7 +46,7 @@ export async function Header() {
               </span>
             </div>
           </Link>
-          <nav className="flex items-center space-x-1">
+          <nav className="flex items-center space-x-3">
             <Link
               href="/snippets"
               className="relative group flex items-center gap-2 px-4 py-1.5 rounded-lg text-gray-300 bg-gray-800/50 
@@ -63,16 +64,17 @@ export async function Header() {
                 Snippets
               </span>
             </Link>
+            <StarGithub />
           </nav>
         </div>
 
         <div className="flex items-center gap-4">
           <div className="flex items-center gap-3">
             <ThemeSelector />
-            <LanguageSelector hasAccess={Boolean(convexUser?.isPro)} />
+            <LanguageSelector hasAccess={true} />
           </div>
 
-          {!convexUser?.isPro && (
+          {/* {!convexUser?.isPro && (
             <Link
               href="/pricing"
               className="flex items-center gap-2 px-4 py-1.5 rounded-lg border border-amber-500/20 hover:border-amber-500/40 bg-gradient-to-r from-amber-500/10 
@@ -84,7 +86,7 @@ export async function Header() {
                 Pro
               </span>
             </Link>
-          )}
+          )} */}
 
           <SignedIn>
             <RunButton />

diff --git a/src/app/(root)/_components/githubBtn.tsx b/src/app/(root)/_components/githubBtn.tsx
@@ -0,0 +1,52 @@
+import Link from "next/link";
+
+export const StarGithub = () => {
+  return (
+    <Link
+      href="https://github.com/Luancss/next15-code-craft"
+      className="relative group flex items-center gap-2 px-4 py-1.5 rounded-lg text-gray-300 bg-gray-800/50 
+                hover:bg-blue-500/10 border border-gray-800 hover:border-blue-500/50 transition-all duration-300 shadow-lg overflow-hidden"
+      target="_blank"
+    >
+      <div
+        className="absolute inset-0 bg-gradient-to-r from-blue-500/10 
+                to-purple-500/10 opacity-0 group-hover:opacity-100 transition-opacity"
+      />
+      <svg
+        className="mr-2 text-white"
+        strokeLinejoin="round"
+        strokeLinecap="round"
+        strokeWidth="2"
+        stroke="currentColor"
+        fill="none"
+        viewBox="0 0 24 24"
+        height="18"
+        width="18"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path d="M15 22v-4a4.8 4.8 0 0 0-1-3.5c3 0 6-2 6-5.5.08-1.25-.27-2.48-1-3.5.28-1.15.28-2.35 0-3.5 0 0-1 0-3 1.5-2.64-.5-5.36-.5-8 0C6 2 5 2 5 2c-.3 1.15-.3 2.35 0 3.5A5.403 5.403 0 0 0 4 9c0 3.5 3 5.5 6 5.5-.39.49-.68 1.05-.85 1.65-.17.6-.22 1.23-.15 1.85v4"></path>
+        <path d="M9 18c-4.51 2-5-2-7-2"></path>
+      </svg>{" "}
+      <span
+        className="text-sm font-medium relative z-10 group-hover:text-white
+                 transition-colors"
+      >
+        Star on GitHub
+      </span>
+      <svg
+        className="text-yellow-500"
+        strokeLinejoin="round"
+        strokeLinecap="round"
+        strokeWidth="2"
+        stroke="currentColor"
+        fill="none"
+        viewBox="0 0 24 24"
+        height="18"
+        width="18"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon>
+      </svg>
+    </Link>
+  );
+};
diff --git a/src/components/Footer.tsx b/src/components/Footer.tsx
@@ -1,36 +1,26 @@
-import { Blocks } from "lucide-react";
+import Image from "next/image";
 import Link from "next/link";
 
 function Footer() {
   return (
-    <footer className="relative border-t border-gray-800/50 mt-auto">
-      <div className="absolute inset-x-0 -top-px h-px bg-gradient-to-r from-transparent via-gray-900 to-transparent" />
-      <div className="max-w-7xl mx-auto px-4 py-8">
-        <div className="flex flex-col md:flex-row items-center justify-between gap-4">
-          <div className="flex items-center gap-2 text-gray-400">
-            <Blocks className="size-5" />
-            <span>Built for developers, by developers</span>
-          </div>
-          <div className="flex items-center gap-6">
-            <Link
-              href="/support"
-              className="text-gray-400 hover:text-gray-300 transition-colors"
-            >
-              Support
-            </Link>
-            <Link
-              href="/privacy"
-              className="text-gray-400 hover:text-gray-300 transition-colors"
-            >
-              Privacy
-            </Link>
-            <Link
-              href="/terms"
-              className="text-gray-400 hover:text-gray-300 transition-colors"
-            >
-              Terms
-            </Link>
-          </div>
+    <footer className="border-t border-gray-800/50 w-full flex items-center justify-center">
+      <div className="mx-auto px-4 py-8">
+        <div className="flex items-center gap-2 text-gray-400">
+          <Image
+            alt="Luancss"
+            src="https://avatars.githubusercontent.com/u/104950187?v=4"
+            width={50}
+            height={50}
+            className="rounded-full"
+          />
+          <p className="text-gray-300">Built for</p>
+          <Link
+            href="https://github.com/Luancss"
+            target="_blank"
+            className="text-zinc-400 underline"
+          >
+            Luancss.
+          </Link>
         </div>
       </div>
     </footer>