153 update copy in the footer

fetools-app/src/components/FontViewer/FontPreviewComponenets/FontNameInput.jsx

@@ -0,0 +1,89 @@
+import { useState, useEffect } from "react";
+import Select, { components } from "react-select";
+import GoogleFontButton from "./GoogleFontButton";
+
+const Option = (props) => (
+    <components.Option {...props} data-url={props.data.url} />
+);
+
+const FontNameInput = ({ font, handleFontChange }) => {
+    const [useGoogleFont, setUseGoogleFont] = useState(false);
+    const [googleFonts, setGoogleFonts] = useState([]);
+
+    const loadFont = (name, url) => {
+        const font = new FontFace(name, `url(${url})`, {
+            style: "normal",
+            weight: "400",
+        });
+        font.load().then((loadedFace) => {
+            document.fonts.add(loadedFace);
+        });
+    };
+
+    const fontFamilies = [
+        { value: "Arial", label: "Arial" },
+        { value: "Sans-serif", label: "Sans-serif" },
+        { value: "Courier New", label: "Courier New" },
+        { value: "Times New Roman", label: "Times New Roman" },
+        { value: "Verdana", label: "Verdana" },
+        { value: "Georgia", label: "Georgia" },
+        { value: "Impact", label: "Impact" },
+        { value: "Brush Script MT", label: "Brush Script MT" },
+        { value: "Tahoma", label: "Tahoma" },
+        { value: "Trebuchet MS", label: "Trebuchet MS" },
+    ];
+
+    const fetchGoogleFonts = async () => {
+        try {
+            const response = await fetch(
+                "https://www.googleapis.com/webfonts/v1/webfonts?key=AIzaSyBqgqqCwtuUfe308aXdbkr1gOA9hw9__RM"
+            );
+            const data = await response.json();
+            const fonts = data.items.map((item) => ({
+                value: item.family,
+                label: item.family,
+                url: item.files.regular?.replace("http", "https"),
+            }));
+            console.log(fonts);
+            setGoogleFonts(fonts);
+        } catch (error) {
+            console.error("Error fetching Google Fonts:", error);
+        }
+    };
+
+    useEffect(() => {
+        if (useGoogleFont) {
+            fetchGoogleFonts();
+        } else {
+            setGoogleFonts([]);
+        }
+    }, [useGoogleFont]);
+
+    return (
+        <div className="flex items-center w-full gap-4 space-x-4">
+            <div className="flex items-stretch gap-2">
+                <Select
+                    value={{ value: font.name, label: font.name }}
+                    onChange={(selectedOption) => {
+                        handleFontChange("name", selectedOption.value);
+                        useGoogleFont &&
+                            loadFont(selectedOption.value, selectedOption.url);
+                    }}
+                    options={useGoogleFont ? googleFonts : fontFamilies}
+                    styles={{
+                        control: (provided) => ({
+                            ...provided,
+                            width: "10rem",
+                        }),
+                    }}
+                    components={{ Option }}
+                />
+                <GoogleFontButton
+                    onClick={() => setUseGoogleFont(!useGoogleFont)}
+                />
+            </div>
+        </div>
+    );
+};
+
+export default FontNameInput;

fetools-app/src/components/PageLayout/Footer.jsx

@@ -1,55 +1,70 @@
-import { Link } from 'react-router-dom';
-import Icon from '../Icon';
-import logo from '../../assets/devexToolsLogoWhite.svg';
+import { Link } from "react-router-dom";
+import Icon from "../Icon";
+import logo from "../../assets/devexToolsLogoWhite.svg";
 
 export default function Footer() {
-  return (
-    <footer className="flex flex-col justify-between bg-[#2c2c2c] [&_a]:underline [&_a:hover]:text-white py-4 px-8 text-white max-sm:gap-8 max-sm:p-4 sm:gap-4 sm:p-8 xl:px-16">
-      <div className="flex justify-between">
-        <Link to="/">
-          <img src={logo} alt="devex.tools" className="w-[200px] h-[31px]" />
-        </Link>
+    return (
+        <footer className="flex flex-col justify-between bg-[#2c2c2c] [&_a]:underline [&_a:hover]:text-white py-4 px-8 text-white max-sm:gap-8 max-sm:p-4 sm:gap-4 sm:p-8 xl:px-16">
+            <div className="flex justify-between">
+                <Link to="/">
+                    <img
+                        src={logo}
+                        alt="devex.tools"
+                        className="w-[200px] h-[31px]"
+                    />
+                </Link>
 
-        <div className="flex h-8 w-8 items-center justify-center rounded-r-[.5rem] rounded-bl-[.5rem] bg-white text-primary">
-          <Icon
-            name="keyboard_arrow_up"
-            className="cursor-pointer"
-            onClick={goTopPage}
-          />
-        </div>
-      </div>
-      <div className="flex justify-center">
-        <div
-          style={{ textWrap: 'balance' }}
-          className="max-w-[48rem] xl:max-w-[60%] text-center xl:-mt-[3.5rem]"
-        >
-          <p className="mb-3">
-            Precision machined by{' '}
-            <a href="https://github.com/amansinghgill">@amansinghgill</a>,{' '}
-            <a href="https://github.com/david-nyc-pm">@david-nyc-pm</a>,{' '}
-            <a href="https://github.com/Greimil">@Greimil</a>,{' '}
-            <a href="https://github.com/imadrig">@imadrig</a>,{' '}
-            <a href="https://github.com/joekotvas">@joekotvas</a>,{' '}
-            <a href="https://github.com/olegklyufinskyy">@olegklyufinskyy</a>,
-            &amp; <a href="https://github.com/Stevensauro">@Stevensauro</a>.
-          </p>
-          <p>
-            <strong>Devex.tools</strong> is open source! Find us on{' '}
-            <a href="https://github.com/chingu-voyages/v47-tier2-team-17/">
-              GitHub
-            </a>
-            . Props to the <a href="https://chingu.io/">Chingu</a> {` `}
-            team for facilitating this voyage.
-          </p>
-        </div>
-      </div>
-    </footer>
-  );
+                <div className="flex h-8 w-8 items-center justify-center rounded-r-[.5rem] rounded-bl-[.5rem] bg-white text-primary">
+                    <Icon
+                        name="keyboard_arrow_up"
+                        className="cursor-pointer"
+                        onClick={goTopPage}
+                    />
+                </div>
+            </div>
+            <div className="flex justify-center">
+                <div
+                    style={{ textWrap: "balance" }}
+                    className="max-w-[48rem] xl:max-w-[60%] text-center xl:-mt-[3.5rem]"
+                >
+                    <p className="mb-3">
+                        Made by{" "}
+                        <a href="https://github.com/amansinghgill">
+                            @amansinghgill
+                        </a>
+                        ,{" "}
+                        <a href="https://github.com/david-nyc-pm">
+                            @david-nyc-pm
+                        </a>
+                        , <a href="https://github.com/Greimil">@Greimil</a>,{" "}
+                        <a href="https://github.com/imadrig">@imadrig</a>,{" "}
+                        <a href="https://github.com/joekotvas">@joekotvas</a>,{" "}
+                        <a href="https://github.com/olegklyufinskyy">
+                            @olegklyufinskyy
+                        </a>
+                        , &amp;{" "}
+                        <a href="https://github.com/Stevensauro">
+                            @Stevensauro
+                        </a>
+                        . Facilitated by <a href="https://chingu.io/">Chingu</a>
+                        .
+                    </p>
+                    <p>
+                        <strong>Devex.tools</strong> is open source! Find us on{" "}
+                        <a href="https://github.com/chingu-voyages/v47-tier2-team-17/">
+                            GitHub
+                        </a>
+                        .
+                    </p>
+                </div>
+            </div>
+        </footer>
+    );
 }
 
 function goTopPage() {
-  window.scrollTo({
-    top: 0,
-    behavior: 'smooth',
-  });
+    window.scrollTo({
+        top: 0,
+        behavior: "smooth",
+    });
 }