updated prettier config & run linted

src/components/note/atoms/reaction.tsx

@@ -67,7 +67,11 @@ export default function Reaction({ eventID, eventPubkey }: { eventID: string; ev
   return (
     <button onClick={(e) => handleReaction(e)} className="group flex w-16 items-center gap-1.5 text-sm text-zinc-500">
       <div className="rounded-lg p-1 group-hover:bg-zinc-600">
-        {isReact ? <HeartFilledIcon className="h-4 w-4 group-hover:text-red-400" /> : <HeartIcon className="h-4 w-4 text-zinc-500" />}
+        {isReact ? (
+          <HeartFilledIcon className="h-4 w-4 group-hover:text-red-400" />
+        ) : (
+          <HeartIcon className="h-4 w-4 text-zinc-500" />
+        )}
       </div>
       <span>{reaction}</span>
     </button>

src/components/note/atoms/user.tsx

@@ -17,7 +17,9 @@ export const User = memo(function User({ pubkey, time }: { pubkey: string; time:
     async (event) => {
       const metadata: any = JSON.parse(event.content);
 
-      await db.execute(`INSERT OR IGNORE INTO cache_profiles (id, metadata) VALUES ("${pubkey}", '${JSON.stringify(metadata)}')`);
+      await db.execute(
+        `INSERT OR IGNORE INTO cache_profiles (id, metadata) VALUES ("${pubkey}", '${JSON.stringify(metadata)}')`
+      );
       setProfile(metadata);
     },
     [db, pubkey]
@@ -53,13 +55,20 @@ export const User = memo(function User({ pubkey, time }: { pubkey: string; time:
         {profile.picture ? (
           <ImageWithFallback src={profile.picture} alt={pubkey} fill={true} className="rounded-full object-cover" />
         ) : (
-          <Avatar size={44} name={pubkey} variant="beam" colors={['#FEE2E2', '#FEF3C7', '#F59E0B', '#EC4899', '#D946EF', '#8B5CF6']} />
+          <Avatar
+            size={44}
+            name={pubkey}
+            variant="beam"
+            colors={['#FEE2E2', '#FEF3C7', '#F59E0B', '#EC4899', '#D946EF', '#8B5CF6']}
+          />
         )}
       </div>
       <div className="flex w-full flex-1 items-start justify-between">
         <div className="flex w-full justify-between">
           <div className="flex items-baseline gap-2 text-sm">
-            <span className="font-bold leading-tight">{profile.name ? profile.name : truncate(pubkey, 16, ' .... ')}</span>
+            <span className="font-bold leading-tight">
+              {profile.name ? profile.name : truncate(pubkey, 16, ' .... ')}
+            </span>
             <span className="leading-tight text-zinc-500">·</span>
             <Moment fromNow unix className="text-zinc-500">
               {time}

src/components/note/atoms/userWithUsername.tsx

@@ -25,14 +25,23 @@ export const UserWithUsername = memo(function UserWithUsername({ pubkey }: { pub
         {profile.picture ? (
           <ImageWithFallback src={profile.picture} alt={pubkey} fill={true} className="rounded-full object-cover" />
         ) : (
-          <Avatar size={44} name={pubkey} variant="beam" colors={['#FEE2E2', '#FEF3C7', '#F59E0B', '#EC4899', '#D946EF', '#8B5CF6']} />
+          <Avatar
+            size={44}
+            name={pubkey}
+            variant="beam"
+            colors={['#FEE2E2', '#FEF3C7', '#F59E0B', '#EC4899', '#D946EF', '#8B5CF6']}
+          />
         )}
       </div>
       <div className="flex w-full flex-1 items-start justify-between">
         <div className="flex w-full justify-between">
           <div className="flex flex-col gap-1 text-sm">
-            <span className="font-bold leading-tight">{profile.name ? profile.name : truncate(pubkey, 16, ' .... ')}</span>
-            <span className="text-zinc-500">{profile.username ? profile.username : truncate(pubkey, 16, ' .... ')}</span>
+            <span className="font-bold leading-tight">
+              {profile.name ? profile.name : truncate(pubkey, 16, ' .... ')}
+            </span>
+            <span className="text-zinc-500">
+              {profile.username ? profile.username : truncate(pubkey, 16, ' .... ')}
+            </span>
           </div>
           <div>
             <DotsHorizontalIcon className="h-4 w-4 text-zinc-500" />

src/components/note/connector.tsx

@@ -40,7 +40,14 @@ export const NoteConnector = memo(function NoteConnector({
         `INSERT OR IGNORE INTO
           cache_notes
             (id, pubkey, created_at, kind, tags, content) VALUES
-            ("${event.id}", "${event.pubkey}", "${event.created_at}", "${event.kind}", '${JSON.stringify(event.tags)}', "${event.content}");`
+            (
+              "${event.id}",
+              "${event.pubkey}",
+              "${event.created_at}",
+              "${event.kind}",
+              '${JSON.stringify(event.tags)}',
+              "${event.content}"
+            );`
       );
     },
     [db]
@@ -85,7 +92,10 @@ export const NoteConnector = memo(function NoteConnector({
         <h3 className="text-sm font-semibold text-zinc-500"># following</h3>
       </div>
       <div className="flex items-center gap-2">
-        <button onClick={() => reloadNewsfeed()} className={`${reload ? 'animate-spin' : ''} rounded-full p-1 hover:bg-zinc-800`}>
+        <button
+          onClick={() => reloadNewsfeed()}
+          className={`${reload ? 'animate-spin' : ''} rounded-full p-1 hover:bg-zinc-800`}
+        >
           <ReloadIcon className="h-3.5 w-3.5 text-zinc-500" />
         </button>
         <div className="inline-flex items-center gap-1 rounded-full border border-zinc-700 bg-zinc-800 px-2.5 py-1">

src/components/note/content/preview/linkCard.tsx

@@ -7,7 +7,8 @@ export default function LinkCard({ data }: { data: object }) {
     <Link
       href={data['url']}
       target={'_blank'}
-      className="relative mt-2 flex flex-col overflow-hidden rounded-xl border border-zinc-700">
+      className="relative mt-2 flex flex-col overflow-hidden rounded-xl border border-zinc-700"
+    >
       <div className="relative aspect-video h-auto w-full">
         <Image src={data['image']} alt="image preview" fill={true} className="object-cover" />
       </div>