Switch to React based frontend

React-based frontend
leonmelein · Oct 1, 2024 · 6969be4 · 6969be4
2 parents c65b036 + af83d3a
commit 6969be4
Show file tree

Hide file tree

Showing 97 changed files with 57,682 additions and 60,399 deletions.
diff --git a/eslint.config.js b/eslint.config.js
@@ -0,0 +1,38 @@
+import js from '@eslint/js'
+import globals from 'globals'
+import react from 'eslint-plugin-react'
+import reactHooks from 'eslint-plugin-react-hooks'
+import reactRefresh from 'eslint-plugin-react-refresh'
+
+export default [
+  { ignores: ['dist'] },
+  {
+    files: ['**/*.{js,jsx}'],
+    languageOptions: {
+      ecmaVersion: 2020,
+      globals: globals.browser,
+      parserOptions: {
+        ecmaVersion: 'latest',
+        ecmaFeatures: { jsx: true },
+        sourceType: 'module',
+      },
+    },
+    settings: { react: { version: '18.3' } },
+    plugins: {
+      react,
+      'react-hooks': reactHooks,
+      'react-refresh': reactRefresh,
+    },
+    rules: {
+      ...js.configs.recommended.rules,
+      ...react.configs.recommended.rules,
+      ...react.configs['jsx-runtime'].rules,
+      ...reactHooks.configs.recommended.rules,
+      'react/jsx-no-target-blank': 'off',
+      'react-refresh/only-export-components': [
+        'warn',
+        { allowConstantExport: true },
+      ],
+    },
+  },
+]
diff --git a/index.html b/index.html
@@ -1,49 +1,17 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="nl" translate="no">
-<head>
-    <meta charset='utf-8' />
-    <title>Swimspots</title>
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="robots" content="notranslate" />
+    <title>Zwemplek</title>
     <link rel="manifest" href="manifest.json" />
-    <meta name='viewport' content='initial-scale=1,maximum-,scale=1,user-scalable=no' />
-    <link href="/src/css/style.css" rel="stylesheet"/>
-</head>
-<body>
-    <div id='header'>
-        <div class="title container">
-            <img class="logo" src="images/logo.svg" />
-            <h1>Zwemplek</h1>
-        </div>
-        <div class="searchbar">
-            <input class="text-3xl" id="searchbar" type="text" placeholder="Zoek op naam of plaats..." class="rounded-lg" autocomplete="off"/>
-            <button>
-                <div id="location" style="margin: auto;">
-                    <i class="mdi mdi-crosshairs-gps"></i>
-                </div>
-            </button>
-        </div>
-    </div>
-    <div class="results container hidden"></div>
-    <div class="placeholder container">
-        <div class="placeholder-contents">
-            <svg viewBox="0 0 195 107" class="illustration">
-                <g>
-                    <path
-                        d="M1.236,76.298c8.332,2.559 15.58,1.015 23.568,-2.347c7.511,-3.16 15.604,-5.541 25.897,-5.858c22.159,-0.684 28.147,9.915 44.703,10.018c14.812,0.092 27.09,-9.563 44.19,-9.831c9.452,-0.149 17.555,2.085 24.492,4.383c6.638,2.2 15.002,6.101 21.577,4.556c6.564,-1.542 7.809,-3.29 7.809,-3.29c-0,-0 1.206,12.221 -11.039,12.666c-12.54,0.455 -23.693,-9.116 -42.438,-9.159c-9.009,-0.021 -17.811,3.824 -27.086,6.7c-5.748,1.783 -11.814,3.128 -17.812,3.147c-18.573,0.059 -22.213,-9.996 -43.551,-10.177c-10.106,-0.086 -17.892,3.022 -25.528,6.074c-3.803,1.519 -10.316,3.562 -15.148,3.317c-3.852,-0.196 -6.36,-2.135 -7.534,-3.315c-2.361,-2.372 -2.1,-6.884 -2.1,-6.884Z"
-                        class="placeholder"></path>
-                    <path
-                        d="M0.509,95.362c9.096,2.902 16.386,1.176 24.374,-2.186c7.51,-3.16 16.131,-5.752 25.915,-5.887c22.438,-0.308 28.719,10.166 44.692,10.136c14.809,-0.028 26.998,-9.686 44.564,-9.81c17.3,-0.122 28.086,6.665 38.991,8.896c6.587,1.348 13.483,-2.561 13.483,-2.561c-0,-0 1.895,12.019 -11.078,12.034c-10.594,0.012 -24.725,-9.267 -41.449,-9.254c-14.506,0.011 -26.65,9.243 -42.321,9.717c-12.715,0.385 -18.731,-3.061 -25.891,-6.022c-5.053,-2.089 -10.593,-3.96 -19.819,-3.968c-13.341,-0.012 -19.143,3.624 -25.047,5.695c-6.171,2.165 -15.832,5.988 -22.319,1.597c-3.761,-2.546 -4.095,-8.387 -4.095,-8.387Z"
-                        class="placeholder"></path>
-                    <g>
-                        <circle cx="172.223" cy="29.573" r="21.84" style=""></circle>
-                        <path
-                            d="M146.284,57.72c-9.034,-0.69 -14.502,0.099 -21.343,1.986c-7.38,2.036 -19.048,7.692 -29.785,7.536c-9.036,-0.131 -14.414,-3.089 -17.313,-4.36c-4.794,-2.103 -13.635,-5.171 -22.022,-5.603c-7.007,-0.361 -11.409,0.367 -12.655,0.463c-0,0 0.407,-0.422 0.647,-0.51c11.251,-4.15 66.859,-24.391 66.859,-24.391l-15.635,-15.6c-4.059,0.037 -32.823,0.313 -42.96,0.01c-3.475,-0.104 -8.174,-3.281 -8.174,-7.849c-0,-5.273 3.673,-9.145 8.397,-9.145c5.564,-0 20.519,-0.058 32.298,-0.014c14.946,0.056 14.53,-0.058 16.557,0.447c2.174,0.541 4.436,2.939 9.969,8.554c4.65,4.719 11.093,11.17 17.253,17.311c16.76,16.712 35.175,35.237 35.175,35.237c-0,-0 -8.074,-3.37 -17.268,-4.072Z"
-                            style=""></path>
-                    </g>
-                </g>
-            </svg>
-            <h3 class="tagline">Zoek een veilige zwemplek<br/>in jouw buurt</h3>
-        </div>
-    </div>
-    <script type="module" src="./src/js/main.js"></script>
-</body>
+    <link rel="icon" href="/favicon.ico" sizes="48x48">
+    <link rel="icon" href="/favicon.svg" sizes="any" type="image/svg+xml">
+    <link rel="apple-touch-icon" href="/apple-touch-icon-180x180.png">
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/App.jsx"></script>
+  </body>
 </html>