commit 007

kemalgencay · Jan 5, 2024 · 79b4225 · 79b4225
1 parent 1dac934
commit 79b4225
Show file tree

Hide file tree

Showing 4 changed files with 123 additions and 70 deletions.
diff --git a/components/Footer.tsx b/components/Footer.tsx
@@ -1,10 +1,71 @@
-export function Footer() {
+import BrandGithub from "https://deno.land/x/[email protected]/tsx/brand-github.tsx";
+
+export default function Footer() {
+  const menus = [
+    {
+      title: "Documentation",
+      children: [
+        { name: "Getting Started", href: "#" },
+        { name: "Guide", href: "#" },
+        { name: "API", href: "#" },
+        { name: "Showcase", href: "#" },
+        { name: "Pricing", href: "#" },
+      ],
+    },
+    {
+      title: "Community",
+      children: [
+        { name: "Forum", href: "#" },
+        { name: "Discord", href: "#" },
+      ],
+    },
+  ];
+
   return (
-    <footer>
-      <hr class="my-2" />
-      <p>Yakında...</p>
-    </footer>
+    <div class="bg-white flex flex-col md:flex-row w-full max-w-screen-lg gap-8 md:gap-16 px-8 py-8 text-sm">
+      <div class="flex-1">
+        <div class="flex items-center gap-1">
+          <div class="font-bold text-2xl">
+            Fresh
+          </div>
+        </div>
+        <div class="text-gray-500">
+          Full Stack Framework
+        </div>
+      </div>
+
+      {menus.map((item) => (
+        <div class="mb-4" key={item.title}>
+          <div class="font-bold">{item.title}</div>
+          <ul class="mt-2">
+            {item.children.map((child) => (
+              <li class="mt-2" key={child.name}>
+                <a
+                  class="text-gray-500 hover:text-gray-700"
+                  href={child.href}
+                >
+                  {child.name}
+                </a>
+              </li>
+            ))}
+          </ul>
+        </div>
+      ))}
+
+      <div class="text-gray-500 space-y-2">
+        <div class="text-xs">
+          Copyright © {new Date().getFullYear()} Kemal Gençay, <br />
+          All right reserved.
+        </div>
+
+        <a
+          href="https://github.com/kemalgencay/fresh-project"
+          class="inline-block hover:text-black"
+          aria-label="GitHub"
+        >
+          <BrandGithub aria-hidden="true" />
+        </a>
+      </div>
+    </div>
   );
 }
-import IconChevronLeft from "https://deno.land/x/[email protected]/tsx/chevron-left.tsx"
-import IconChevronRight from "https://deno.land/x/[email protected]/tsx/chevron-right.tsx"
diff --git a/components/Layout.tsx b/components/Layout.tsx
@@ -1,19 +1,21 @@
 // deno-lint-ignore-file
-import { Footer } from "./Footer.tsx";
+import Footer from "./Footer.tsx";
 
 export default function layouts({ children }: any) {
-    return (
-        <div>
-            <img src="/header1.jpg" />
+  return (
+    <div>
+      <img src="/header1.jpg" />
 
-            <nav class='tw w-full px-4 py-3 bg-yellow-800 text-white mb-10'>
-                <a class='tw mx-4' href="/">Ana sayfa</a>
-                <a class='tw mx-4' href="/hakkimda">Hakkımda</a>
-                <a class='tw mx-4' href="https://kemalblog.com" target="blank">Yazılar</a>
-                <a class='tw mx-4' href="/sozler">Sözler/Düşünceler</a>
-            </nav>
-            {children}
-            <Footer />
-        </div >
-    )
-}
+      <nav class="tw w-full px-4 py-3 bg-blue-800 text-white mb-10">
+        <a class="tw mx-4" href="/">Ana sayfa</a>
+        <a class="tw mx-4" href="/hakkimda">Hakkımda</a>
+        <a class="tw mx-4" href="https://kemalblog.com" target="blank">
+          Yazılar
+        </a>
+        <a class="tw mx-4" href="/sozler">Sözler/Düşünceler</a>
+      </nav>
+      {children}
+      <Footer />
+    </div>
+  );
+}
diff --git a/deno.json b/deno.json
@@ -9,17 +9,8 @@
     "preview": "deno run -A main.ts",
     "update": "deno run -A -r https://fresh.deno.dev/update ."
   },
-  "lint": {
-    "rules": {
-      "tags": [
-        "fresh",
-        "recommended"
-      ]
-    }
-  },
-  "exclude": [
-    "**/_fresh/*"
-  ],
+  "lint": { "rules": { "tags": ["fresh", "recommended"] } },
+  "exclude": ["**/_fresh/*"],
   "imports": {
     "$fresh/": "https://deno.land/x/[email protected]/",
     "preact": "https://esm.sh/[email protected]",
@@ -31,9 +22,6 @@
     "tailwindcss/plugin": "npm:/[email protected]/plugin.js",
     "$std/": "https://deno.land/[email protected]/"
   },
-  "compilerOptions": {
-    "jsx": "react-jsx",
-    "jsxImportSource": "preact"
-  },
+  "compilerOptions": { "jsx": "react-jsx", "jsxImportSource": "preact" },
   "nodeModulesDir": true
 }
diff --git a/routes/sozler.tsx b/routes/sozler.tsx
@@ -1,37 +1,39 @@
 import IconChevronRight from "https://deno.land/x/[email protected]/tsx/chevron-right.tsx";
-
+import Layout from "../components/Layout.tsx";
+<Layout>
 export default function Hero() {
-    return (
-        <div
-            class="w-full flex px-8 py-10 min-h-[24em] justify-center items-center flex-col gap-8 bg-cover bg-center bg-no-repeat bg-gray-100 rounded-xl text-white"
-            style="background-image:linear-gradient(rgba(0, 0, 40, 0.8),rgba(0, 0, 40, 0.8)), url('/gallery/hero-bg.webp');"
-        >
-            <div class="space-y-4 text-center">
-                <h1 class="text-4xl inline-block font-bold">Fresh Components Beta</h1>
-                <p class="text-xl max-w-lg text-blue-100">
-                    Fresh Components is a collection of components built with Preact and
-                    Tailwind CSS.
-                </p>
-            </div>
+  return (
+    <div
+      class="w-full flex px-8 py-10 min-h-[24em] justify-center items-center flex-col gap-8 bg-cover bg-center bg-no-repeat bg-gray-100 rounded-xl text-white"
+      style="background-image:linear-gradient(rgba(0, 0, 40, 0.8),rgba(0, 0, 40, 0.8)), url('/gallery/hero-bg.webp');"
+    >
+      <div class="space-y-4 text-center">
+        <h1 class="text-4xl inline-block font-bold">Fresh Components Beta</h1>
+        <p class="text-xl max-w-lg text-blue-100">
+          Fresh Components is a collection of components built with Preact and
+          Tailwind CSS.
+        </p>
+      </div>
 
-            <div class="flex flex-col md:flex-row items-center">
-                <a
-                    href="#"
-                    class="block mt-4 text-blue-600 cursor-pointer items-center group bg-white px-8 py-2 rounded-md hover:bg-blue-50 font-bold"
-                >
-                    Sign Up{" "}
-                </a>
-                <a
-                    href="#"
-                    class="block mt-4 transition-colors text-blue-400 cursor-pointer items-center group px-4 py-2 hover:text-blue-100"
-                >
-                    Documentation{" "}
-                    <IconChevronRight
-                        class="inline-block w-5 h-5 transition group-hover:translate-x-0.5"
-                        aria-hidden="true"
-                    />
-                </a>
-            </div>
-        </div>
-    );
+      <div class="flex flex-col md:flex-row items-center">
+        <a
+          href="#"
+          class="block mt-4 text-blue-600 cursor-pointer items-center group bg-white px-8 py-2 rounded-md hover:bg-blue-50 font-bold"
+        >
+          Sign Up{" "}
+        </a>
+        <a
+          href="#"
+          class="block mt-4 transition-colors text-blue-400 cursor-pointer items-center group px-4 py-2 hover:text-blue-100"
+        >
+          Documentation{" "}
+          <IconChevronRight
+            class="inline-block w-5 h-5 transition group-hover:translate-x-0.5"
+            aria-hidden="true"
+          />
+        </a>
+      </div>
+    </div>
+    </Layout>
+  );
 }