perf: only use the bootstrap js that we need (#77)

index.html

@@ -7,11 +7,6 @@
     <meta name="theme-color" content="#000000" />
     <meta name="description" content="View soccer goals as they happen around the world" />
     <link rel="apple-touch-icon" href="/logo192.png" />
-    <script
-      src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"
-      integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL"
-      crossorigin="anonymous"
-    ></script>
     <!--
       manifest.json provides metadata used when your web app is installed on a
       user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/

package.json

@@ -7,6 +7,8 @@
     "@types/react": "^18.0.21",
     "@types/react-dom": "^18.0.6",
     "axios": "^0.26.1",
+    "bootstrap": "^5.3.2",
+    "popper": "^1.0.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-paginate": "^8.1.3",

src/components/Select.tsx

@@ -1,3 +1,4 @@
+import 'bootstrap/js/dist/dropdown';
 import {useState} from 'react';
 
 interface Option {

src/pages/Goals.tsx

@@ -6,6 +6,7 @@ import {getGoals, GetGoalsFilter, GetGoalsResponse} from '../lib/api/goals';
 import {getLeagues, GetLeaguesResponse} from '../lib/api/leagues';
 import {getTeams, GetTeamsResponse} from '../lib/api/teams';
 
+import 'bootstrap/js/dist/tab';
 import {useEffect, useState} from 'react';
 import ReactPaginate from 'react-paginate';
 import {FixturesList} from '../components/FixturesList';