brandon/uiowaATR
1
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases Wiki Activity

basic table info row layout

Browse Source
This commit is contained in:
Brandon Egger 2023-03-15 20:56:15 -05:00
parent fb57f72d7b
commit 094c3b3b8a
2 changed files with 65 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
public/resource_logos/word_success.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 20 KiB

88
src/components/ResourceTable.tsx
View File

@ -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,26 +55,28 @@ const ResourceTable = () => {
return(
<div className="px-4 w-full">
<table className="table-fixed w-full bg-gray-200 rounded-xl overflow-hidden">
<thead className="bg-neutral-800 rounded-xl overflow-hidden">
<tr>
<th>
<span className="text-white block px-4 py-2 text-left">
Resource
</span>
</th>
<th>
<span className="text-white block px-4 py-2 text-left">
Description
</span>
</th>
</tr>
</thead>
<tbody className="divide-y-[1px] divide-slate-300">
<ResourceEntry />
<ResourceEntry />
</tbody>
</table>
<div className="rounded-xl overflow-hidden border border-neutral-400">
<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 className="w-1/2">
<span className="text-gray-300 block px-4 py-2 text-left">
Resource
</span>
</th>
<th>
<span className="text-white block px-4 py-2 text-left">
Description
</span>
</th>
</tr>
</thead>
<tbody className="divide-y-[1px] divide-slate-300">
<ResourceEntry />
<ResourceEntry />
</tbody>
</table>
</div>
</div>
);
};