From 8abc9dd13e1e42d4a5c88dd05ab668e9e3116000 Mon Sep 17 00:00:00 2001
From: haraldnilsen <harald_998@hotmail.com>
Date: Wed, 6 Sep 2023 10:50:19 +0200
Subject: [PATCH] :lipstick: added svg to headers and fixed styling of table

Co-authored-by: Sindre Kjelsrud <kjelsrudsindre@gmail.com>
---
 package.json                         |  3 ++-
 public/arrow-down-up-svgrepo-com.svg |  5 +++++
 src/App.tsx                          |  9 +--------
 src/components/MovieTable/index.tsx  | 25 +++++++++++++++++++++----
 src/vite-env.d.ts                    |  9 +++++++++
 tsconfig.json                        |  2 +-
 6 files changed, 39 insertions(+), 14 deletions(-)
 create mode 100644 public/arrow-down-up-svgrepo-com.svg

diff --git a/package.json b/package.json
index 338a3ea..81f4f79 100644
--- a/package.json
+++ b/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",
diff --git a/public/arrow-down-up-svgrepo-com.svg b/public/arrow-down-up-svgrepo-com.svg
new file mode 100644
index 0000000..4664f59
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/src/App.tsx b/src/App.tsx
index dc0fe44..c8a7ec1 100644
--- a/src/App.tsx
+++ b/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'
diff --git a/src/components/MovieTable/index.tsx b/src/components/MovieTable/index.tsx
index e769b5d..132ddc1 100644
--- a/src/components/MovieTable/index.tsx
+++ b/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>
diff --git a/src/vite-env.d.ts b/src/vite-env.d.ts
index 11f02fe..5537e74 100644
--- a/src/vite-env.d.ts
+++ b/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
+}
diff --git a/tsconfig.json b/tsconfig.json
index a7fc6fb..e328d9d 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -20,6 +20,6 @@
     "noUnusedParameters": true,
     "noFallthroughCasesInSwitch": true
   },
-  "include": ["src"],
+  "include": ["src", "src/vite-env.d.ts"],
   "references": [{ "path": "./tsconfig.node.json" }]
 }