sidski/Cinemateket
Archived
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

💄 fixed table design

Browse source 
Co-authored-by: Sindre Kjelsrud <kjelsrudsindre@gmail.com>
This commit is contained in:
haraldnilsen 2023-09-05 14:04:27 +02:00
parent a604592622
commit d9c11d4229
2 changed files with 19 additions and 12 deletions
Download patch file Download diff file Expand all files Collapse all files

5
src/App.css
View file

@ -4,6 +4,7 @@
:root { :root {
--bg: #27374d; --bg: #27374d;
--bg2: #1a2533;
--text-1: #dde6ed; --text-1: #dde6ed;
} }
@ -11,3 +12,7 @@ html {
background-color: var(--bg); background-color: var(--bg);
color: var(--text-1); color: var(--text-1);
} }
.card {
background-color: var(--bg2);
}

12
src/App.tsx
View file

@ -34,9 +34,10 @@ function App() {
return ( return (
<> <>
<q.div> <q.div className="flex flex-col justify-center items-center mx-auto w-3/4">
<q.div> <q.div className="flex flex-col w-full items-center">
<q.h1>All movies</q.h1> <q.h1>All movies</q.h1>
<q.div className="flex">
{!loading && totalPages && ( {!loading && totalPages && (
<Pagination <Pagination
currentPage={currentPage} currentPage={currentPage}
@ -45,17 +46,18 @@ function App() {
/> />
)} )}
</q.div> </q.div>
</q.div>
{!loading && movies ? ( {!loading && movies ? (
<q.div> <q.div>
<q.table> <q.table className="border-separate border-spacing-y-5">
<q.tr> <q.tr>
<q.th>Poster</q.th> <q.th>Poster</q.th>
<q.th>Title</q.th> <q.th>Title</q.th>
<q.th>Year</q.th> <q.th>Year</q.th>
</q.tr> </q.tr>
{movies.map((movie: any) => ( {movies.map((movie: any) => (
<q.tr> <q.tr className="card rounded-md">
<q.td> <q.td className="p-2">
<q.img src={movie.Poster} alt={movie.Title} width="100" /> <q.img src={movie.Poster} alt={movie.Title} width="100" />
</q.td> </q.td>
<q.td>{movie.Title}</q.td> <q.td>{movie.Title}</q.td>