Merge branch 'dev' into feat/HNG-56-implement-search-faq

.gitignore

@@ -1,8 +1,6 @@
 node_modules
 /.react-email
-
 /.cache
 /build
 .env
-
 *.DS_Store

.vscode/settings.json

@@ -7,6 +7,6 @@
         "source.fixAll.eslint": "always"
     },
     "[typescriptreact]": {
-        "editor.defaultFormatter": "esbenp.prettier-vscode"
+        "editor.defaultFormatter": "vscode.typescript-language-features"
     },
 }

app/components/BlogCards.tsx

@@ -1,5 +1,3 @@
-import type { FC } from "react";
-
 interface BlogCardProperties {
   title: string;
   description: string;
@@ -12,7 +10,7 @@ interface BlogCardProperties {
   link: string;
 }
 
-const BlogCard: FC<BlogCardProperties> = ({
+const BlogCard: React.FC<BlogCardProperties> = ({
   title,
   description,
   date,
@@ -29,6 +27,7 @@ const BlogCard: FC<BlogCardProperties> = ({
       <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>

app/components/BlogPost.tsx

@@ -0,0 +1,75 @@
+import RecentBlogCard from "./RecentBlogCard";
+import { Button } from "./ui/button";
+
+const blogPosts = [
+  {
+    title: "The Power of Networking: How to Build Meaningful connections",
+    date: "Jul 12, 2024",
+    timeRead: "5 mins read",
+    image: "/images/business.jpg",
+    description: "Business",
+    variant: 0,
+  },
+  {
+    title: "The Global Impact of Climate Change: A Look at the Evidence",
+    date: "Jul 12, 2024",
+    timeRead: "5 mins read",
+    image: "/images/nature.png",
+    description: "World News",
+    variant: 1,
+  },
+  {
+    title: "5 Easy and Delicious Recipes for Busy Weeknights",
+    date: "Jul 12, 2024",
+    timeRead: "5 mins read",
+    image: "/images/food1.jpg",
+    description: "Food",
+    variant: 2,
+  },
+  {
+    title: "5 Simple Habits to Improve Your Mental Wellbeing",
+    date: "Jul 12, 2024",
+    timeRead: "5 mins read",
+    image: "/images/yoga.jpg",
+    description: "Lifestyle",
+    variant: 3,
+  },
+  {
+    title: "The Ultimate Guide to Dressing Stylishly with Fewer Clothes",
+    date: "Jul 12, 2024",
+    timeRead: "5 mins read",
+    image: "/images/fashion.jpg",
+    description: "Fashion",
+    variant: 4,
+  },
+  {
+    title: "The Future of Travel: What Will the World Look Like in 2030?",
+    date: "Jul 12, 2024",
+    timeRead: "5 mins read",
+    image: "/images/person with glasses.jpg",
+    description: "World News",
+    variant: 5,
+  },
+];
+
+const BlogPost = () => {
+  return (
+    <section className="my-10 flex w-[100%] flex-col overflow-hidden md:px-10 lg:px-[100px]">
+      <h3 className="my-5 px-4 text-[28px] font-bold text-[#525252]">
+        Recent Blog posts
+      </h3>
+      <div className="grid w-full grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-3 lg:pr-7">
+        {blogPosts.map((post, index) => (
+          <RecentBlogCard href={"/"} key={index} {...post} />
+        ))}
+      </div>
+      <div className="my-11 flex items-center justify-center">
+        <Button className="hover:default-foreground mt-4 bg-primary px-7">
+          Show More Articles
+        </Button>
+      </div>
+    </section>
+  );
+};
+
+export default BlogPost;

app/components/BreadCrumbs.tsx

@@ -0,0 +1,125 @@
+import { Slot } from "@radix-ui/react-slot";
+import { ChevronRight, MoreHorizontal } from "lucide-react";
+import {
+  forwardRef,
+  type ComponentProps,
+  type ComponentPropsWithoutRef,
+  type ReactNode,
+} from "react";
+
+import { cn } from "~/lib/utils/cn";
+
+const Breadcrumb = forwardRef<
+  HTMLElement,
+  ComponentPropsWithoutRef<"nav"> & {
+    separator?: ReactNode;
+  }
+>(({ ...properties }, reference) => (
+  <nav ref={reference} aria-label="breadcrumb" {...properties} />
+));
+Breadcrumb.displayName = "Breadcrumb";
+
+const BreadcrumbList = forwardRef<
+  HTMLOListElement,
+  ComponentPropsWithoutRef<"ol">
+>(({ className, ...properties }, reference) => (
+  <ol
+    ref={reference}
+    className={cn(
+      "flex flex-wrap items-center gap-1.5 break-words text-xs text-foreground sm:gap-3",
+      className,
+    )}
+    {...properties}
+  />
+));
+BreadcrumbList.displayName = "BreadcrumbList";
+
+const BreadcrumbItem = forwardRef<
+  HTMLLIElement,
+  ComponentPropsWithoutRef<"li">
+>(({ className, ...properties }, reference) => (
+  <li
+    ref={reference}
+    className={cn("inline-flex items-center gap-1.5", className)}
+    {...properties}
+  />
+));
+BreadcrumbItem.displayName = "BreadcrumbItem";
+
+const BreadcrumbLink = forwardRef<
+  HTMLAnchorElement,
+  ComponentPropsWithoutRef<"a"> & {
+    asChild?: boolean;
+  }
+>(({ asChild, className, ...properties }, reference) => {
+  const Comp = asChild ? Slot : "a";
+
+  return (
+    <Comp
+      ref={reference}
+      className={cn(
+        "text-breadcrumb-foreground hover:text-neutral-dark-2 capitalize transition-colors",
+        className,
+      )}
+      {...properties}
+    />
+  );
+});
+BreadcrumbLink.displayName = "BreadcrumbLink";
+
+const BreadcrumbPage = forwardRef<
+  HTMLSpanElement,
+  ComponentPropsWithoutRef<"span">
+>(({ className, ...properties }, reference) => (
+  <span
+    ref={reference}
+    role="link"
+    aria-disabled="true"
+    aria-current="page"
+    className={cn("text-breadcrumb-page/50 font-normal capitalize", className)}
+    {...properties}
+  />
+));
+BreadcrumbPage.displayName = "BreadcrumbPage";
+
+const BreadcrumbSeparator = ({
+  children,
+  className,
+  ...properties
+}: ComponentProps<"li">) => (
+  <li
+    role="presentation"
+    aria-hidden="true"
+    className={cn("text-breadcrumb-page [&>svg]:size-3.5", className)}
+    {...properties}
+  >
+    {children ?? <ChevronRight />}
+  </li>
+);
+BreadcrumbSeparator.displayName = "BreadcrumbSeparator";
+
+const BreadcrumbEllipsis = ({
+  className,
+  ...properties
+}: ComponentProps<"span">) => (
+  <span
+    role="presentation"
+    aria-hidden="true"
+    className={cn("flex h-9 w-9 items-center justify-center", className)}
+    {...properties}
+  >
+    <MoreHorizontal className="h-4 w-4" />
+    <span className="sr-only">More</span>
+  </span>
+);
+BreadcrumbEllipsis.displayName = "BreadcrumbElipssis";
+
+export {
+  Breadcrumb,
+  BreadcrumbList,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+  BreadcrumbEllipsis,
+};

app/components/CreateRoleFormModal/CreateRoleForm.tsx

@@ -0,0 +1,106 @@
+import { Form } from "@remix-run/react";
+import { FC, useState } from "react";
+
+import CreateRoleModal from "./CreateRoleModal";
+
+interface CreateRoleFormProperties {
+  isOpen: boolean;
+  onClose: () => void;
+}
+
+const CreateRoleForm: FC<CreateRoleFormProperties> = ({ isOpen, onClose }) => {
+  const [roleName, setRoleName] = useState("");
+  const [roleDescription, setRoleDescription] = useState("");
+
+  const handleSubmit = (event: React.FormEvent) => {
+    event.preventDefault();
+
+    onClose();
+  };
+
+  return (
+    <CreateRoleModal isOpen={isOpen}>
+      <div className="p-6">
+        <div className="mb-4 flex items-center justify-between">
+          <h2 className="text-xl font-semibold">Create Role</h2>
+          <button
+            onClick={onClose}
+            className="text-gray-500 hover:text-gray-700"
+          >
+            <svg
+              className="h-6 w-6"
+              fill="none"
+              stroke="currentColor"
+              viewBox="0 0 24 24"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                strokeWidth={2}
+                d="M6 18L18 6M6 6l12 12"
+              />
+            </svg>
+          </button>
+        </div>
+        <p className="mb-4 text-sm text-gray-600">
+          Define customized responsibilities for collaborative success.
+        </p>
+        <Form method="post" onSubmit={handleSubmit}>
+          <div className="mb-4">
+            <label
+              htmlFor="roleName"
+              className="mb-1 block text-sm font-bold text-[#0A0A0A]"
+            >
+              Name of role
+            </label>
+            <input
+              type="text"
+              id="roleName"
+              name="roleName"
+              placeholder="e.g: IT Staff"
+              value={roleName}
+              onChange={(event) => setRoleName(event.target.value)}
+              className="w-[50%] rounded-md border border-border p-2 text-sm font-normal text-[#525252]"
+              required
+            />
+          </div>
+          <div className="mb-6">
+            <label
+              htmlFor="roleDescription"
+              className="mb-1 block border-border text-sm font-bold text-[#0A0A0A] outline-border"
+            >
+              Role description
+            </label>
+            <textarea
+              id="roleDescription"
+              name="roleDescription"
+              placeholder="Describe role"
+              value={roleDescription}
+              onChange={(event) => setRoleDescription(event.target.value)}
+              className="h-24 w-full resize-none rounded-md border border-gray-300 p-2 text-sm font-normal text-[#525252]"
+              required
+            />
+          </div>
+          <div className="flex justify-end space-x-2">
+            <button
+              type="button"
+              onClick={onClose}
+              className="rounded-md border border-gray-300 bg-white px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-50"
+            >
+              Cancel
+            </button>
+            <button
+              type="submit"
+              className="rounded-md bg-orange-500 px-4 py-2 text-sm font-medium text-white hover:bg-orange-600"
+            >
+              Create Role
+            </button>
+          </div>
+        </Form>
+      </div>
+    </CreateRoleModal>
+  );
+};
+
+export default CreateRoleForm;

app/components/CreateRoleFormModal/CreateRoleModal.tsx

@@ -0,0 +1,23 @@
+import { FC, ReactNode } from "react";
+
+interface CreateRoleModalProperties {
+  isOpen: boolean;
+  children: ReactNode;
+}
+
+const CreateRoleModal: FC<CreateRoleModalProperties> = ({
+  isOpen,
+  children,
+}) => {
+  if (!isOpen) return;
+
+  return (
+    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-50">
+      <div className="mx-4 w-full max-w-md rounded-lg bg-white shadow-lg">
+        {children}
+      </div>
+    </div>
+  );
+};
+
+export default CreateRoleModal;