feat: fetch file from url + more

src/app/(tools)/layout.tsx

@@ -1,26 +1,16 @@
 import Link from "next/link";
 
+import { Footer } from "@/components/shared/footer";
+import { ArrowLeftIcon } from "@/components/shared/icons";
+
 function BackButton() {
   return (
     <div className="fixed left-4 top-4 z-50">
       <Link
         href="/"
-        className="flex items-center gap-2 rounded-md px-3 py-1 text-sm font-medium text-gray-400 transition-colors duration-200 hover:text-gray-200"
+        className="flex items-center gap-2 px-3 py-1 text-sm font-medium text-gray-500 transition-colors duration-200 hover:text-gray-200"
       >
-        <svg
-          xmlns="http://www.w3.org/2000/svg"
-          className="h-4 w-4"
-          fill="none"
-          viewBox="0 0 24 24"
-          stroke="currentColor"
-        >
-          <path
-            strokeLinecap="round"
-            strokeLinejoin="round"
-            strokeWidth={2}
-            d="M10 19l-7-7m0 0l7-7m-7 7h18"
-          />
-        </svg>
+        <ArrowLeftIcon strokeWidth={2.5} />
         Back
       </Link>
     </div>
@@ -33,21 +23,12 @@ export default function ToolsLayout({
   children: React.ReactNode;
 }) {
   return (
-    <div className="flex min-h-screen flex-col justify-between p-8 font-[family-name:var(--font-geist-sans)] sm:p-20">
+    <div className="flex min-h-screen flex-col justify-between px-8 pb-4 font-[family-name:var(--font-geist-sans)]">
       <BackButton />
-      <main className="flex flex-grow flex-col items-center justify-center">
+      <main className="mt-[60px] flex grow flex-col items-center justify-center">
         {children}
       </main>
-      <footer className="mt-8 text-center text-sm text-gray-500">
-        <a
-          href="https://github.com/t3dotgg/quickpic"
-          target="_blank"
-          rel="noopener noreferrer"
-          className="hover:underline"
-        >
-          View on GitHub
-        </a>
-      </footer>
+      <Footer />
     </div>
   );
 }

src/app/(tools)/rounded-border/page.tsx

@@ -6,5 +6,5 @@ export const metadata = {
 };
 
 export default function RoundedToolPage() {
-  return <RoundedTool />;
+  return <RoundedTool title={metadata.title} />;
 }