Settings page

src/app/dashboard/components/SettingsButton.tsx

@@ -0,0 +1,51 @@
+import Image from "next/image";
+
+type ButtonType = "button" | "submit" | "reset";
+
+interface IconThemes {
+    dark: string; 
+    light: string
+}
+
+/* Componente criado para abranger botões adicionais */
+
+const SettingsButton = ({
+
+    type = "button",
+    children,
+    onClick,
+    srcs,
+    theme
+}: {
+    type?: ButtonType;
+    children?: React.ReactElement;
+    onClick?: React.MouseEventHandler<HTMLButtonElement>;
+    srcs: IconThemes,
+    theme: string
+
+}) => {
+
+    return (
+
+        <button
+        onClick={onClick}
+        type={type}
+        className={`w-full bg-white hover:bg-gradient-to-tr from-white to-neutral-200 p-5 border border-opacity-35 border-black rounded-2xl 
+                    dark:bg-gradient-to-t dark:from-neutral-900 dark:to-neutral-700 dark:border-white dark:border-opacity-35`}>
+
+            <div className="flex items-start gap-x-5">
+
+                <div className="max-h-full py-1">
+                    <Image src={theme == "dark" ? srcs.dark : srcs.light} width={18} height={18} alt=""/>
+                </div>
+                {children}
+                <div className="max-h-full py-2">
+                    <Image src={theme == "dark" ? "/darkSettingsArrow.png" : "/lightSettingsArrow.png"} width={10} height={18} alt=""/>
+                </div>
+
+            </div>
+        </button>
+    )
+}
+
+export default SettingsButton

src/app/dashboard/settings/page.tsx

@@ -1,5 +1,50 @@
+"use client"
+
+import { useSelector } from "react-redux";
+import SettingsButton from "../components/SettingsButton";
+import { Poppins } from "next/font/google";
+
+const poppinsLight = Poppins({ weight: "300", subsets: ["latin"] });
+const poppinsNormal = Poppins({ weight: "400", subsets: ["latin"] });
+
 const SettingsPage = () => {
-    return <div>SettingsPage</div>;
+
+    const theme = useSelector(
+        (state: {
+            theme: {
+                value: string;
+            };
+        }) => state.theme.value
+    )
+
+    return (
+        /* Estilização do campo externo em volta dos botões */
+        <div className="w-full h-full flex flex-col gap-y-10 p-10 text-black dark:text-white bg-white dark:bg-neutral-800">
+
+        <SettingsButton srcs={{dark: "/darkSettingsTerms.png", light: "/lightSettingsTerms.png"}} theme={theme}>  
+
+            <div className="grow max-h-full font-sans text-start">
+                <div className={`text-xl ${poppinsLight.className}`}>Terms and Conditions</div>
+                <div className={`text-base text-black text-opacity-50 dark:text-white dark:text-opacity-75 ${poppinsNormal.className}`}>
+                    Rules and guidelines for using a service, detailing user rights and responsibilities in a legally binding agreement.
+                </div>
+            </div>
+
+        </SettingsButton>
+
+        <SettingsButton srcs={{dark: "/darkSettingsPrivacy.png", light: "/lightSettingsPrivacy.png"}} theme={theme}> 
+
+            <div className="grow max-h-full font-sans text-start">
+                <div className={`text-xl ${poppinsLight.className}`}>Privacy Policy</div>
+                <div className={`text-base text-black text-opacity-50 dark:text-white dark:text-opacity-75 ${poppinsNormal.className}`}>
+                    How we collect, use, and protect your personal information.
+                </div>
+            </div>
+
+        </SettingsButton>
+
+        </div>
+    )
 };
 
 export default SettingsPage;