From b36a2e05aeb671b84d78bd8677a5555953467e26 Mon Sep 17 00:00:00 2001
From: Arthur DANJOU <arthurdanjou@outlook.fr>
Date: Fri, 21 Jun 2024 13:09:37 +0200
Subject: [PATCH] Add uses page

---
 app/components/AppTitle.vue       | 25 +++++++++++++
 app/components/uses/Item.vue      | 22 +++++++++++
 app/pages/uses.vue                | 61 +++++++++++++++++++++++++++----
 content/uses/jetbrains-suite.json |  2 +-
 content/uses/themes-fonts.json    |  2 +-
 content/uses/warp.json            |  2 +-
 types.ts                          |  5 +++
 7 files changed, 108 insertions(+), 11 deletions(-)
 create mode 100644 app/components/AppTitle.vue
 create mode 100644 app/components/uses/Item.vue

diff --git a/app/components/AppTitle.vue b/app/components/AppTitle.vue
new file mode 100644
index 0000000..1d77afa
--- /dev/null
+++ b/app/components/AppTitle.vue
@@ -0,0 +1,25 @@
+<script lang="ts" setup>
+defineProps({
+  title: {
+    type: String,
+    required: true
+  },
+  description: {
+    type: String,
+    required: true
+  }
+})
+</script>
+
+<template>
+  <div>
+    <h1
+      class="text-2xl font-bold tracking-tight text-zinc-800 dark:text-zinc-100"
+    >
+      {{ title }}
+    </h1>
+    <p class="mt-6 text-base text-gray-600 dark:text-gray-400">
+      {{ description }}
+    </p>
+  </div>
+</template>
diff --git a/app/components/uses/Item.vue b/app/components/uses/Item.vue
new file mode 100644
index 0000000..961874f
--- /dev/null
+++ b/app/components/uses/Item.vue
@@ -0,0 +1,22 @@
+<script lang="ts" setup>
+import type { PropType } from 'vue'
+import type { UsesItem } from '#components'
+
+defineProps({
+  item: {
+    type: Object as PropType<typeof UsesItem>,
+    required: true
+  }
+})
+</script>
+
+<template>
+  <li>
+    <p class="text-base font-semibold text-black dark:text-white">
+      {{ item.name }}
+    </p>
+    <p class="text-sm text-gray-600 dark:text-gray-400">
+      {{ item.description }}
+    </p>
+  </li>
+</template>
diff --git a/app/pages/uses.vue b/app/pages/uses.vue
index 62e1f45..437d6d8 100644
--- a/app/pages/uses.vue
+++ b/app/pages/uses.vue
@@ -1,13 +1,58 @@
 <script setup lang="ts">
-
+const description
+  = 'Software I use, gadgets I love, and other things I recommend. Here’s a big list of all of my favorite stuff.'
+useSeoMeta({
+  title: 'Things I use | Arthur Danjou',
+  description
+})
+const { data: items } = await useAsyncData('uses', () =>
+  queryContent('/uses').find()
+)
+const hardware = items.value!.filter(item => item.category === 'hardware')
+const software = items.value!.filter(item => item.category === 'software')
+const ide = items.value!.filter(item => item.category === 'ide')
 </script>
 
 <template>
-  <div>
-    <h1>Uses</h1>
-  </div>
+  <main>
+    <AppTitle
+      :description="description"
+      title="Uses"
+    />
+    <div class="mt-12 space-y-24">
+      <ul class="space-y-8">
+        <UDivider
+          label="Hardware"
+          size="xs"
+        />
+        <UsesItem
+          v-for="(item, id) in hardware"
+          :key="id"
+          :item="item"
+        />
+      </ul>
+      <ul class="space-y-8">
+        <UDivider
+          label="Software"
+          size="xs"
+        />
+        <UsesItem
+          v-for="(item, id) in software"
+          :key="id"
+          :item="item"
+        />
+      </ul>
+      <ul class="space-y-8">
+        <UDivider
+          label="IDE & Font"
+          size="xs"
+        />
+        <UsesItem
+          v-for="(item, id) in ide"
+          :key="id"
+          :item="item"
+        />
+      </ul>
+    </div>
+  </main>
 </template>
-
-<style scoped>
-
-</style>
diff --git a/content/uses/jetbrains-suite.json b/content/uses/jetbrains-suite.json
index aad0067..ff07c1f 100644
--- a/content/uses/jetbrains-suite.json
+++ b/content/uses/jetbrains-suite.json
@@ -1,5 +1,5 @@
 {
   "name": "JetBrains Suite (IntelliJ IDEA Ultimate, PyCharm Professional, WebStorm, DataGrip)",
   "description": "I use JetBrains Suite for development for 7 years. It's the best IDEs for Java, Python, JavaScript, SQL, and more. I used this suite to develop and to create this website.",
-  "category": "IDEs"
+  "category": "ide"
 }
\ No newline at end of file
diff --git a/content/uses/themes-fonts.json b/content/uses/themes-fonts.json
index a3fb9f4..b9ef9cc 100644
--- a/content/uses/themes-fonts.json
+++ b/content/uses/themes-fonts.json
@@ -1,5 +1,5 @@
 {
   "name": "Theme and Font",
   "description": "My theme is Catppuccin Macchiato, a community-driven pastel theme that aims to be the middle ground between low and high contrast themes. My main fonts are Vercel Geist and JetBrains Mono",
-  "category": "IDEs"
+  "category": "ide"
 }
\ No newline at end of file
diff --git a/content/uses/warp.json b/content/uses/warp.json
index d532cd5..fb11698 100644
--- a/content/uses/warp.json
+++ b/content/uses/warp.json
@@ -1,5 +1,5 @@
 {
   "name": "Warp",
   "description": "Warp is a modern, Rust-based terminal reimagined with AI and collaborative tools for better productivity. I'm loving it so far!",
-  "category": "hardware"
+  "category": "software"
 }
\ No newline at end of file
diff --git a/types.ts b/types.ts
index 6ee0c45..b76f2db 100644
--- a/types.ts
+++ b/types.ts
@@ -45,3 +45,8 @@ export const IDEs = [
   { name: 'IntelliJ IDEA Ultimate', icon: 'i-skill-icons-idea-light' },
   { name: 'WebStorm', icon: 'i-skill-icons-webstorm-light' }
 ]
+
+export interface UsesItem {
+  name: string
+  description: string
+}