Added pagination and search to movies page.

assets/components/search/bar.vue

@@ -0,0 +1,84 @@
+<template>
+	<form
+		class="search"
+		@submit.prevent="search"
+	>
+		<input
+			v-model="query"
+			:placeholder="placeholder || 'Search'"
+			class="query"
+			@input="search"
+		>
+
+		<button
+			type="submit"
+			class="search-button"
+		><Icon icon="search" /></button>
+	</form>
+</template>
+
+<script>
+function search() {
+	this.$router.replace({ query: { query: this.query || undefined } });
+}
+
+export default {
+	props: {
+		placeholder: {
+			type: String,
+			default: null,
+		},
+	},
+	data() {
+		return {
+			query: this.$route.query.query || null,
+		};
+	},
+	methods: {
+		search,
+	},
+};
+</script>
+
+<style lang="scss" scoped>
+.search {
+    display: flex;
+    width: 100%;
+    max-width: 40rem;
+}
+
+.query {
+    color: var(--text);
+    background: var(--background);
+    flex-grow: 1;
+    box-sizing: border-box;
+    padding: 1rem;
+    border: none;
+    box-sizing: border-box;
+    box-shadow: 0 0 3px var(--darken-weak);
+    font-size: 1rem;
+    outline: none;
+
+    &:focus {
+        box-shadow: 0 0 3px var(--primary);
+    }
+}
+
+.search-button {
+    padding: 1rem;
+    background: none;
+    border: none;
+
+    .icon {
+        fill: var(--shadow);
+    }
+
+    &:hover {
+        cursor: pointer;
+
+        .icon {
+            fill: var(--primary);
+        }
+    }
+}
+</style>