From 7963733eb543fb563366269da00afed19d524768 Mon Sep 17 00:00:00 2001
From: Chloe Lim <chloelim22@gmail.com>
Date: Tue, 24 Sep 2024 04:45:54 +0800
Subject: [PATCH] style: fix linter

---
 frontend/app/home.tsx                         | 20 ++-----------------
 frontend/components/display/chip.tsx          |  4 ++--
 .../sidebar/sidebar-other-topics.tsx          | 12 +++++------
 frontend/components/news/news-article.tsx     | 18 +++++++++--------
 frontend/types/categories.ts                  |  1 -
 5 files changed, 19 insertions(+), 36 deletions(-)

diff --git a/frontend/app/home.tsx b/frontend/app/home.tsx
index 9191e29b..b73ec8c5 100644
--- a/frontend/app/home.tsx
+++ b/frontend/app/home.tsx
@@ -1,30 +1,14 @@
-import Chip from "@/components/display/chip";
 import NewsArticle from "@/components/news/news-article";
-import { useUserStore } from "@/store/user/user-store-provider";
-import {
-  categoriesToDisplayName,
-  categoriesToIconsMap,
-  Category,
-} from "@/types/categories";
-import {
-  ArrowUpLeft,
-  ArrowUpLeftIcon,
-  ArrowUpRightIcon,
-  Cat,
-  ExternalLinkIcon,
-} from "lucide-react";
-import Image from "next/image";
 
 /* This component should only be rendered to authenticated users */
 const Home = () => {
-  const user = useUserStore((store) => store.user);
   return (
     <div className="flex flex-col w-full py-8 mx-8 md:mx-16 xl:mx-32">
-      <div className="mb-8">
+      <div className="mb-12">
         <span className="text-sm text-muted-foreground">
           {new Date().toDateString()}
         </span>
-        <h1 className="text-2xl lg:text-3xl 2xl:text-4xl font-semibold">
+        <h1 className="text-2xl lg:text-3xl 2xl:text-4xl font-bold">
           What happened this week
         </h1>
       </div>
diff --git a/frontend/components/display/chip.tsx b/frontend/components/display/chip.tsx
index e8dcdfe5..84643b08 100644
--- a/frontend/components/display/chip.tsx
+++ b/frontend/components/display/chip.tsx
@@ -1,8 +1,8 @@
 import { cva, VariantProps } from "class-variance-authority";
+import { LucideIcon } from "lucide-react";
 
 import { Box } from "@/components/ui/box";
 import { cn } from "@/lib/utils";
-import { LucideIcon } from "lucide-react";
 
 const chipVariants = cva(
   "inline-flex items-center justify-center whitespace-nowrap rounded-md text-xs font-medium transition-colors disabled:pointer-events-none disabled:opacity-50",
@@ -36,7 +36,7 @@ interface ChipProps extends VariantProps<typeof chipVariants> {
 const Chip = ({ label, variant, size, className, Icon }: ChipProps) => {
   return (
     <Box className={cn(chipVariants({ variant, size }), className)}>
-      {Icon && <Icon size={16} strokeWidth={1.8} className="mr-2" />}
+      {Icon && <Icon className="mr-2" size={16} strokeWidth={1.8} />}
       {label}
     </Box>
   );
diff --git a/frontend/components/navigation/sidebar/sidebar-other-topics.tsx b/frontend/components/navigation/sidebar/sidebar-other-topics.tsx
index 8e086e11..6bb3765e 100644
--- a/frontend/components/navigation/sidebar/sidebar-other-topics.tsx
+++ b/frontend/components/navigation/sidebar/sidebar-other-topics.tsx
@@ -1,5 +1,3 @@
-import { ComponentProps } from "react";
-
 import {
   categoriesToDisplayName,
   categoriesToIconsMap,
@@ -29,14 +27,14 @@ const SidebarOtherTopics = () => {
         Other topics
       </h1>
       <div className="flex flex-col">
-        {otherTopics.map((topicItem) => {
-          const categoryLabel = categoriesToDisplayName[topicItem];
-          const categoryIcon = categoriesToIconsMap[topicItem];
+        {otherTopics.map((category) => {
+          const categoryLabel = categoriesToDisplayName[category];
+          const categoryIcon = categoriesToIconsMap[category];
           return (
             <SidebarItemWithIcon
-              key={categoryLabel}
-              label={categoryLabel}
               Icon={categoryIcon}
+              key={category}
+              label={categoryLabel}
             />
           );
         })}
diff --git a/frontend/components/news/news-article.tsx b/frontend/components/news/news-article.tsx
index ac372d3a..bbefc91e 100644
--- a/frontend/components/news/news-article.tsx
+++ b/frontend/components/news/news-article.tsx
@@ -1,11 +1,12 @@
+import Image from "next/image";
+import { ArrowUpRightIcon } from "lucide-react";
+
+import Chip from "@/components/display/chip";
 import {
   categoriesToDisplayName,
   categoriesToIconsMap,
   Category,
 } from "@/types/categories";
-import { ArrowUpRightIcon } from "lucide-react";
-import Chip from "../display/chip";
-import Image from "next/image";
 
 const sampleArticleCategories = [
   Category.Economics,
@@ -20,7 +21,7 @@ const NewsArticle = () => {
       <div className="flex flex-col w-full lg:w-7/12">
         <div className="flex w-full justify-between text-sm text-offblack">
           <span>
-            <ArrowUpRightIcon size={16} className="inline-flex" /> CNA, Guardian
+            <ArrowUpRightIcon className="inline-flex" size={16} /> CNA, Guardian
           </span>
           <span>21 Sep 2024</span>
         </div>
@@ -34,8 +35,9 @@ const NewsArticle = () => {
         <div className="flex flex-wrap gap-x-2 gap-y-2 mt-6">
           {sampleArticleCategories.map((category) => (
             <Chip
-              label={categoriesToDisplayName[category]}
               Icon={categoriesToIconsMap[category]}
+              key={category}
+              label={categoriesToDisplayName[category]}
               variant="greygreen"
             />
           ))}
@@ -43,15 +45,15 @@ const NewsArticle = () => {
       </div>
       <div className="flex w-full lg:w-5/12 mb-6 items-center">
         <Image
-          width={273}
+          alt=""
           height={154}
-          unoptimized
           src="https://onecms-res.cloudinary.com/image/upload/s--893X2dru--/c_fill,g_auto,h_468,w_830/fl_relative,g_south_east,l_mediacorp:cna:watermark:2021-08:cna,w_0.1/f_auto,q_auto/v1/mediacorp/cna/image/2024/09/21/RAY_3553.JPG?itok=aFJ8bcqO"
-          alt=""
           style={{
             width: "100%",
             height: "fit-content",
           }}
+          unoptimized
+          width={273}
         />
       </div>
     </div>
diff --git a/frontend/types/categories.ts b/frontend/types/categories.ts
index 16312619..3bc2145b 100644
--- a/frontend/types/categories.ts
+++ b/frontend/types/categories.ts
@@ -1,6 +1,5 @@
 import {
   Building2,
-  Car,
   DollarSign,
   Film,
   HeartHandshake,