setup for rank change page

ui/src/pages/RankChange.vue

@@ -0,0 +1,39 @@
+<script setup lang="ts">
+import { Check, Search } from "lucide-vue-next"
+import { Combobox, ComboboxAnchor, ComboboxEmpty, ComboboxGroup, ComboboxInput, ComboboxItem, ComboboxItemIndicator, ComboboxList } from "@/components/ui/combobox"
+
+const frameworks = [
+  { value: "next.js", label: "Next.js" },
+  { value: "sveltekit", label: "SvelteKit" },
+  { value: "nuxt", label: "Nuxt" },
+  { value: "remix", label: "Remix" },
+  { value: "astro", label: "Astro" },
+]
+</script>
+
+<template>
+    <div class="flex w-full items-center justify-center mt-20">
+        <Combobox>
+            <ComboboxAnchor class="w-[300px]">
+                <ComboboxInput placeholder="Search framework..." class="w-full pl-9" />
+                <Search class="absolute left-2 top-1/2 -translate-y-1/2 text-muted-foreground" />
+            </ComboboxAnchor>
+            <ComboboxList class="w-[300px]">
+                <ComboboxEmpty class="text-muted-foreground">No results</ComboboxEmpty>
+                <ComboboxGroup>
+                    <template v-for="framework in frameworks" :key="framework.value">
+                        <ComboboxItem
+                            :value="framework.value"
+                            class="data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground relative cursor-pointer select-none px-2 py-1.5"
+                        >
+                            {{ framework.label }}
+                            <ComboboxItemIndicator class="absolute left-2 inline-flex items-center">
+                                <Check class="h-4 w-4" />
+                            </ComboboxItemIndicator>
+                        </ComboboxItem>
+                    </template>
+                </ComboboxGroup>
+            </ComboboxList>
+        </Combobox>
+    </div>
+</template>