feat: add recommended tools section

+ footer
dotRarufu · Mar 27, 2024 · 6be5f48 · 6be5f48
1 parent 606bc89
commit 6be5f48
Show file tree

Hide file tree

Showing 4 changed files with 75 additions and 3 deletions.
diff --git a/public/realtime-colors-logo.png b/public/realtime-colors-logo.png
diff --git a/public/typescale-logo.jpg b/public/typescale-logo.jpg
diff --git a/src/App.tsx b/src/App.tsx
@@ -13,6 +13,7 @@ import Settings from "./components/Settings";
 import { defaultFactors } from "./defaultFactors";
 import { toastSettings } from "./toastSettings";
 import Values from "./components/Values";
+import Tools from "./components/Tools";
 
 const App = () => {
   const [factor, setFactor] = useState<Factor>([10, 40]);
@@ -68,7 +69,7 @@ const App = () => {
 
   return (
     <GlobalContext.Provider value={globalContextValues}>
-      <div className="sm:p-0 mx-auto max-w-[30rem] p-[1rem] sm:py-[4rem]">
+      <div className="sm:p-0 mx-auto max-w-[32.5rem] p-[1rem] sm:py-[4rem]">
         <Toaster toastOptions={toastSettings} />
         <Header />
         <main className="flex flex-col gap-[2rem]">
@@ -78,10 +79,20 @@ const App = () => {
           <Values />
           <Difference />
           <About />
+          <Tools />
         </main>
 
-        <footer className="my-[2rem] text-tertiary-text">
-          <p>v.0.2.1</p>
+        <footer className="mb-[1rem] mt-[8rem] flex flex-col text-center text-tertiary-text">
+          <p>v.0.4.0</p>
+          <p>
+            by{" "}
+            <a
+              className="transition-colors hover:text-primary-text hover:underline"
+              href="https://github.com/dotRarufu/"
+            >
+              dotRarufu
+            </a>
+          </p>
         </footer>
       </div>
     </GlobalContext.Provider>

diff --git a/src/components/Tools.tsx b/src/components/Tools.tsx
@@ -0,0 +1,61 @@
+import { motion } from "framer-motion";
+import { colors } from "../utils/theme";
+
+const realtimeColors = "https://www.realtimecolors.com";
+const typescale = "https://typescale.com/";
+
+const Tools = () => {
+  return (
+    <motion.div
+      layout="position"
+      className="flex flex-col sm:flex-row sm:items-center"
+    >
+      <h2 className="mb-[0.5rem] w-fit min-w-[8rem] pr-[2rem] text-secondary-text sm:mb-[0]">
+        More tools
+      </h2>
+      <ul className="flex w-full flex-wrap gap-x-[1rem] gap-y-[0.5rem]">
+        <motion.li
+          whileHover={{
+            backgroundColor: colors["primary-color-500"],
+          }}
+          className="cursor-pointer rounded-inner border border-primary-color-700 px-[0.5rem] py-[0.5rem]"
+        >
+          <a
+            href={realtimeColors}
+            target="_blank"
+            className="flex items-center gap-[0.5rem]"
+          >
+            <img
+              src="/realtime-colors-logo.png"
+              alt="Realtime Colors"
+              className="aspect-square w-[1.5rem]"
+            />
+            Realtime Colors
+          </a>
+        </motion.li>
+
+        <motion.li
+          whileHover={{
+            backgroundColor: colors["primary-color-500"],
+          }}
+          className="cursor-pointer rounded-inner border border-primary-color-700 px-[0.5rem] py-[0.5rem]"
+        >
+          <a
+            href={typescale}
+            target="_blank"
+            className="flex items-center gap-[0.5rem]"
+          >
+            <img
+              src="/typescale-logo.jpg"
+              alt="Typescale"
+              className="aspect-square w-[1.5rem] rounded-inner"
+            />
+            Typescale
+          </a>
+        </motion.li>
+      </ul>
+    </motion.div>
+  );
+};
+
+export default Tools;