feat/HNG-118-external-static-pages-footer-component

app/components/BlogCards.tsx

@@ -1,6 +1,6 @@
-import React from "react";
+import type { FC } from "react";
 
-interface BlogCardProps {
+interface BlogCardProperties {
   title: string;
   description: string;
   date: string;
@@ -12,7 +12,7 @@ interface BlogCardProps {
   link: string;
 }
 
-const BlogCard: React.FC<BlogCardProps> = ({
+const BlogCard: FC<BlogCardProperties> = ({
   title,
   description,
   date,
@@ -24,31 +24,31 @@ const BlogCard: React.FC<BlogCardProps> = ({
   link,
 }) => {
   return (
-    <div className="max-w-sm lg:max-w-full lg:flex lg:flex-row rounded overflow-hidden shadow-lg m-4">
-      <img className="w-full lg:w-1/3 lg:order-2" src={blogImage} alt={title} />
-      <div className="p-4 lg:w-2/3 lg:order-1">
-        <div className="flex items-center mb-2">
-          <span className="inline-block w-3 h-3 rounded-full bg-gray-400 mr-2"></span>
+    <div className="m-4 max-w-sm overflow-hidden rounded shadow-lg lg:flex lg:max-w-full lg:flex-row">
+      <img className="w-full lg:order-2 lg:w-1/3" src={blogImage} alt={title} />
+      <div className="p-4 lg:order-1 lg:w-2/3">
+        <div className="mb-2 flex items-center">
+          <span className="mr-2 inline-block h-3 w-3 rounded-full bg-gray-400"></span>
           <span className="text-sm font-semibold text-gray-700">{tag}</span>
         </div>
         <div>
           <a href={link} className="text-black hover:text-blue-800">
-            <h3 className="font-bold text-xl mb-2">{title}</h3>
+            <h3 className="mb-2 text-xl font-bold">{title}</h3>
           </a>
-          <p className="text-gray-700 text-base mb-4">{description}</p>
+          <p className="mb-4 text-base text-gray-700">{description}</p>
         </div>
-        <div className="flex justify-between text-gray-500 text-sm mb-4">
+        <div className="mb-4 flex justify-between text-sm text-gray-500">
           <span>{date}</span>
           <span>{timeOfReading} mins Read</span>
         </div>
         <div className="flex items-center">
           <img
-            className="w-10 h-10 rounded-full mr-4"
+            className="mr-4 h-10 w-10 rounded-full"
             src={authorProfilePicture}
             alt={authorName}
           />
           <div className="text-sm">
-            <p className="text-gray-900 leading-none">{authorName}</p>
+            <p className="leading-none text-gray-900">{authorName}</p>
           </div>
         </div>
       </div>

app/components/SuperAdminSideBar/SideNarBarItems.ts

@@ -0,0 +1,123 @@
+import type { LinkProps } from "@remix-run/react";
+
+export type MenuItem = {
+  name: string;
+  icon?: string;
+  to: LinkProps["to"];
+  rightIcon?: string;
+  subItems?: SubMenuItem[];
+};
+
+export type SubMenuItem = {
+  name: string;
+  icon: string;
+  to: LinkProps["to"];
+};
+
+export const mainMenuItems: MenuItem[] = [
+  { name: "Dashboard", icon: "/icons/dashboard.png", to: "/admin/dashboard" },
+  { name: "Products", icon: "/icons/products.png", to: "/admin/products" },
+  { name: "Users", icon: "/icons/users.png", to: "/admin/users" },
+  { name: "Email Template", icon: "/icons/email.png", to: "/admin/email" },
+  {
+    name: "Squeeze Pages",
+    icon: "/icons/squeeze.png",
+    to: "/admin/squeeze-pages",
+  },
+  {
+    name: "Waitlist Page",
+    icon: "/icons/waitlist.png",
+    to: "/admin/waitlist-page",
+  },
+  { name: "Settings", icon: "/icons/settings.png", to: "#" },
+];
+
+export const settingsMenuItems: MenuItem[] = [
+  { name: "Profile", to: "/admin/settings/profile" },
+  {
+    name: "General",
+    icon: "/icons/general.png",
+    to: "/admin/settings/general",
+  },
+  {
+    name: "Account Security",
+    icon: "/icons/account.png",
+    to: "/admin/settings/account",
+    subItems: [
+      {
+        name: "Privacy Settings",
+        icon: "/icons/privacy.png",
+        to: "/admin/settings/account/privacy",
+      },
+      {
+        name: "Connected Accounts",
+        icon: "/icons/connected.png",
+        to: "/admin/settings/account/connected",
+      },
+    ],
+  },
+  {
+    name: "Notification",
+    icon: "/icons/notification.png",
+    to: "/admin/settings/notification",
+    subItems: [
+      {
+        name: "Privacy Settings",
+        icon: "/icons/privacy.png",
+        to: "/admin/settings/notification/privacy",
+      },
+      {
+        name: "Connected Account",
+        icon: "/icons/connected.png",
+        to: "/admin/settings/notification/connected",
+      },
+      {
+        name: "Two Factor Authentication",
+        icon: "/icons/two.png",
+        to: "/admin/settings/notification/Auth",
+      },
+      {
+        name: "Password Change",
+        icon: "/icons/password.png",
+        to: "/admin/settings/notification/password",
+      },
+    ],
+  },
+  {
+    name: "Payment Information",
+    icon: "/icons/payment.png",
+    rightIcon: "/icons/accordion.png",
+    to: "/admin/settings/payment",
+  },
+  {
+    name: "Data and Privacy",
+    icon: "/icons/data.png",
+    to: "/admin/settings/privacy",
+  },
+  {
+    name: "Language and Region",
+    icon: "/icons/region.png",
+    to: "/admin/settings/language",
+  },
+];
+
+export const organizationItems: MenuItem[] = [
+  {
+    name: "Members",
+    icon: "/icons/members.png",
+    rightIcon: "/icons/accordion.png",
+    to: "/admin/settings/organization/members",
+  },
+  {
+    name: "Roles and Permissions",
+    icon: "/icons/roles.png",
+    rightIcon: "/icons/accordion.png",
+    to: "/admin/settings/organization/roles",
+  },
+  {
+    name: "Integration",
+    icon: "/icons/integration.png",
+    rightIcon: "/icons/accordion.png",
+    to: "/admin/settings/organization/integration",
+  },
+];

app/components/SuperAdminSideBar/SuperAdminSideNavBar.tsx

@@ -0,0 +1,152 @@
+import { NavLink } from "@remix-run/react";
+import { useState } from "react";
+
+import {
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger,
+} from "~/components/ui/accordion";
+import {
+  mainMenuItems,
+  organizationItems,
+  settingsMenuItems,
+  type MenuItem,
+} from "./SideNarBarItems";
+
+export function AdminSideNavBar() {
+  const [isSettingsOpen, setIsSettingsOpen] = useState(false);
+
+  const renderMenuItem = (item: MenuItem) => (
+    <NavLink
+      key={item.name}
+      to={item.to}
+      className={({ isActive }) =>
+        `flex items-center justify-between rounded-md p-2 ${isActive ? "bg-[#F97316] text-white" : "text-black hover:bg-[#F97316] hover:text-white"} `
+      }
+    >
+      <div className="flex items-center">
+        {item.icon && (
+          <img src={item.icon} alt={item.name} className="mr-2 h-5 w-5" />
+        )}
+        {item.name}
+      </div>
+      {item.rightIcon && (
+        <img src={item.rightIcon} alt="right icon" className="h-5 w-5" />
+      )}
+    </NavLink>
+  );
+
+  return (
+    <nav className="h-screen w-64 bg-[#FDFDFD]">
+      {!isSettingsOpen && (
+        <div className="flex items-center p-4">
+          <img src="/icons/shadcn.png" alt="Logo" className="mr-2 h-8 w-8" />
+          <h1 className="text-xl font-bold">Shadcn</h1>
+        </div>
+      )}
+
+      {isSettingsOpen ? (
+        <div className="p-4">
+          <button
+            onClick={() => setIsSettingsOpen(false)}
+            className="mb-4 flex items-center rounded-md p-2 hover:bg-[#F97316] hover:text-white"
+          >
+            <img
+              src="/icons/settingsback.png"
+              alt="Back"
+              className="mr-2 h-5 w-5"
+            />
+            Settings
+          </button>
+
+          <div className="mb-4">
+            {settingsMenuItems.map((item) => (
+              <div key={item.name}>
+                {item.subItems ? (
+                  <Accordion type="single" collapsible>
+                    <AccordionItem value={item.name}>
+                      <AccordionTrigger className="flex w-full items-center justify-between rounded-md p-2 hover:bg-[#F97316] hover:text-white">
+                        <div className="flex items-center">
+                          {item.icon && (
+                            <img
+                              src={item.icon}
+                              alt={item.name}
+                              className="mr-2 h-5 w-5"
+                            />
+                          )}
+                          {item.name}
+                        </div>
+                        {item.rightIcon && (
+                          <img
+                            src={item.rightIcon}
+                            alt="right icon"
+                            className="h-5 w-5"
+                          />
+                        )}
+                      </AccordionTrigger>
+                      <AccordionContent>
+                        {item.subItems.map((subItem) =>
+                          renderMenuItem(subItem),
+                        )}
+                      </AccordionContent>
+                    </AccordionItem>
+                  </Accordion>
+                ) : (
+                  renderMenuItem(item)
+                )}
+              </div>
+            ))}
+          </div>
+
+          <div className="border-t pt-4">
+            <h2 className="mb-2 font-bold">Organization</h2>
+            {organizationItems.map((item) => renderMenuItem(item))}
+          </div>
+        </div>
+      ) : (
+        <div className="grid grid-cols-1 gap-2 p-4">
+          {mainMenuItems.map((item) =>
+            item.name === "Settings" ? (
+              <button
+                key={item.name}
+                onClick={() => setIsSettingsOpen(true)}
+                className="flex items-center rounded-md p-2 text-black hover:bg-[#F97316] hover:text-white"
+              >
+                {item.icon && (
+                  <img
+                    src={item.icon}
+                    alt={item.name}
+                    className="mr-2 h-5 w-5"
+                  />
+                )}
+                {item.name}
+              </button>
+            ) : (
+              <NavLink
+                key={item.name}
+                to={item.to}
+                className={({ isActive }) =>
+                  `flex items-center rounded-md p-2 ${
+                    isActive
+                      ? "bg-[#F97316] text-white"
+                      : "text-black hover:bg-[#F97316] hover:text-white"
+                  } `
+                }
+              >
+                {item.icon && (
+                  <img
+                    src={item.icon}
+                    alt={item.name}
+                    className="mr-2 h-5 w-5"
+                  />
+                )}
+                {item.name}
+              </NavLink>
+            ),
+          )}
+        </div>
+      )}
+    </nav>
+  );
+}