Replaced img to Image and fixed eslint

sublinks · Dec 13, 2023 · a7b98fd · a7b98fd
1 parent e417324
commit a7b98fd
Show file tree

Hide file tree

Showing 6 changed files with 70 additions and 59 deletions.
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -37,15 +37,15 @@ const RootLayout = ({
 }) => (
   <html lang="en" className="h-full">
     <ThemeProvider>
-    <body className={cx(inter.className, 'flex flex-col h-full bg-secondary dark:bg-secondary-dark max-md:pb-48')}>
-      <Header />
-      <BottomNav />
-      <main className="relative flex-grow bg-primary dark:bg-primary-dark w-full l:max-w-[1352px] xl:max-w-[1524px] m-auto md:pt-24">
-        <CurvedCorner left />
-        <CurvedCorner right />
-        {children}
-      </main>
-    </body>
+      <body className={cx(inter.className, 'flex flex-col h-full bg-secondary dark:bg-secondary-dark max-md:pb-48')}>
+        <Header />
+        <BottomNav />
+        <main className="relative flex-grow bg-primary dark:bg-primary-dark w-full l:max-w-[1352px] xl:max-w-[1524px] m-auto md:pt-24">
+          <CurvedCorner left />
+          <CurvedCorner right />
+          {children}
+        </main>
+      </body>
     </ThemeProvider>
 
   </html>

diff --git a/src/components/main-card/index.tsx b/src/components/main-card/index.tsx
@@ -31,9 +31,11 @@ const MainCard = ({
   Header, body, children
 }: MainCardProps) => (
   <div className="flex flex-col md:mx-40 p-12 md:border md:border-gray-300 md:dark:border-gray-900 md:rounded-md shadow-lg dark:shadow-gray-800">
-    {Header && <div className="flex items-center gap-12">
+    {Header && (
+    <div className="flex items-center gap-12">
       {Header}
-    </div>}
+    </div>
+    )}
     {body && (
       <div className="mt-24 text-gray-600 dark:text-gray-200 text-sm">
         <Markdown

diff --git a/src/components/moderates-list/index.tsx b/src/components/moderates-list/index.tsx
@@ -10,37 +10,43 @@ interface ModeratesListItemProps {
   url: string;
 }
 
-export const ModeratesListItem = ({ communityName, communityAvatar, url }: ModeratesListItemProps) => (
-  <Link className="flex gap-12 relative center items-center" href={url}>
-    {communityAvatar && <Image
-      src={communityAvatar}
-      className="hidden lg:flex rounded-md h-32 w-32 mr-2"
-      alt="Avatar"
-      width={32}
-      height={32}
-    />}
-    {communityName}
-  </Link>
-)
+export const ModeratesListItem = (props: ModeratesListItemProps) => {
+  const { communityName, communityAvatar, url } = props;
+
+  return (
+    <Link className="flex gap-12 relative center items-center" href={url}>
+      {communityAvatar && (
+      <Image
+        src={communityAvatar}
+        className="hidden lg:flex rounded-md h-32 w-32 mr-2"
+        alt="Avatar"
+        width={32}
+        height={32}
+      />
+      )}
+      {communityName}
+    </Link>
+  );
+};
 
 export interface ModeratesProps {
-    community: {
-      title: string,
-      actor_id: string,
-      icon?: string,
-    }
+  community: {
+    title: string,
+    actor_id: string,
+    icon?: string,
+  }
 
 }
 
-export const ModeratesList = ({ moderates }: {moderates: ModeratesProps[]}) => (
+export const ModeratesList = ({ moderates }: { moderates: ModeratesProps[] }) => (
   <div className="w-full border-l-2 pl-16 ">
     <H1 className="mb-4 border-collapse border-b dark:border-gray-400 border-gray-800">Moderates:</H1>
     <div className="max-h-500 overflow-y-scroll">
-      {moderates.map((moderate) => (
+      {moderates.map(moderate => (
         <div key={moderate.community.actor_id} className="border-b border-spacing dark:border-gray-50 border-gray-400 my-2 min-h-fit relative p-2 border-collapse cursor-pointer">
           <ModeratesListItem communityName={moderate.community.title} communityAvatar={moderate.community.icon} url={`${moderate.community.actor_id}`} />
         </div>
       ))}
     </div>
   </div>
-)
+);
diff --git a/src/components/person-detail/index.tsx b/src/components/person-detail/index.tsx
@@ -3,9 +3,9 @@ import Link from 'next/link';
 import Markdown, { Components } from 'react-markdown';
 import remarkGfm from 'remark-gfm';
 
+import Image from 'next/image';
 import { H1, LinkText } from '../text';
 
-import Image from 'next/image';
 // @Todo: Break out into separate component
 const customMarkdownComponents: Components = {
   a: ({ children, href }) => (
@@ -25,7 +25,7 @@ const customMarkdownComponents: Components = {
 
 const PersonAvatar = ({ avatarUrl }: { avatarUrl: string }) => (
   <div className="flex justify-center">
-    <img
+    <Image
       src={avatarUrl}
       className="rounded-md h-32 w-32 mr-8"
       alt="Avatar"
@@ -44,7 +44,6 @@ export const PersonBio = ({ bio }: { bio: string }) => (
   </div>
 );
 
-
 const PersonBadges = ({ is_admin }: { is_admin: boolean }) => (
   <div className="flex justify-center">
     {is_admin ? (
@@ -72,25 +71,29 @@ const PersonBanner = ({ bannerUrl }: { bannerUrl: string }) => (
 
 );
 
-export const PersonTitle = ({ name, avatar, banner }: { name: string, avatar: string | undefined, banner: string | undefined }) => (
+export const PersonTitle = ({ name, avatar }: { name: string, avatar: string | undefined }) => (
   <div className="flex justify-left">
-    {avatar ? <div className="flex justify-center">
-      <PersonAvatar avatarUrl={avatar} />
-    </div> : null}
+    {avatar ? (
+      <div className="flex justify-center">
+        <PersonAvatar avatarUrl={avatar} />
+      </div>
+    ) : null}
     <H1 className="text-gray-600 dark:text-gray-200 text-2xl ">
       {name}
     </H1>
   </div>
 );
 
-export const PersonHeader = ({ name, avatar, is_admin, banner }: { name: string, avatar: string | undefined, is_admin: boolean, banner: string | undefined }) => (
+export const PersonHeader = ({
+  name, avatar, is_admin, banner
+}: { name: string, avatar: string | undefined, is_admin: boolean, banner: string | undefined }) => (
   <div className="w-full">
     {banner && (
       <PersonBanner bannerUrl={banner} />
     )}
     <div className="flex justify-start">
-      <PersonTitle name={name} avatar={avatar} banner={banner} />
+      <PersonTitle name={name} avatar={avatar} />
       <PersonBadges is_admin={is_admin} />
     </div>
   </div>
-)
+);
diff --git a/src/utils/TailwindMaterial.ts b/src/utils/TailwindMaterial.ts
@@ -1,21 +1,21 @@
-"use client";
+'use client';
 
 import {
-    ThemeProvider,
-    Button,
-    Tabs,
-    TabsHeader,
-    TabsBody,
-    Tab,
-    TabPanel,
-} from "@material-tailwind/react";
+  ThemeProvider,
+  Button,
+  Tabs,
+  TabsHeader,
+  TabsBody,
+  Tab,
+  TabPanel
+} from '@material-tailwind/react';
 
 export {
-    ThemeProvider,
-    Button,
-    Tabs,
-    TabsHeader,
-    TabsBody,
-    Tab,
-    TabPanel,
-};
+  ThemeProvider,
+  Button,
+  Tabs,
+  TabsHeader,
+  TabsBody,
+  Tab,
+  TabPanel
+};
diff --git a/tailwind.config.ts b/tailwind.config.ts
@@ -37,7 +37,7 @@ const config: Config = {
     './src/components/**/*.{js,ts,jsx,tsx,mdx}',
     './src/app/**/*.{js,ts,jsx,tsx,mdx}',
     'node_modules/@material-tailwind/react/components/**/*.{js,ts,jsx,tsx}',
-    'node_modules/@material-tailwind/react/theme/components/**/*.{js,ts,jsx,tsx}',
+    'node_modules/@material-tailwind/react/theme/components/**/*.{js,ts,jsx,tsx}'
   ],
   theme: {
     spacing,