Merge branch 'hngprojects:dev' into feat/160-settings-page-implement-…

…subscription-cancel-feedback-modal

.github/workflows/dev-cicd.yml

@@ -43,6 +43,9 @@ jobs:
       - name: Lint code
         run: pnpm lint
 
+      - name: Build email
+        run: pnpm email:build
+
       - name: Build project
         run: pnpm build
 

.github/workflows/prod-cicd.yml

@@ -43,6 +43,9 @@ jobs:
       - name: Lint code
         run: pnpm run lint
 
+      - name: Build email
+        run: pnpm email:build
+
       - name: Build project
         run: pnpm run build
 

.github/workflows/staging-cicd.yml

@@ -43,6 +43,9 @@ jobs:
       - name: Lint code
         run: pnpm run lint
 
+      - name: Build email
+        run: pnpm email:build  
+
       - name: Build project
         run: pnpm run build
 

.gitignore

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

.vscode/settings.json

@@ -1,9 +1,12 @@
 {
     "[javascript][javascriptreact][typescript][typescriptreact]": {
-        "editor.formatOnSave": false,
+        "editor.formatOnSave": true,
         "editor.defaultFormatter": "vscode.typescript-language-features"
     },
     "editor.codeActionsOnSave": {
         "source.fixAll.eslint": "always"
     },
+    "[typescriptreact]": {
+        "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/CommentBox.tsx

@@ -0,0 +1,69 @@
+import {
+  Forward,
+  MessageCircle,
+  Share2,
+  ThumbsDown,
+  ThumbsUp,
+} from "lucide-react";
+
+type CommentProperties = {
+  userPicUrl: string;
+  userDisplayName: string;
+  userTagName: string;
+  commentContent: string;
+  pubDate: string;
+  likeCount: number;
+};
+
+const CommentBox = ({
+  userPicUrl,
+  userDisplayName,
+  userTagName,
+  commentContent,
+  pubDate,
+  likeCount,
+}: CommentProperties) => {
+  return (
+    <div className="flex w-full max-w-[54rem] items-start gap-[0.75rem] self-stretch rounded-[.5rem] border-[.8px] border-solid border-[#cbd5e1] bg-white px-[1rem] py-[1.2rem] lg:py-4">
+      <img src={userPicUrl} alt="Profile Pic" className="h-10 w-10" />
+      <div className="flex flex-col gap-[.88rem]">
+        <div className="flex flex-col gap-[.25rem] lg:gap-[.38rem]">
+          <h1 className="font-inter w-fit text-base font-semibold text-[#0a0a0a] lg:text-2xl">
+            {userDisplayName}
+          </h1>
+          <p className="font-inter text-xs font-medium text-[#71717a] lg:text-sm">
+            @{userTagName}
+          </p>
+        </div>
+        <div className="comment-content font-inter w-full text-sm font-normal text-[#71717a] lg:text-base">
+          {commentContent}
+        </div>
+        <div className="mt-[-.13rem] flex gap-3">
+          <p className="font-inter text-xs font-normal text-[#525252]">
+            {pubDate}
+          </p>
+        </div>
+        <div className="flex flex-wrap items-center gap-2">
+          <button className="like-btn flex items-center gap-1 rounded-[.24863rem] border-[.669px] border-solid border-[#cbd5e1] bg-[#fafafa] px-[.33rem] py-1">
+            <ThumbsUp size={20} strokeWidth={1.5} color="#0A0A0A" />
+            <p className="font-inter">{likeCount !== 0 && likeCount}</p>
+          </button>
+          <button className="dislike-btn flex items-center gap-1 rounded-[.24863rem] border-[.669px] border-solid border-[#cbd5e1] bg-[#fafafa] px-[.33rem] py-1">
+            <ThumbsDown size={20} strokeWidth={1.4} color="#0A0A0A" />
+          </button>
+          <button className="share-btn flex items-center gap-1 rounded-[.24863rem] border-[.669px] border-solid border-[#cbd5e1] bg-[#fafafa] px-[.33rem] py-1">
+            <Share2 size={20} strokeWidth={1.4} color="#0A0A0A" />
+          </button>
+          <button className="forward-btn flex items-center gap-1 rounded-[.24863rem] border-[.669px] border-solid border-[#cbd5e1] bg-[#fafafa] px-[.33rem] py-1">
+            <Forward size={20} strokeWidth={1.4} color="#0A0A0A" />
+          </button>
+          <button className="reply-btn flex items-center gap-1 rounded-[.24863rem] border-[.669px] border-solid border-[#cbd5e1] bg-[#fafafa] px-[.33rem] py-1">
+            <MessageCircle size={20} strokeWidth={1.4} color="#0A0A0A" />
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default CommentBox;