Merge branch 'dev' of https://github.com/hngprojects/hng_boilerplate_…

…remix into dev

.github/workflows/lint.yml

@@ -15,7 +15,4 @@ jobs:
         with:
           version: 9
       - run: pnpm install
-      - uses: reviewdog/action-eslint@v1
-        with:
-          github_token: ${{ secrets.GITHUB_TOKEN }}
-          eslint_flags: ". --ext js,jsx,ts,tsx --ignore-path=.gitignore"
+      - run: pnpm lint

.gitignore

@@ -4,3 +4,5 @@ node_modules
 /.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": "esbenp.prettier-vscode"
+    },
 }

ROUTING.md

@@ -0,0 +1,52 @@
+- /
+- pricing
+- about
+- help
+- legal
+  - privacy-policy
+  - terms-and-condition
+- career
+  - :id (individual jobs page)
+- trial (squeeze page)
+- blog
+  - latest (latest articles page)
+  - :id (Individual blog page)
+- contact
+- faq
+- waitlist
+- auth
+  - register
+    - ?otp
+    - organisation
+  - login
+    - email-link
+      - success
+  - forgot-password
+    - verify-otp
+    - success
+  - reset-password
+- dashboard
+  - products
+    - add
+    - :id
+  - settings
+    - profile
+    - account-security
+      - password
+    - payment-information
+      - checkout
+      - cancel-subscription
+    - notification
+    - payment-information
+    - data-and-privacy
+    - language-and-region
+- admin
+  - dashboard
+  - products
+    - add
+    - :id
+  - users
+  - email-templates
+  - squeeze
+  - waitlist
+  - settings

app/components/BlogCards.tsx

@@ -0,0 +1,59 @@
+import type { FC } from "react";
+
+interface BlogCardProperties {
+  title: string;
+  description: string;
+  date: string;
+  authorName: string;
+  authorProfilePicture: string;
+  tag: string;
+  timeOfReading: string;
+  blogImage: string;
+  link: string;
+}
+
+const BlogCard: FC<BlogCardProperties> = ({
+  title,
+  description,
+  date,
+  authorName,
+  authorProfilePicture,
+  tag,
+  timeOfReading,
+  blogImage,
+  link,
+}) => {
+  return (
+    <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="mb-2 text-xl font-bold">{title}</h3>
+          </a>
+          <p className="mb-4 text-base text-gray-700">{description}</p>
+        </div>
+        <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="mr-4 h-10 w-10 rounded-full"
+            src={authorProfilePicture}
+            alt={authorName}
+          />
+          <div className="text-sm">
+            <p className="leading-none text-gray-900">{authorName}</p>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default BlogCard;

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;

app/components/EmailSubRenewal/EmailRenewal.tsx

@@ -0,0 +1,101 @@
+import React from "react";
+
+import { Button } from "../../components/ui/button";
+
+export interface SubscriptionProperties {
+  title: string;
+  name: string;
+  image: string;
+  email: string;
+  renewalDate: string;
+  renewalPrice: string;
+  renewalPeriod: string;
+  reviewSubscriptionLink: string;
+  renewSubscriptionLink: string;
+}
+
+const Subscription: React.FC<SubscriptionProperties> = ({
+  title,
+  name,
+  image,
+  email,
+  renewalDate,
+  renewalPrice,
+  renewalPeriod,
+  reviewSubscriptionLink,
+  renewSubscriptionLink,
+}) => {
+  return (
+    <div className="relative flex w-full flex-col items-center justify-start overflow-hidden bg-white text-left font-[Inter] text-5xl text-black">
+      <div className="flex flex-col items-center justify-start gap-[56px] self-stretch bg-white p-14 text-base">
+        <img className="relative h-[178px] w-[200.2px]" alt="" src={image} />
+        <div className="text-neutral-colors-dark-2 flex flex-col items-center justify-center self-stretch text-center text-xl md:text-5xl lg:text-5xl">
+          <div className="relative self-stretch font-semibold">{title}</div>
+        </div>
+        <div className="flex flex-col items-center justify-center gap-[32px] self-stretch">
+          <div className="flex flex-col items-start justify-start self-stretch text-lg">
+            <div className="relative self-stretch font-semibold">
+              Hi {name},
+            </div>
+          </div>
+          <div className="flex flex-col items-center justify-start gap-[28px] self-stretch text-neutral-500">
+            <div className="relative self-stretch">
+              We hope you are enjoying your subscription, which will renew soon.
+            </div>
+            <div className="box-border flex w-full flex-col items-center justify-start gap-[4px] overflow-hidden bg-[#f97316] px-0 py-10 text-center text-white">
+              <div className="relative self-stretch leading-[27px]">
+                Your Renewal Date
+              </div>
+              <b className="text-neutral-colors-white relative self-stretch text-xl md:text-5xl lg:text-5xl">
+                {renewalDate}
+              </b>
+            </div>
+            <div className="relative self-stretch">
+              <span>
+                <span className="font-body-medium-small">{`Your subscription for `}</span>
+                <span className="font-body-medium-small font-semibold">
+                  {renewalPrice}/{renewalPeriod} features
+                </span>
+                <span>{` will automatically renew on ${renewalDate}. To avoid being charged, you should cancel at least a day before the renewal date. To learn more or cancel, `}</span>
+              </span>
+              <span className="font-semibold text-[#f97316]">
+                review subscription
+              </span>
+              <span>.</span>
+            </div>
+            <div className="relative self-stretch">
+              To keep your subscription, you can renew your plan for the next
+              month.
+            </div>
+          </div>
+          <Button className="box-border flex h-11 flex-row items-center justify-center rounded-lg bg-[#f97316] px-10 py-2 text-center text-white">
+            {renewSubscriptionLink}
+          </Button>
+        </div>
+        <div className="flex flex-col items-start justify-center gap-[8px] self-stretch text-sm">
+          <div className="relative self-stretch font-medium">Regards,</div>
+          <div className="relative self-stretch font-medium">Boilerplate</div>
+        </div>
+        <div className="relative self-stretch text-neutral-500">
+          <span className="font-body-medium-small text-neutral-500">{`If you have questions, please visit our `}</span>
+          <span className="font-body-medium-small font-semibold text-[#f97316]">
+            FAQs
+          </span>
+          <span className="font-body-medium-small">
+            <span className="text-neutral-500">{`, or email us at `}</span>
+            <span className="text-[#f97316]">{email}</span>
+            <span>{`. Our team can answer questions about your subscription status. To unsubscribe from future subscription renewal reminders, `}</span>
+          </span>
+          <span>
+            <span className="font-semibold [text-decoration:underline]">
+              click here {reviewSubscriptionLink}
+            </span>
+            <span className="font-body-medium-small">.</span>
+          </span>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default Subscription;

app/components/NoSearchResults.tsx

@@ -0,0 +1,43 @@
+import { FC } from "react";
+
+interface NoSearchResultsProperties {
+  searchText: string;
+}
+
+const NoSearchResults: FC<NoSearchResultsProperties> = ({ searchText }) => {
+  const isVisible = true;
+
+  return (
+    <div className="font-inter flex w-[100%] items-center justify-center bg-[#FAFAFA]">
+      <div
+        className={`flex h-[326px] w-[326px] flex-col items-center gap-0.5 lg:h-[449.06px] lg:w-[557px] ${
+          isVisible ? "animate-accordion-down" : ""
+        }`}
+      >
+        <img
+          src="notFoundImage.png"
+          alt="No search results"
+          className={`h-[242px] w-[242px] lg:h-[383.06px] lg:w-[442.64px] ${
+            isVisible ? "animate-accordion-down" : ""
+          }`}
+        />
+        <h5
+          className={`text-center text-[20px] font-semibold leading-[24.2px] text-[#525252] lg:text-[28px] lg:leading-[33.89px] lg:text-[#0A0A0A] ${
+            isVisible ? "animate-accordion-down" : ""
+          }`}
+        >
+          Sorry, No result found for &quot; {searchText ?? "Product Web"} &quot;
+        </h5>
+        <h6
+          className={`text-center text-[18px] font-normal leading-[21.78px] text-[#525252] lg:text-[20px] lg:leading-[24.2px] lg:text-[#0A0A0A] ${
+            isVisible ? "animate-accordion-down" : ""
+          }`}
+        >
+          You might want to try looking for another job title
+        </h6>
+      </div>
+    </div>
+  );
+};
+
+export default NoSearchResults;