feat: updated director browse page

frontend/src/components/BrowseDirectors.tsx

+import { Space, Card, Table } from "antd";
 import React from "react"
+import { Link } from "react-router-dom";
+import { DirectorIO } from "./Preview"
+
+const exampleDirectors: DirectorIO[] = [{
+    id: "123",
+    name: "Karel",
+    surname: "Macka",
+    birthdate: "20.2.1987",
+  },
+  {
+    id: "456",
+    name: "Jan",
+    surname: "Vomacka",
+    birthdate: "20.12.1990",
+  },
+  {
+    id: "890",
+    name: "Karel",
+    surname: "Vomacka",
+    birthdate: "1.2.1987",
+  },
+  {
+    id: "666",
+    name: "Pan",
+    surname: "Natas",
+    birthdate: "20.2.1687",
+  },
+]
+
+
+
+
 
 
 export const BrowseDirectors = () => {
+
+    const columns = [
+        {
+          title: "Name",
+          dataIndex: "name",
+          sorter: (a:DirectorIO, b:DirectorIO) => {
+            //surname has higher priority
+            if(a.surname < b.surname){return -1;}
+            if(a.surname > b.surname){return 1;}
+            
+            if(a.name < b.name){return -1;}
+            if(a.name > b.name){return 1;}
+            return 0;
+    
+            
+          },
+          
+          render: (text: string, record: DirectorIO) => (
+            <Link to={`/director/${record.id}`}>
+              <a>{record.name} {record.surname}</a>
+            </Link>
+          ),
+        },
+        
+        {
+           title: "Birthdate",
+           className: "birthdate",
+           dataIndex: "birthdate",
+           sorter: (a:DirectorIO, b:DirectorIO) => {
+            const first = a.birthdate.split('.').reverse();
+            const second = b.birthdate.split('.').reverse();
+            if(first[0] > second[0]){return 1 ;}
+            if(first[0] < second[0]){return -1 ;}
+    
+            if(first[1] > second[1]){return 1 ;}
+            if(first[1] < second[1]){return -1 ;}
+    
+            if(first[2] > second[2]){return 1 ;}
+            if(first[2] < second[2]){return -1 ;}
+            return 0;},
+        }
+        
+      ];
+
+
+
+
+
     return (
-        <div> This will be Director Browse page.</div>
-    )
+        <div className="browse-container">
+          <Space direction="vertical" size="middle" style={{ padding: "4%" }}>
+            <Table
+            columns={columns}
+            dataSource={exampleDirectors}
+            >
+
+            </Table>
+            
+          </Space>
+        </div>
+      );
 }
\ No newline at end of file

frontend/src/components/SearchPage.tsx

@@ -81,6 +81,7 @@ export const SearchPage = () => {
       },
     },
     {
+      
       title: "Release Date",
       dataIndex: "published",
       sorter: (a:MovieIO, b:MovieIO) => {
@@ -148,7 +149,7 @@ export const SearchPage = () => {
             onRow={(record, rowIndex) => {
               return {
                 onClick: (event) => {
-                  console.log(record.id);
+                  console.log(record.id); //remove later
                 },
               }; //here change to view movie
             }}