fix: differences from export and some tailwind css classname order rearrangement

apps/website/src/components/index.tsx

@@ -1,4 +1,4 @@
 export { Breadcrumbs } from './breadcrumbs/breadcrumbs'
 export { EpicOverview } from './epic-overview'
 export { SideBar } from './side-bar/side-bar'
-export { TableIssues } from './table-issues'
+export { TableIssues } from './table-issues/table-issues'

apps/website/src/components/table-issues.tsx

@@ -1,85 +0,0 @@
-import { Avatar, Button, Tag, Text } from '@status-im/components'
-import Link from 'next/link'
-
-const issues = [
-  {
-    id: 5154,
-    title: 'Add support for encrypted communities',
-    status: 'Open',
-  },
-  {
-    id: 5155,
-    title: 'Add support for encrypted communities',
-    status: 'Open',
-  },
-  {
-    id: 4,
-    title: 'Add support for encrypted communities',
-    status: 'Open',
-  },
-  {
-    id: 4324,
-    title: 'Add support for encrypted communities',
-    status: 'Open',
-  },
-  {
-    id: 876,
-    title: 'Add support for encrypted communities',
-    status: 'Open',
-  },
-]
-
-export const TableIssues = () => {
-  return (
-    <div className="overflow-hidden rounded-2xl border border-neutral-10">
-      <div className="border-b border-neutral-10 bg-neutral-5 p-3">
-        <Text size={15} weight="medium">
-          784 Open
-        </Text>
-      </div>
-
-      <div className="divide-y divide-neutral-10">
-        {issues.map(issue => (
-          <Link
-            key={issue.id}
-            href={`https://github.com/status-im/status-react/issues/${issue.id}`}
-            className="flex items-center justify-between px-4 py-3 transition-colors duration-200 hover:bg-neutral-5"
-          >
-            <div className="flex flex-col">
-              <Text size={15} weight="medium">
-                {issue.title}
-              </Text>
-              <Text size={13} color="$neutral-50">
-                #9667 • Opened 2 days ago by slaedjenic
-              </Text>
-            </div>
-
-            <div className="flex gap-3">
-              <div className="flex gap-1">
-                <Tag size={24} label="E:Syncing" color="$orange-50" />
-                <Tag size={24} label="E:Wallet" color="$green-50" />
-                <Tag size={24} label="Feature" color="$pink-50" />
-                <Tag size={24} label="Web" color="$purple-50" />
-              </div>
-
-              <Tag size={24} label="9435" />
-
-              <Avatar
-                type="user"
-                size={24}
-                name="jkbktl"
-                src="https://images.unsplash.com/photo-1552058544-f2b08422138a?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1299&q=80"
-              />
-            </div>
-          </Link>
-        ))}
-      </div>
-
-      <div className="p-3">
-        <Button size={40} variant="outline">
-          Show more 10
-        </Button>
-      </div>
-    </div>
-  )
-}

apps/website/src/components/table-issues/filters/dropdown-filter.tsx

@@ -3,6 +3,7 @@ import { cloneElement, useState } from 'react'
 import { Avatar, Button, Input, Text } from '@status-im/components'
 import { DropdownMenu } from '@status-im/components/src/dropdown-menu'
 import { DropdownIcon, SearchIcon } from '@status-im/icons'
+import Image from 'next/image'
 
 import { useCurrentBreakpoint } from '@/hooks/use-current-breakpoint'
 
@@ -110,7 +111,7 @@ const DropdownFilter = (props: Props) => {
           })}
           {filteredData.length === 0 && (
             <div className="flex flex-col items-center justify-center p-2 py-1">
-              <img
+              <Image
                 className="pb-3 invert"
                 alt="No results"
                 src={'/assets/filters/empty.png'}

apps/website/src/components/table-issues/filters/dropdown-sort.tsx

@@ -3,6 +3,7 @@ import { useState } from 'react'
 import { IconButton, Text } from '@status-im/components'
 import { DropdownMenu } from '@status-im/components/src/dropdown-menu'
 import { SortIcon } from '@status-im/icons'
+import Image from 'next/image'
 
 type Data = {
   id: number
@@ -44,7 +45,7 @@ const DropdownSort = (props: Props) => {
           })}
           {data.length === 0 && (
             <div className="flex flex-col items-center justify-center p-2 py-1">
-              <img
+              <Image
                 className="pb-3 invert"
                 alt="No results"
                 src={'/assets/filters/empty.png'}

apps/website/src/components/table-issues/table-issues.tsx

@@ -219,8 +219,8 @@ const TableIssues = () => {
   const currentBreakpoint = useCurrentBreakpoint()
 
   return (
-    <div className="border-neutral-10  overflow-hidden rounded-2xl border">
+    <div className="overflow-hidden  rounded-2xl border border-neutral-10">
-      <div className="bg-neutral-5 border-neutral-10 flex border-b p-3">
+      <div className="flex border-b border-neutral-10 bg-neutral-5 p-3">
         <div className="flex w-full flex-col 2xl:flex-row 2xl:justify-between">
           <Tabs />
           <div className="flex-1">
@@ -275,12 +275,12 @@ const TableIssues = () => {
         </div>
       </div>
 
-      <div className="divide-neutral-10 divide-y">
+      <div className="divide-y divide-neutral-10">
         {issues.map(issue => (
           <Link
             key={issue.id}
             href={`https://github.com/status-im/status-react/issues/${issue.id}`}
-            className="hover:bg-neutral-5 flex items-center justify-between px-4 py-3 transition-colors duration-200"
+            className="flex items-center justify-between px-4 py-3 transition-colors duration-200 hover:bg-neutral-5"
           >
             <div className="flex flex-col">
               <Text size={15} weight="medium">