From 5eff349ac17532fe1ad4d988fb9fd4d3709f4395 Mon Sep 17 00:00:00 2001
From: Modupe Akanni <modupe775@gmail.com>
Date: Sun, 21 Jul 2024 14:50:49 +0100
Subject: [PATCH 1/3] fix pipeline

---
 src/components/common/blogCard/BlogCard.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/common/blogCard/BlogCard.tsx b/src/components/common/blogCard/BlogCard.tsx
index fc5ca2cb8..5f2b69014 100644
--- a/src/components/common/blogCard/BlogCard.tsx
+++ b/src/components/common/blogCard/BlogCard.tsx
@@ -27,7 +27,7 @@ const BlogCard = (properties: blogCardProperties) => {
           <CardHeader className="flex-auto sm:flex-1">
             <div
               className={clsx(
-                "bg-desaturatedBlue mb-[10px] flex h-[10px] w-fit px-[9px] py-[13px]",
+                "mb-[10px] flex h-[10px] w-fit bg-desaturatedBlue px-[9px] py-[13px]",
                 "items-center gap-1 rounded-full font-semibold",
               )}
             >
@@ -59,7 +59,7 @@ const BlogCard = (properties: blogCardProperties) => {
               </div>
               <div className="flex items-center gap-[15px] text-[12px] font-medium text-neutral-dark-1 sm:text-[16px]">
                 <p>{properties.timeOfReading} mins Read</p>
-                <p className="text-grey50 text-[30px]">&middot;</p>
+                <p className="text-[30px] text-grey50 text-[30px]">&middot;</p>
                 <p>{properties.date}</p>
               </div>
             </div>

From 87f3c988f4eda7b6a131f5aa5b3f7424a71971f9 Mon Sep 17 00:00:00 2001
From: Modupe Akanni <modupe775@gmail.com>
Date: Tue, 30 Jul 2024 12:36:02 +0100
Subject: [PATCH 2/3] feat: add data page

---
 .../settings/data-and-privacy/page.tsx        | 102 +++++++++++++++++-
 1 file changed, 99 insertions(+), 3 deletions(-)

diff --git a/src/app/dashboard/(user-dashboard)/settings/data-and-privacy/page.tsx b/src/app/dashboard/(user-dashboard)/settings/data-and-privacy/page.tsx
index db4d38750..dfd73041e 100644
--- a/src/app/dashboard/(user-dashboard)/settings/data-and-privacy/page.tsx
+++ b/src/app/dashboard/(user-dashboard)/settings/data-and-privacy/page.tsx
@@ -1,5 +1,101 @@
-const page = () => {
-  return <div>page</div>;
+"use client";
+
+import { useState } from "react";
+
+interface ToggleSwitchProperties {
+  label: string;
+  description: string;
+  apiEndpoint: string;
+}
+
+const ToggleSwitch: React.FC<ToggleSwitchProperties> = ({
+  label,
+  description,
+}) => {
+  const [enabled, setEnabled] = useState(false);
+
+  const handleToggle = async () => {
+    setEnabled(!enabled);
+  };
+
+  return (
+    <div className="mb-4 rounded-md border p-6 shadow">
+      <div className="mb-2 flex items-center justify-between">
+        <label className="text-2xl text-lg font-semibold">{label}</label>
+        <label className="relative inline-block h-8 w-14">
+          <input
+            type="checkbox"
+            checked={enabled}
+            onChange={handleToggle}
+            className="h-0 w-0 opacity-0"
+          />
+          <span
+            className={`absolute bottom-0 left-0 right-0 top-0 cursor-pointer rounded-full transition duration-300 ${
+              enabled ? "bg-primary" : "bg-subtle"
+            }`}
+          />
+          <span
+            className={`absolute transform rounded-full bg-white transition duration-300 ${
+              enabled ? "translate-x-6" : "translate-x-0"
+            } left-1 top-1 h-6 w-6`}
+          />
+        </label>
+      </div>
+      <p className="text-sm text-foreground">{description}</p>
+    </div>
+  );
+};
+
+const Page = () => {
+  return (
+    <div className="p-6">
+      <h1 className="mb-10 text-[28px] font-bold">Data & Privacy</h1>
+      <div className="mb-8">
+        <h2 className="text-2xl font-semibold">Choose how we use your data</h2>
+        <p>
+          Your data is important for helping improve and personalize HNG
+          Boilerplate, and you have control over how it is used. You can change
+          these settings anytime if you feel like playing a part in our
+          development. <span className="underline">Learn more.</span>
+        </p>
+      </div>
+      <ToggleSwitch
+        label="Profile Visibility"
+        description="Choose whether your profile is visible to everyone or just your contacts. Public profiles are viewable by all, making it easier to connect with new people. Private profiles are only visible to those you approve, giving you control over your information."
+        apiEndpoint="/api/toggle-profile-visibility"
+      />
+      <ToggleSwitch
+        label="Share Data with Partners"
+        description="Allow us to share your data with trusted partners for personalized promotions and offers. This helps us provide you with relevant content, discounts, and services tailored to your interests."
+        apiEndpoint="/api/toggle-share-data"
+      />
+      <ToggleSwitch
+        label="Receive Email Updates"
+        description="Opt in to receive updates on the latest features, exciting promotions, and important news directly to your email. Stay informed and take advantage of exclusive offers and updates designed to enhance your experience with us."
+        apiEndpoint="/api/toggle-email-updates"
+      />
+      <ToggleSwitch
+        label="Enable Two-Factor Authentication"
+        description="Enhance the security of your account by enabling Two-Factor Authentication (2FA). This feature adds an extra layer of protection by requiring not only your password but also a second form of verification, such as a code sent to your mobile device or generated by an authentication app. Enabling 2FA significantly reduces the risk of unauthorized access to your account, ensuring that only you can log in, even if someone else has your password."
+        apiEndpoint="/api/toggle-2fa"
+      />
+      <ToggleSwitch
+        label="Use Data Encryption"
+        description="Enable data encryption to protect your information from unauthorized access. By turning on this feature, all data transmitted between your device and our servers is encrypted, making it virtually impossible for hackers to intercept and read your data. This ensures that your personal information, including login credentials, messages, and other sensitive data, is kept secure and private."
+        apiEndpoint="/api/toggle-encryption"
+      />
+      <ToggleSwitch
+        label="Allow Analytics"
+        description="Enable third-party analytics services to help us gain insights into user behavior and improve our app's performance. By allowing these services, we can collect and analyze data on how you interact with the app, such as which features you use most, how you navigate through the interface, and where you might encounter issues. This information is crucial for us to identify trends, enhance user experience, and make data-driven decisions to optimize the app’s functionality and usability."
+        apiEndpoint="/api/toggle-analytics"
+      />
+      <ToggleSwitch
+        label="Personalized Ads"
+        description="Allow us to show you personalized ads based on your interests and browsing behavior. By enabling this feature, you consent to the use of data collected from your interactions within the app and across other platforms to deliver ads that are more relevant to you."
+        apiEndpoint="/api/toggle-ads"
+      />
+    </div>
+  );
 };
 
-export default page;
+export default Page;

From 4fbd6f0851478976044ec8e12d180886ad6f9632 Mon Sep 17 00:00:00 2001
From: Matthew Ameh <matthewameh007@gmail.com>
Date: Tue, 30 Jul 2024 13:27:17 +0100
Subject: [PATCH 3/3] add side-edit-bar

---
 .../[templateId]/page.tsx                     |  2 +-
 .../_components/AddLogo.tsx                   |  2 +-
 .../_components/ImageBody.tsx                 |  2 +-
 .../_components/SideEditNav.tsx               | 26 +++++++++++++++++++
 4 files changed, 29 insertions(+), 3 deletions(-)
 create mode 100644 src/app/dashboard/(admin)/admin/email/edit-in-buit-templates/_components/SideEditNav.tsx

diff --git a/src/app/dashboard/(admin)/admin/email/edit-in-buit-templates/[templateId]/page.tsx b/src/app/dashboard/(admin)/admin/email/edit-in-buit-templates/[templateId]/page.tsx
index 1a807af4a..ec3fe4e30 100644
--- a/src/app/dashboard/(admin)/admin/email/edit-in-buit-templates/[templateId]/page.tsx
+++ b/src/app/dashboard/(admin)/admin/email/edit-in-buit-templates/[templateId]/page.tsx
@@ -30,7 +30,7 @@ export default function page() {
         </div>
       </div>
       <div className="mt-12 flex items-center sm:mt-20 md:ml-4 lg:mb-[213px] lg:ml-[89px] lg:mt-[156px]">
-        <div className="h-40 w-full">
+        <div className="w-full">
           {/* YOUR EDIT TEMPLATE COMPONENTS GOES HERE ACCORRDING  */}
           {/* CREATE A FLEX CONTAINER TO HOUSE THE TEMPLATE AREA AND THE SIDEBAR ICONS  */}
         </div>
diff --git a/src/app/dashboard/(admin)/admin/email/edit-in-buit-templates/_components/AddLogo.tsx b/src/app/dashboard/(admin)/admin/email/edit-in-buit-templates/_components/AddLogo.tsx
index 77a457a6b..4312fb772 100644
--- a/src/app/dashboard/(admin)/admin/email/edit-in-buit-templates/_components/AddLogo.tsx
+++ b/src/app/dashboard/(admin)/admin/email/edit-in-buit-templates/_components/AddLogo.tsx
@@ -20,7 +20,7 @@ const AddLogo: React.FC = () => {
   };
 
   return (
-    <div className="h-52 w-4/5 rounded-sm border bg-white p-4 shadow-md hover:border-orange-500">
+    <div className="h-52 w-full rounded-sm border bg-white p-4 shadow-md hover:border-orange-500 md:w-4/5">
       <label className="flex flex-col items-center">
         <div className="mb-4 flex h-44 w-48 cursor-pointer items-center justify-center bg-gray-50">
           {selectedImage ? (
diff --git a/src/app/dashboard/(admin)/admin/email/edit-in-buit-templates/_components/ImageBody.tsx b/src/app/dashboard/(admin)/admin/email/edit-in-buit-templates/_components/ImageBody.tsx
index 6cc7f5427..b059040ad 100644
--- a/src/app/dashboard/(admin)/admin/email/edit-in-buit-templates/_components/ImageBody.tsx
+++ b/src/app/dashboard/(admin)/admin/email/edit-in-buit-templates/_components/ImageBody.tsx
@@ -20,7 +20,7 @@ const ImageBody: React.FC = () => {
   };
 
   return (
-    <div className="h-96 w-3/5 rounded-sm border bg-white shadow-md hover:border-orange-500">
+    <div className="mt-4 h-96 w-full rounded-sm border bg-white shadow-md hover:border-orange-500 md:w-3/5">
       <label className="flex flex-col items-center">
         <div className="flex h-48 w-full cursor-pointer items-center justify-center bg-gray-50">
           {selectedImage ? (
diff --git a/src/app/dashboard/(admin)/admin/email/edit-in-buit-templates/_components/SideEditNav.tsx b/src/app/dashboard/(admin)/admin/email/edit-in-buit-templates/_components/SideEditNav.tsx
new file mode 100644
index 000000000..b50ed7b3b
--- /dev/null
+++ b/src/app/dashboard/(admin)/admin/email/edit-in-buit-templates/_components/SideEditNav.tsx
@@ -0,0 +1,26 @@
+import { ArrowDown, ArrowUp, Copy, Delete, Plus } from "lucide-react";
+import React from "react";
+
+const SideEditNav: React.FC = () => {
+  return (
+    <nav className="flex-1 space-y-1">
+      <button className="flex items-center rounded-md border border-slate-100 p-3 text-left hover:bg-gray-200">
+        <ArrowUp className="h-3 w-3" />
+      </button>
+      <button className="flex items-center rounded-md border border-slate-100 p-3 text-left hover:bg-gray-200">
+        <ArrowDown className="h-3 w-3" />
+      </button>
+      <button className="flex items-center rounded-md border border-slate-100 p-3 text-left hover:bg-gray-200">
+        <Copy className="h-3 w-3" />
+      </button>
+      <button className="flex items-center rounded-md border border-slate-100 p-3 text-left hover:bg-gray-200">
+        <Delete className="h-3 w-3" />
+      </button>
+      <button className="flex items-center rounded-md border border-slate-100 p-3 text-left hover:bg-gray-200">
+        <Plus className="h-3 w-3" />
+      </button>
+    </nav>
+  );
+};
+
+export default SideEditNav;