add search function

resources/js/Components/SetPreview.vue

@@ -1,8 +1,8 @@
 <template>
-    <div @click="reroute" class="w-[30rem] min-h-28 mr-4 border border-gray-500 p-4 rounded-lg m-4 hover:scale-110 cursor-pointer">
+    <div @click="reroute" class="w-[30rem] max-h-32 min-h-32 relative mr-4 border border-gray-500 p-4 rounded-lg m-4 hover:scale-110 cursor-pointer">
         <h1 class="font-bold text-xl">{{ set.title }}</h1>
         <h2>{{ set.description }}</h2>
-        <span class="text-sm italic">Last Update {{ updatedAt }}</span>
+        <span class="text-sm italic mt-auto absolute bottom-3 right-3">Last Update {{ updatedAt }}</span>
     </div>
 </template>
 <script>

resources/js/Pages/Auth/PasswordReset.vue

@@ -0,0 +1,11 @@
+<template>
+    <div class="flex items-center justify-center">
+        <h1 class="rainbow">Password Reset</h1>
+    </div>
+</template>
+<script>
+export default {
+    name: "PasswordReset",
+};
+</script>
+<style></style>

resources/js/Pages/Index.vue

@@ -10,7 +10,7 @@
         <div class="h-[1px] bg-[#333333] w-full mt-4"></div>
         <div class="mt-8">
             <input
-                @keypress.prevent.enter="search"
+                @keydown="search"
                 placeholder="Search"
                 v-model="query"
                 class="bg-[#333333] px-4 py-2 rounded-3xl w-[40rem]"
@@ -21,7 +21,7 @@
         </div>
         <div class="mt-12 flex flex-wrap items-center justify-start">
             <set-preview
-                v-for="set in sets"
+                v-for="set in previewSets"
                 :key="set.id"
                 :set="set"
             ></set-preview>
@@ -60,12 +60,15 @@ export default {
     data() {
         return {
             query: "",
+            previewSets: this.sets,
         };
     },
 
     methods: {
         search() {
-            console.log("searching...", this.sets);
+            this.previewSets = this.sets.filter((set) =>
+                set.title.toLowerCase().includes(this.query.toLowerCase())
+            );
         },
         redirect() {
             window.location = "/import";

routes/web.php

@@ -24,7 +24,7 @@
     if (Auth::check()){
         $user = Auth::user();
 
-        $sets = DB::table("sets")->where("user_id", $user->id)->limit(20)->get();
+        $sets = DB::table("sets")->where("user_id", $user->id)->get();
 
         return Inertia::render('Index', [
             "userName" => "{$user->first_name} {$user->last_name}",
@@ -62,4 +62,9 @@
 
 Route::get("/train/{set}", [SetController::class, 'train']);
 
+Route::get("/passwordreset", function () {
+    return Inertia::render("Auth/PasswordReset", [
+    ]);
+});
+
 require __DIR__.'/auth.php';