basic table info row layout

src/components/ResourceTable.tsx

@@ -1,13 +1,53 @@
+import { PaymentType } from '@prisma/client';
+import Image from 'next/image';
+import Link from 'next/link';
+
+const ResourceInfo = () => {
+    const PriceIcons = ({type}: {type: PaymentType}) => {
+
+    }
+    
+    return (
+        <div className="p-4 space-x-4 flex flex-row">
+            <div className="h-full">
+            <Link href="https://google.com">
+                <div className="flex space-y-2 flex-col">
+                    <Image className="w-28 rounded-xl drop-shadow-lg border border-neutral-400" src="/resource_logos/word_success.png" alt="Word Success logo" width={512} height={512}/>
+                    <span 
+                    className="block bg-neutral-900 hover:bg-neutral-500 border border-neutral-900 text-center py-[1px] text-white rounded-lg">
+                        more info
+                    </span>
+                    </div>
+                </Link>
+            </div>
+            <div className="grow">
+                <h1 className="font-bold text-xl">Word Success</h1>
+                <p>Apple and Android</p>
+                <div className="">
+
+                </div>
+            </div>
+        </div>
+    )
+}
+
+const ResourceDescription = () => {
+    return (
+        <div className="p-2">
+            <p>Description here</p>
+        </div>
+    )
+}
 
 const ResourceTable = () => {
     const ResourceEntry = () => {
         return (
-            <tr>
+            <tr className="divide-x-[1px] divide-slate-300">
                 <td>
-                    test
+                    <ResourceInfo />
                 </td>
                 <td>
-                    test
+                    <ResourceDescription />
                 </td>
             </tr>
         )
@@ -15,11 +55,12 @@ const ResourceTable = () => {
 
     return(
     <div className="px-4 w-full">
-        <table className="table-fixed w-full bg-gray-200 rounded-xl overflow-hidden">
+        <div className="rounded-xl overflow-hidden border border-neutral-400">
-            <thead className="bg-neutral-800 rounded-xl overflow-hidden">
+            <table className="table-fixed w-full bg-neutral-200 drop-shadow-md">
+                <thead className="bg-gradient-to-t from-neutral-900 to-neutral-700 rounded-xl overflow-hidden">
                     <tr>
-                    <th>
+                        <th className="w-1/2">
-                        <span className="text-white block px-4 py-2 text-left">
+                            <span className="text-gray-300 block px-4 py-2 text-left">
                                 Resource
                             </span>
                         </th>
@@ -36,6 +77,7 @@ const ResourceTable = () => {
                 </tbody>
             </table>
         </div>
+    </div>
     );
 };