💄 added svg to headers and fixed styling of table

Co-authored-by: Sindre Kjelsrud <kjelsrudsindre@gmail.com>

package.json

@@ -17,7 +17,8 @@
     "react-modal": "^3.16.1"
   },
   "devDependencies": {
-    "@types/react": "^18.2.15",
+    "@types/node": "^20.5.9",
+    "@types/react": "^18.2.21",
     "@types/react-dom": "^18.2.7",
     "@types/react-modal": "^3.16.0",
     "@typescript-eslint/eslint-plugin": "^6.0.0",

public/arrow-down-up-svgrepo-com.svg

@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="utf-8"?><!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+<svg width="800px" height="800px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M5.70711 16.1359C5.31659 16.5264 5.31659 17.1596 5.70711 17.5501L10.5993 22.4375C11.3805 23.2179 12.6463 23.2176 13.4271 22.4369L18.3174 17.5465C18.708 17.156 18.708 16.5228 18.3174 16.1323C17.9269 15.7418 17.2937 15.7418 16.9032 16.1323L12.7176 20.3179C12.3271 20.7085 11.6939 20.7085 11.3034 20.3179L7.12132 16.1359C6.7308 15.7454 6.09763 15.7454 5.70711 16.1359Z" fill="#FFFFFF"/>
+<path d="M18.3174 7.88675C18.708 7.49623 18.708 6.86307 18.3174 6.47254L13.4252 1.58509C12.644 0.804698 11.3783 0.805008 10.5975 1.58579L5.70711 6.47615C5.31658 6.86667 5.31658 7.49984 5.70711 7.89036C6.09763 8.28089 6.7308 8.28089 7.12132 7.89036L11.307 3.70472C11.6975 3.31419 12.3307 3.31419 12.7212 3.70472L16.9032 7.88675C17.2937 8.27728 17.9269 8.27728 18.3174 7.88675Z" fill="#FFFFFF"/>
+</svg>

src/App.tsx

@@ -1,15 +1,8 @@
 import { useEffect, useState } from 'react'
 import './App.css'
 import q from 'qjuul'
-import {
-  MovieTableRow,
-  MovieForm,
-  Pagination,
-  MovieTable,
-  MovieModal,
-} from './components'
+import { MovieForm, Pagination, MovieTable, MovieModal } from './components'
 import type { movieObject } from './types/movie'
-import Modal from 'react-modal'
 
 function App() {
   const API_MOVIE_KEY = 'd92949d8'

src/components/MovieTable/index.tsx

@@ -1,6 +1,7 @@
 import type { movieObject } from '../../types/movie'
 import q from 'qjuul'
 import MovieTableRow from '../MovieTableRow'
+import arrow from '../../../public/arrow-down-up-svgrepo-com.svg'
 
 interface MovieTableProps {
   handleModalOpen: (movie: movieObject) => void
@@ -16,11 +17,27 @@ const MovieTable: React.FC<MovieTableProps> = ({
   return (
     <q.div className="w-full">
       <q.table className="border-separate border-spacing-y-5 w-full">
-        <q.thead>
+        <q.thead className="">
           <q.tr>
-            <q.th>Poster</q.th>
-            <q.th onClick={() => sortHandler('title')}>Title</q.th>
-            <q.th onClick={() => sortHandler('year')}>Year</q.th>
+            <q.th className="text-left"></q.th>
+            <q.th
+              className=" text-left hover:cursor-pointer"
+              onClick={() => sortHandler('title')}
+            >
+              <q.div className="flex font-bold">
+                Title
+                <q.img src={arrow} className="w-3 ml-1 " />
+              </q.div>
+            </q.th>
+            <q.th
+              className="text-left hover:cursor-pointer"
+              onClick={() => sortHandler('year')}
+            >
+              <q.div className="flex">
+                Year
+                <q.img src={arrow} className="w-3 ml-1" />
+              </q.div>
+            </q.th>
           </q.tr>
         </q.thead>
         <q.tbody>

src/vite-env.d.ts

@@ -1 +1,10 @@
 /// <reference types="vite/client" />
+
+declare module '*.svg' {
+  import React = require('react')
+  export const ReactComponent: React.FunctionComponent<
+    React.SVGProps<SVGSVGElement>
+  >
+  const src: string
+  export default src
+}

tsconfig.json

@@ -20,6 +20,6 @@
     "noUnusedParameters": true,
     "noFallthroughCasesInSwitch": true
   },
-  "include": ["src"],
+  "include": ["src", "src/vite-env.d.ts"],
   "references": [{ "path": "./tsconfig.node.json" }]
 }