contest list.

src/shared/ContestTitle.vue

@@ -0,0 +1,23 @@
+<script setup lang="ts">
+import { Contest } from "utils/types"
+import { ContestType } from "utils/constants"
+
+defineProps<{ contest: Contest }>()
+</script>
+<template>
+  <n-space>
+    <span>{{ contest.title }}</span>
+    <n-icon
+      size="medium"
+      class="lockIcon"
+      v-if="contest.contest_type === ContestType.private"
+    >
+      <i-ep-lock />
+    </n-icon>
+  </n-space>
+</template>
+<style scoped>
+.lockIcon {
+  transform: translateY(2px);
+}
+</style>

src/shared/ContestType.vue

@@ -0,0 +1,21 @@
+<script setup lang="ts">
+import { Contest } from "~/utils/types"
+import { ContestType } from "~/utils/constants"
+
+interface Props {
+  contest: Contest
+  size?: "small"
+}
+
+const props = defineProps<Props>()
+
+const isPrivate = computed(
+  () => props.contest.contest_type === ContestType.private
+)
+</script>
+
+<template>
+  <n-tag :type="isPrivate ? 'error' : 'info'" :size="props.size">
+    {{ isPrivate ? "需要密码" : "公开" }}
+  </n-tag>
+</template>