added doc and cleaned code

src/components/ItemComponents/EditItemForm.vue

 <template>
+  <!-- Form for editing an item -->
   <div
     class="md:ring-1 ring-gray-300 rounded-xl overflow-hidden mx-auto mb-auto max-w-md w-full p-4"
   >
@@ -355,6 +356,10 @@ export default {
       return true;
     },
 
+    /**
+     * Validation gets checked, and if it returns true
+     * the item and the images gets updated.
+     */
     async saveClicked() {
       if (this.checkValidation()) {
         let itemInfo = {
@@ -376,6 +381,12 @@ export default {
       }
     },
 
+    /**
+     * Adds image when an image is selected from file explorer.
+     * Posts it to the db and gets the id of the image posted in return.
+     * Adds that id to an image URL and saves it in an array.
+     * That array containing image URLs gets posted to the db when save is clicked.
+     */
     async addImage(event) {
       var that = this;
       let image = event.target.files[0];
@@ -390,6 +401,11 @@ export default {
       fileReader.readAsArrayBuffer(image);
     },
 
+    /**
+     * Runs every time a chech box under 'grupper' is changed(checked/unchecked).
+     * Finds out if it was checked or unchecked and adds/removes the community from
+     * the array based on that.
+     */
     onChangeCommunity(e) {
       this.updatedItem.selectedCommunityId = e.target.value;
       let alreadyInGroupList = false;
@@ -417,11 +433,19 @@ export default {
       }
     },
 
+    /**
+     * Updates the selected category when it gets changed changes.
+     */
     onChangeCategory(e) {
       this.updatedItem.selectedCategory = e.target.value;
       this.updatedItem.selectedCategories = [e.target.value];
     },
 
+    /**
+     * pre-selects (check marks) the community/communities the item
+     * is posted in so the user can see where the item already is posted and
+     * then change the community/communities
+     */
     isInSelectedCommunity(id) {
       for (let i in this.updatedItem.selectedCommunities) {
         if (this.updatedItem.selectedCommunities[i] == id) {
@@ -430,6 +454,10 @@ export default {
       }
       return false;
     },
+
+    /**
+     * Removes image from item
+     */
     async removeImage(image) {
       let newImages = [];
       for (let i in this.updatedItem.images) {
@@ -441,6 +469,10 @@ export default {
     },
   },
 
+  /**
+   * Gets the item before the page gets mounted so the item info
+   * is filled in and ready to be displayed to user.
+   */
   async beforeCreate() {
     let itemID = await this.$router.currentRoute.value.params.id;
     let item = await ListingService.getItem(itemID);

src/components/ItemComponents/ItemCard.vue

 <template>
-  <div class="mt-5 px-3">
+  <!-- Item card, displays title, address, price per day and a picture -->
+  <div class="mt-5 px-5">
     <div
       class="w-full h-full rounded bg-gray-100 ring-1 ring-gray-200 overflow-hidden display:inline-block correct-size cursor-pointer"
     >

src/components/ItemComponents/NewItemForm.vue

 <template>
+  <!-- Form for adding a new item -->
   <div
     class="md:ring-1 ring-gray-300 rounded-xl overflow-hidden mx-auto mb-auto max-w-md w-full p-4"
   >
@@ -58,7 +59,7 @@
         </option>
       </select>
 
-      <!-- error message for select box -->
+      <!-- error message for select category -->
       <div
         class="text-error-medium"
         v-for="(error, index) of v$.item.select.$errors"
@@ -70,7 +71,7 @@
       </div>
     </div>
 
-    <!-- Grupper -->
+    <!-- Community -->
     <div class="mb-6">
       <label class="block text-sm font-medium text-gray-900 dark:text-gray-400"
         >Grupper</label
@@ -95,9 +96,9 @@
         </ul>
       </div>
       <!-- Error message for community -->
-      <label class="text-error-medium text-sm block">{{
-        groupErrorMessage
-      }}</label>
+      <label class="text-error-medium text-sm block">
+        {{ groupErrorMessage }}
+      </label>
     </div>
 
     <!-- price -->
@@ -198,8 +199,10 @@
         accept="image/png"
       />
 
+      <!-- Opens file explorer -->
       <colored-button :text="'Velg bilde'" @click="$refs.file.click()" />
 
+      <!-- Shows chosen images -->
       <div v-for="image in item.images" :key="image" class="m-2">
         <form-image-display :image="image" @remove="removeImage(image)" />
       </div>
@@ -307,7 +310,6 @@ export default {
         selectedGroupId: -1,
         selectedGroups: [],
       },
-      //Kategorier skal legges inn ved api/hente fra db, her må det endres etterhvert
       categories: [
         "Antikviteter og kunst",
         "Dyr og utstyr",
@@ -326,6 +328,12 @@ export default {
     };
   },
   methods: {
+
+    /**
+     * Checks validation. Checks also if any community is selected.
+     * If no community is selected or any other field isn't valid
+     * false is returned, otherwise true is returned.
+     */
     checkValidation: function () {
       this.v$.item.$touch();
       if (this.v$.item.$invalid || this.item.selectedGroups.length === 0) {
@@ -337,6 +345,11 @@ export default {
       return true;
     },
 
+    /**
+     * When save is clicked, the validation gets checked. If validated,
+     * the user is parsed from the token to get the userId. Then the item
+     * and the pictures are posted to db.
+     */
     async saveClicked() {
       if (this.checkValidation()) {
         this.checkUser();
@@ -358,11 +371,20 @@ export default {
       }
     },
 
+    /**
+     * Parses user from token and uses it when posting item in saveClciked method
+     */
     checkUser: async function () {
       let user = parseUserFromToken(this.$store.state.user.token);
       this.item.userId = parseInt(user.accountId);
     },
 
+    /**
+     * Adds image when an image is selected from file explorer.
+     * Posts it to the db and gets the id of the image posted in return.
+     * Adds that id to an image URL and saves it in an array.
+     * That array containing image URLs gets posted to the db when save is clicked.
+     */
     addImage: async function (event) {
       var that = this;
       let image = event.target.files[0];
@@ -377,6 +399,11 @@ export default {
       fileReader.readAsArrayBuffer(image);
     },
 
+    /**
+     * Runs every time a chech box under 'grupper' is changed(checked/unchecked).
+     * Finds out if it was checked or unchecked and adds/removes the community from
+     * the array based on that.
+     */
     onChangeGroup: function (e) {
       this.selectedGroupId = e.target.value;
       let alreadyInGroupList = false;
@@ -397,6 +424,7 @@ export default {
       }
     },
 
+
     async removeImage(image) {
       let newImages = [];
       for (let i in this.item.images) {

src/components/ItemComponents/SearchItemList.vue

 <template>
+  <!-- A template for searching in item list -->
   <section class="relative w-full max-w-md px-5 py-4 mx-auto rounded-md">
     <div class="relative" id="searchComponent">
       <span class="absolute inset-y-0 left-0 flex items-center pl-3">
@@ -54,12 +55,6 @@ export default {
     },
   },
 
-  /**
-   * Her må det lages en metode som henter alle items (i en gruppe) fra databasen.
-   * De kan deretter bli pusha inn i items array, og da burde de bli displayet i lista.
-   * Når denne metoden er på plass kan items[] i data tømmes. Da vil alt dataen komme fra db.
-   */
-
   data() {
     return {
       items: [

src/views/ItemViews/EditItemView.vue

 <template>
+  <!-- A view for editing the item -->
   <div class="h-screen grid md:mt-8">
-    <edit-item-form :initialItem="initialItem" :communities="communities" />
+    <edit-item-form/>
   </div>
 </template>
 

src/views/ItemViews/NewItemView.vue

@@ -14,5 +14,3 @@ export default {
   },
 };
 </script>
-
-<style scoped></style>

src/views/ItemViews/SearchItemListView.vue

 <template>
+  <!-- View for search item component -->
   <SearchItemListComponent></SearchItemListComponent>
 </template>
 
@@ -11,5 +12,3 @@ export default {
   },
 };
 </script>
-
-<style scoped></style>

tests/unit/component-tests/community-component-tests/__snapshots__/item-card.spec.js.snap

@@ -2,42 +2,49 @@
 
 exports[`ItemCard component renders correctly 1`] = `
 <div
-  class="mt-5 px-3"
+  data-v-app=""
 >
+  
+  <!-- Item card, displays title, address, price per day and a picture -->
   <div
-    class="w-full h-full rounded bg-gray-100 ring-1 ring-gray-200 overflow-hidden display:inline-block correct-size cursor-pointer"
+    class="mt-5 px-5"
   >
     <div
-      class="relative h-0 pb-[66.7%]"
+      class="w-full h-full rounded bg-gray-100 ring-1 ring-gray-200 overflow-hidden display:inline-block correct-size cursor-pointer"
     >
-      <img
-        alt="Item image"
-        class="w-full h-full object-contain absolute"
-        src="String"
-      />
-    </div>
-    <div
-      class="p-1 m-1 bottom-0"
-    >
-      <p
-        class="font-bold text-sm"
-        id="title"
-      >
-        String
-      </p>
-      <p
-        class="text-gray-700 text-xs"
-        id="price"
+      <div
+        class="relative h-0 pb-[66.7%]"
       >
-        0 kr 
-      </p>
-      <p
-        class="text-gray-700 text-xs font-bold"
-        id="adress"
+        <img
+          alt="Item image"
+          class="w-full h-full object-contain absolute"
+          src="String"
+        />
+      </div>
+      <div
+        class="p-1 m-1 bottom-0"
       >
-        String
-      </p>
+        <p
+          class="font-bold text-sm"
+          id="title"
+        >
+          String
+        </p>
+        <p
+          class="text-gray-700 text-xs"
+          id="price"
+        >
+          0 kr 
+        </p>
+        <p
+          class="text-gray-700 text-xs font-bold"
+          id="adress"
+        >
+          String
+        </p>
+      </div>
     </div>
   </div>
+  
 </div>
 `;

tests/unit/component-tests/community-component-tests/__snapshots__/new-item-form.spec.js.snap

@@ -2,235 +2,244 @@
 
 exports[`NewItemForm component renders correctly 1`] = `
 <div
-  class="md:ring-1 ring-gray-300 rounded-xl overflow-hidden mx-auto mb-auto max-w-md w-full p-4"
+  data-v-app=""
 >
-  <!-- Component heading -->
-  <h3
-    class="text-xl font-medium text-center text-primary-light mt-4 mb-8"
-  >
-     Opprett ny utleie 
-  </h3>
-  <!-- Title -->
-  <div
-    class="mb-6"
-  >
-    <label
-      class="block mb-2 text-sm font-medium text-gray-900 dark:text-gray-300"
-      id="titleLabel"
-    >
-      Tittel
-    </label>
-    <input
-      class="block w-full px-4 py-2 mt-2 text-gray-700 placeholder-gray-500 bg-white border rounded-md dark:bg-gray-800 dark:border-gray-600 dark:placeholder-gray-400 focus:border-primary-light dark:focus:border-primary-light focus:ring-opacity-40 focus:outline-none focus:ring focus:ring-primary-light"
-      id="title"
-      required=""
-      type="text"
-    />
-    <!-- error message for title-->
-    
-    
-  </div>
-  <!-- Select category -->
+  
+  <!-- Form for adding a new item -->
   <div
-    class="mb-6"
+    class="md:ring-1 ring-gray-300 rounded-xl overflow-hidden mx-auto mb-auto max-w-md w-full p-4"
   >
-    <label
-      class="block mb-2 text-sm font-medium text-gray-900 dark:text-gray-400"
-      id="selectCategoryLabel"
+    <!-- Component heading -->
+    <h3
+      class="text-xl font-medium text-center text-primary-light mt-4 mb-8"
     >
-      Kategori
-    </label>
-    <select
-      class="block w-full px-4 py-2 mt-2 text-gray-700 placeholder-gray-500 bg-white border rounded-md dark:bg-gray-800 dark:border-gray-600 dark:placeholder-gray-400 focus:border-primary-light dark:focus:border-primary-light focus:ring-opacity-40 focus:outline-none focus:ring focus:ring-primary-light"
-      id="categories"
+       Opprett ny utleie 
+    </h3>
+    <!-- Title -->
+    <div
+      class="mb-6"
     >
-      <option
-        class="text-gray-400"
-        disabled=""
-        value=""
+      <label
+        class="block mb-2 text-sm font-medium text-gray-900 dark:text-gray-300"
+        id="titleLabel"
       >
-         Velg en kategori 
-      </option>
+        Tittel
+      </label>
+      <input
+        class="block w-full px-4 py-2 mt-2 text-gray-700 placeholder-gray-500 bg-white border rounded-md dark:bg-gray-800 dark:border-gray-600 dark:placeholder-gray-400 focus:border-primary-light dark:focus:border-primary-light focus:ring-opacity-40 focus:outline-none focus:ring focus:ring-primary-light"
+        id="title"
+        required=""
+        type="text"
+      />
+      <!-- error message for title-->
       
-      <option
-        class="text-gray-900 text-sm"
-      >
-        Antikviteter og kunst
-      </option>
-      <option
-        class="text-gray-900 text-sm"
-      >
-        Dyr og utstyr
-      </option>
-      <option
-        class="text-gray-900 text-sm"
+      
+    </div>
+    <!-- Select category -->
+    <div
+      class="mb-6"
+    >
+      <label
+        class="block mb-2 text-sm font-medium text-gray-900 dark:text-gray-400"
+        id="selectCategoryLabel"
       >
-        Elektronikk og hvitevarer
-      </option>
-      <option
-        class="text-gray-900 text-sm"
+        Kategori
+      </label>
+      <select
+        class="block w-full px-4 py-2 mt-2 text-gray-700 placeholder-gray-500 bg-white border rounded-md dark:bg-gray-800 dark:border-gray-600 dark:placeholder-gray-400 focus:border-primary-light dark:focus:border-primary-light focus:ring-opacity-40 focus:outline-none focus:ring focus:ring-primary-light"
+        id="categories"
       >
-        Foreldre og barn
-      </option>
-      <option
-        class="text-gray-900 text-sm"
+        <option
+          class="text-gray-400"
+          disabled=""
+          value=""
+        >
+           Velg en kategori 
+        </option>
+        
+        <option
+          class="text-gray-900 text-sm"
+        >
+          Antikviteter og kunst
+        </option>
+        <option
+          class="text-gray-900 text-sm"
+        >
+          Dyr og utstyr
+        </option>
+        <option
+          class="text-gray-900 text-sm"
+        >
+          Elektronikk og hvitevarer
+        </option>
+        <option
+          class="text-gray-900 text-sm"
+        >
+          Foreldre og barn
+        </option>
+        <option
+          class="text-gray-900 text-sm"
+        >
+          Fritid, hobby og underholdning
+        </option>
+        <option
+          class="text-gray-900 text-sm"
+        >
+          Hage, oppussing og hus
+        </option>
+        <option
+          class="text-gray-900 text-sm"
+        >
+          Klær, kosmetikk og tilbehør
+        </option>
+        <option
+          class="text-gray-900 text-sm"
+        >
+          Møbler og interiør
+        </option>
+        <option
+          class="text-gray-900 text-sm"
+        >
+          Næringsvirksomhet
+        </option>
+        <option
+          class="text-gray-900 text-sm"
+        >
+          Sport og friluftsliv
+        </option>
+        <option
+          class="text-gray-900 text-sm"
+        >
+          Utstyr til bil, båt og MC
+        </option>
+        
+      </select>
+      <!-- error message for select category -->
+      
+      
+    </div>
+    <!-- Community -->
+    <div
+      class="mb-6"
+    >
+      <label
+        class="block text-sm font-medium text-gray-900 dark:text-gray-400"
       >
-        Fritid, hobby og underholdning
-      </option>
-      <option
-        class="text-gray-900 text-sm"
+        Grupper
+      </label>
+      <div
+        class="overflow-auto w-full max-h-32 mt-2 text-base list-none bg-white rounded divide-y divide-gray-100 dark:bg-gray-700"
       >
-        Hage, oppussing og hus
-      </option>
-      <option
-        class="text-gray-900 text-sm"
+        <ul
+          aria-labelledby="dropdownDefault"
+          class="py-1"
+        >
+          <li>
+            
+            
+          </li>
+        </ul>
+      </div>
+      <!-- Error message for community -->
+      <label
+        class="text-error-medium text-sm block"
+      />
+    </div>
+    <!-- price -->
+    <div
+      class="mb-6 mt-4"
+    >
+      <label
+        class="block mb-2 text-sm font-medium text-gray-900 dark:text-gray-300"
+        id="priceLabel"
       >
-        Klær, kosmetikk og tilbehør
-      </option>
-      <option
-        class="text-gray-900 text-sm"
+        Pris per dag
+      </label>
+      <input
+        class="block w-full px-4 py-2 mt-2 text-gray-700 placeholder-gray-500 bg-white border rounded-md dark:bg-gray-800 dark:border-gray-600 dark:placeholder-gray-400 focus:border-primary-light dark:focus:border-primary-light focus:ring-opacity-40 focus:outline-none focus:ring focus:ring-primary-light"
+        id="price"
+        required=""
+        type="number"
+      />
+      <!-- error message for price -->
+      
+      
+    </div>
+    <!-- Description -->
+    <div
+      class="mb-6"
+    >
+      <label
+        class="block mb-2 text-sm font-medium text-gray-900 dark:text-gray-400"
+        id="descriptionLabel"
       >
-        Møbler og interiør
-      </option>
-      <option
-        class="text-gray-900 text-sm"
+        Beskrivelse
+      </label>
+      <textarea
+        class="block w-full px-4 py-2 mt-2 text-gray-700 placeholder-gray-500 bg-white border rounded-md dark:bg-gray-800 dark:border-gray-600 dark:placeholder-gray-400 focus:border-primary-light dark:focus:border-primary-light focus:ring-opacity-40 focus:outline-none focus:ring focus:ring-primary-light"
+        id="description"
+        required=""
+        rows="4"
+      />
+      <!-- error message for description -->
+      
+      
+    </div>
+    <!-- Address -->
+    <div
+      class="mb-6"
+    >
+      <label
+        class="block mb-2 text-sm font-medium text-gray-900 dark:text-gray-300"
+        id="addressLabel"
       >
-        Næringsvirksomhet
-      </option>
-      <option
-        class="text-gray-900 text-sm"
+        Adresse
+      </label>
+      <input
+        class="block w-full px-4 py-2 mt-2 text-gray-700 placeholder-gray-500 bg-white border rounded-md dark:bg-gray-800 dark:border-gray-600 dark:placeholder-gray-400 focus:border-primary-light dark:focus:border-primary-light focus:ring-opacity-40 focus:outline-none focus:ring focus:ring-primary-light"
+        id="adress"
+        required=""
+        type="text"
+      />
+      <!-- error message for address-->
+      
+      
+    </div>
+    <!-- Images -->
+    <div>
+      <label
+        class="block mb-2 text-sm font-medium text-gray-900 dark:text-gray-400"
+        id="imageLabel"
       >
-        Sport og friluftsliv
-      </option>
-      <option
-        class="text-gray-900 text-sm"
+         Bilder (bildene må være .png) 
+      </label>
+      <input
+        accept="image/png"
+        style="display: none;"
+        type="file"
+      />
+      <!-- Opens file explorer -->
+      <button
+        class="flex items-center px-2 py-2 font-medium tracking-wide capitalize text-white transition-colors duration-200 transform rounded-md focus:outline-none focus:ring focus:ring-opacity-80 min-w-{20px} bg-primary-medium hover:bg-primary-dark focus:ring-primary-light"
       >
-        Utstyr til bil, båt og MC
-      </option>
+        Velg bilde
+      </button>
+      <!-- Shows chosen images -->
       
-    </select>
-    <!-- error message for select box -->
-    
-    
-  </div>
-  <!-- Grupper -->
-  <div
-    class="mb-6"
-  >
-    <label
-      class="block text-sm font-medium text-gray-900 dark:text-gray-400"
-    >
-      Grupper
-    </label>
+      
+    </div>
+    <!-- Save item button -->
     <div
-      class="overflow-auto w-full max-h-32 mt-2 text-base list-none bg-white rounded divide-y divide-gray-100 dark:bg-gray-700"
+      class="float-right"
     >
-      <ul
-        aria-labelledby="dropdownDefault"
-        class="py-1"
+      <button
+        class="flex items-center px-2 py-2 font-medium tracking-wide capitalize text-white transition-colors duration-200 transform rounded-md focus:outline-none focus:ring focus:ring-opacity-80 min-w-{20px} bg-primary-medium hover:bg-primary-dark focus:ring-primary-light"
+        id="saveButton"
       >
-        <li>
-          
-          
-        </li>
-      </ul>
+        Lagre
+      </button>
     </div>
-    <!-- Error message for community -->
-    <label
-      class="text-error-medium text-sm block"
-    />
-  </div>
-  <!-- price -->
-  <div
-    class="mb-6 mt-4"
-  >
-    <label
-      class="block mb-2 text-sm font-medium text-gray-900 dark:text-gray-300"
-      id="priceLabel"
-    >
-      Pris per dag
-    </label>
-    <input
-      class="block w-full px-4 py-2 mt-2 text-gray-700 placeholder-gray-500 bg-white border rounded-md dark:bg-gray-800 dark:border-gray-600 dark:placeholder-gray-400 focus:border-primary-light dark:focus:border-primary-light focus:ring-opacity-40 focus:outline-none focus:ring focus:ring-primary-light"
-      id="price"
-      required=""
-      type="number"
-    />
-    <!-- error message for price -->
-    
-    
-  </div>
-  <!-- Description -->
-  <div
-    class="mb-6"
-  >
-    <label
-      class="block mb-2 text-sm font-medium text-gray-900 dark:text-gray-400"
-      id="descriptionLabel"
-    >
-      Beskrivelse
-    </label>
-    <textarea
-      class="block w-full px-4 py-2 mt-2 text-gray-700 placeholder-gray-500 bg-white border rounded-md dark:bg-gray-800 dark:border-gray-600 dark:placeholder-gray-400 focus:border-primary-light dark:focus:border-primary-light focus:ring-opacity-40 focus:outline-none focus:ring focus:ring-primary-light"
-      id="description"
-      required=""
-      rows="4"
-    />
-    <!-- error message for description -->
-    
-    
-  </div>
-  <!-- Address -->
-  <div
-    class="mb-6"
-  >
-    <label
-      class="block mb-2 text-sm font-medium text-gray-900 dark:text-gray-300"
-      id="addressLabel"
-    >
-      Adresse
-    </label>
-    <input
-      class="block w-full px-4 py-2 mt-2 text-gray-700 placeholder-gray-500 bg-white border rounded-md dark:bg-gray-800 dark:border-gray-600 dark:placeholder-gray-400 focus:border-primary-light dark:focus:border-primary-light focus:ring-opacity-40 focus:outline-none focus:ring focus:ring-primary-light"
-      id="adress"
-      required=""
-      type="text"
-    />
-    <!-- error message for address-->
-    
-    
-  </div>
-  <!-- Images -->
-  <div>
-    <label
-      class="block mb-2 text-sm font-medium text-gray-900 dark:text-gray-400"
-      id="imageLabel"
-    >
-       Bilder (bildene må være .png) 
-    </label>
-    <input
-      accept="image/png"
-      style="display: none;"
-      type="file"
-    />
-    <button
-      class="flex items-center px-2 py-2 font-medium tracking-wide capitalize text-white transition-colors duration-200 transform rounded-md focus:outline-none focus:ring focus:ring-opacity-80 min-w-{20px} bg-primary-medium hover:bg-primary-dark focus:ring-primary-light"
-    >
-      Velg bilde
-    </button>
-    
-    
-  </div>
-  <!-- Save item button -->
-  <div
-    class="float-right"
-  >
-    <button
-      class="flex items-center px-2 py-2 font-medium tracking-wide capitalize text-white transition-colors duration-200 transform rounded-md focus:outline-none focus:ring focus:ring-opacity-80 min-w-{20px} bg-primary-medium hover:bg-primary-dark focus:ring-primary-light"
-      id="saveButton"
-    >
-      Lagre
-    </button>
   </div>
+  
 </div>
 `;

tests/unit/component-tests/community-component-tests/__snapshots__/search-item-list.spec.js.snap

 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`SearchItemListComponent elements rendering renders correctly 1`] = `
-<section
-  class="relative w-full max-w-md px-5 py-4 mx-auto rounded-md"
+<div
+  data-v-app=""
 >
-  <div
-    class="relative"
-    id="searchComponent"
+  
+  <!-- A template for searching in item list -->
+  <section
+    class="relative w-full max-w-md px-5 py-4 mx-auto rounded-md"
   >
-    <span
-      class="absolute inset-y-0 left-0 flex items-center pl-3"
+    <div
+      class="relative"
+      id="searchComponent"
     >
-      <svg
-        class="w-5 h-5 text-gray-400"
-        fill="none"
-        viewBox="0 0 24 24"
+      <span
+        class="absolute inset-y-0 left-0 flex items-center pl-3"
       >
-        <path
-          d="M21 21L15 15M17 10C17 13.866 13.866 17 10 17C6.13401 17 3 13.866 3 10C3 6.13401 6.13401 3 10 3C13.866 3 17 6.13401 17 10Z"
-          stroke="currentColor"
-          stroke-linecap="round"
-          stroke-linejoin="round"
-          stroke-width="2"
-        />
-      </svg>
-    </span>
-    <input
-      class="w-full py-3 pl-10 pr-4 text-gray-700 bg-white border rounded-md dark:bg-gray-800 dark:text-gray-300 dark:border-gray-600 focus:border-primary-medium dark:focus:border-primary-medium focus:outline-none focus:ring"
-      id="searchInput"
-      placeholder="Søk"
-      type="text"
-    />
-  </div>
-  <div
-    class="absolute inset-x-0 px-6 py-3 mt-4 border-2 border-slate-500"
-  >
+        <svg
+          class="w-5 h-5 text-gray-400"
+          fill="none"
+          viewBox="0 0 24 24"
+        >
+          <path
+            d="M21 21L15 15M17 10C17 13.866 13.866 17 10 17C6.13401 17 3 13.866 3 10C3 6.13401 6.13401 3 10 3C13.866 3 17 6.13401 17 10Z"
+            stroke="currentColor"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            stroke-width="2"
+          />
+        </svg>
+      </span>
+      <input
+        class="w-full py-3 pl-10 pr-4 text-gray-700 bg-white border rounded-md dark:bg-gray-800 dark:text-gray-300 dark:border-gray-600 focus:border-primary-medium dark:focus:border-primary-medium focus:outline-none focus:ring"
+        id="searchInput"
+        placeholder="Søk"
+        type="text"
+      />
+    </div>
     <div
-      class="grid grid-cols-2"
+      class="absolute inset-x-0 px-6 py-3 mt-4 border-2 border-slate-500"
     >
-      
-      <item-card-stub
-        item="[object Object]"
-      />
-      <item-card-stub
-        item="[object Object]"
-      />
-      <item-card-stub
-        item="[object Object]"
-      />
-      
+      <div
+        class="grid grid-cols-2"
+      >
+        
+        <item-card-stub
+          item="[object Object]"
+        />
+        <item-card-stub
+          item="[object Object]"
+        />
+        <item-card-stub
+          item="[object Object]"
+        />
+        
+      </div>
     </div>
-  </div>
-</section>
+  </section>
+  
+</div>
 `;