feat: character table

Author: VulpoTheDev

apps/web/src/app/(studio)/studio/(general)/characters/CharactersView.tsx

@@ -7,6 +7,9 @@ import React from 'react'
 import { FaEllipsisVertical } from 'react-icons/fa6'
 import CreateCharacterModal from '@/components/Modals/CreateCharacter'
 import { CharacterCard } from '@/components/layouts/Cards'
+import Avatar from '@/components/Avatar'
+import Checkbox from '@/components/layouts/Forms/Checkbox'
+import { LuEye, LuLock } from 'react-icons/lu'
 
 export default function CharactersView({ characters }: { characters: Character[] }) {
   const [isCreateModalOpen, setIsCreateModalOpen] = React.useState(false)
@@ -25,23 +28,92 @@ export default function CharactersView({ characters }: { characters: Character[]
           </div>
         }
       >
-        <div className="flex flex-1 items-center justify-center min-h-[60vh]">
-          {characters.length === 0 ? (
+        {characters.length === 0 ? (
+
+          <div className="flex flex-1 items-center justify-center min-h-[60vh]">
             <div className="flex flex-col items-center text-center">
               <h1 className="text-4xl">No one seems to be around...</h1>
               <p className="text-lg">Create a character or import through a Toyhouse account to get started!</p>
             </div>
-          ) : (
-      <div>
-        
-      </div>
-          )}
-        </div>
+          </div>
+
+        ) : (
+          <table className="w-full text-left text-sm">
+            <thead className="border-b border-200 text-purple-600">
+              <tr>
+                <th></th>
+                <th className="py-3">Character</th>
+                <th className="py-3">Date</th>
+                <th className="py-3">Ownership</th>
+                <th className="py-3">Visibility</th>
+              </tr>
+            </thead>
+            <tbody>
+              {characters.map((characters, index) => (
+                <tr key={characters.name} className="border-b border-100 hover:bg-200" onClick={() => window.location.href = `/studio/characters/${characters.id}`}>
+                  <td className="px-2">
+                    <Checkbox
+                      inputName={`character-select-${index}`}
+                      label=''
+                      checked={false}
+                      onChange={() => { }}
+                      disabled={false}
+                    />
+                  </td>
+                  <td className="flex items-center gap-3 py-4">
+                    <Avatar size={50} src={characters.avatarUrl} className='rounded-none' />
+                    <div>
+                      <div className="flex items-center gap-2">
+                        <span className="font-semibold text-lg">{characters.name}</span>
+                        {characters.mainCharacter && (
+                          <span className="text-xs px-2 py-0.5 bg-100 text-700 rounded-full border border-300">
+                            Default
+                          </span>
+                        )}
+                        {/* TODO: Toyhou.se Icon */}
+                      </div>
+                      <div className="text-sm text-gray-500">{characters.species}</div>
+                    </div>
+                  </td>
+                  <td className="py-4">
+                    {characters.adoptionStatus ? (
+                      <div className="text-purple-600 text-sm">
+                        Adopted on {new Date(characters.adoptionStatus.adoptionDate).toLocaleDateString()}
+                      </div>
+                    ) : (
+                      <>
+                        <div className="text-purple-600 text-sm">
+                          Created
+                        </div>
+                        <div className="font-medium">{new Date(characters.createdAt).toLocaleDateString()}</div>
+                      </>
+                    )}
+
+                  </td>
+                  <td className="py-4 font-medium">{characters.owner.handle}</td>
+                  <td className="py-4">
+                    {characters.visibility === 'public' ? (
+                      <div className="flex items-center gap-1 text-600">
+                        <LuEye size={20} />
+                        <span>Public</span>
+                      </div>
+                    ) : (
+                      <div className="flex items-center gap-1 text-600">
+                        <LuLock size={20} />
+                        <span>Private</span>
+                      </div>
+                    )}
+                  </td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        )}
       </Group>
       <CreateCharacterModal
         createCharacterModalShown={isCreateModalOpen}
         toggleCreateCharacterModal={toggleCreateCharacterModal}
       />
-    </div>
+    </div >
   )
 }

apps/web/src/app/(studio)/studio/(general)/characters/[id]/page.tsx

@@ -0,0 +1,7 @@
+import React from 'react'
+
+export default function Page() {
+  return (
+    <div>Page</div>
+  )
+}