feat: replace DataTable component with new FilteredList component

src/views/GeneralView.vue

@@ -17,10 +17,10 @@ import {
 } from '@/sebin'
 import { dateFormat, getAge, toImperial, toLbs } from '@/helpers'
 import { nsfwKey, showModalKey } from '@/keys'
-import type { Kink } from '@/interfaces'
 import DataTable from '@/components/DataTable.vue'
 import QuickFacts from '@/components/QuickFacts.vue'
 import RefToggle from '@/components/RefToggle.vue'
+import FilteredList from '@/components/FilteredList.vue'
 
 const generalHeadings = ['Key', 'Value']
 const generalData = [
@@ -39,14 +39,6 @@ const nsfwData = [
   ['Position', position]
 ]
 
-const kinksHeadings = ['Kink', 'Receive', 'Give']
-const kinksData = kinks.map((kink: Kink): string[] => {
-  const receive = kink.receive ? '✅' : '🚫'
-  const give = kink.give ? '✅' : '🚫'
-
-  return [kink.name, receive, give]
-})
-
 const isNsfw = inject<boolean>(nsfwKey, false)
 const showModal = inject<Function>(showModalKey, Function)
 </script>
@@ -197,7 +189,9 @@ const showModal = inject<Function>(showModalKey, Function)
         wants it. After all he is well endowed enough to peddle it around.
       </p>
 
-      <DataTable class="kinks" :headings="kinksHeadings" :data="kinksData" />
+      <h3>Kinks</h3>
+
+      <FilteredList :data="kinks" />
     </template>
 
     <template v-else>