diff --git a/apps/docs/components/Extensions.js b/apps/docs/components/Extensions.js
deleted file mode 100644
index d03780463c8..00000000000
--- a/apps/docs/components/Extensions.js
+++ /dev/null
@@ -1,39 +0,0 @@
-import Link from 'next/link'
-import React, { useState } from 'react'
-import { GlassPanel, IconSearch, Input } from 'ui'
-import extensions from '../data/extensions.json'
-
-export default function Extensions() {
- const [filter, setFilter] = useState('')
- return (
- <>
-
- }
- value={filter}
- onChange={(e) => setFilter(e.target.value)}
- />
-
-
-
- )
-}
diff --git a/apps/docs/components/Extensions.tsx b/apps/docs/components/Extensions.tsx
new file mode 100644
index 00000000000..a3ab9bff99e
--- /dev/null
+++ b/apps/docs/components/Extensions.tsx
@@ -0,0 +1,134 @@
+import Link from 'next/link'
+import React, { useState } from 'react'
+import { GlassPanel, IconLink, IconX, Input } from 'ui'
+import extensions from '../data/extensions.json'
+
+type extension = {
+ name: string
+ comment: string
+ tags: string[]
+ link?: string
+}
+
+function getUniqueTags(json: extension[]) {
+ const tags = []
+ for (const item of json) {
+ if (item.tags) {
+ tags.push(...item.tags)
+ }
+ }
+ return [...new Set(tags)]
+}
+
+export default function Extensions() {
+ const [searchTerm, setSearchTerm] = useState('')
+ const [filters, setFilters] = useState([])
+
+ const tags = getUniqueTags(extensions)
+
+ function handleChecked(tag) {
+ if (filters.includes(tag)) {
+ setFilters(filters.filter((x) => x !== tag))
+ } else {
+ setFilters([...filters, tag])
+ }
+ }
+
+ return (
+ <>
+
+
+ setSearchTerm(e.target.value)}
+ />
+
+
+
+
+
Filter
+
+
+
+
+
+
+
+
+