Added chips for keywords.

package.json

@@ -14,6 +14,7 @@
     "@fortawesome/free-brands-svg-icons": "^6.4.2",
     "@fortawesome/free-solid-svg-icons": "^6.4.2",
     "@fortawesome/react-fontawesome": "^0.2.0",
+    "@radix-ui/react-checkbox": "^1.0.4",
     "@radix-ui/react-dialog": "^1.0.4",
     "javascript-time-ago": "^2.5.9",
     "marked": "^9.0.3",

src/components/CheckIcon.tsx

@@ -0,0 +1,6 @@
+
+
+export const CheckIcon = () =>
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className="w-3">
+    <path strokeLinecap="round" strokeLinejoin="round" d="M4.5 12.75l6 6 9-13.5" />
+</svg>

src/pages/PluginViewer.tsx

@@ -1,16 +1,18 @@
 import {PluginResponse} from "../store/Plugin.ts";
 import {useUIStore} from "../store/store.ts";
-import {useEffect} from "react";
+import {useEffect, useState} from "react";
 import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
 import {faSearch} from "@fortawesome/free-solid-svg-icons";
 import {PluginCom} from "../components/Plugin.tsx";
+import * as Checkbox from '@radix-ui/react-checkbox';
+import {CheckIcon} from "../components/CheckIcon.tsx";
 
 export const PluginViewer = () => {
     const setPlugin = useUIStore(state => state.setPlugins)
     const plugins = useUIStore(state => state.plugins)
     const pluginSearchTerm = useUIStore(state => state.pluginSearchTerm)
     const setPluginSearchTerm = useUIStore(state => state.setPluginSearchTerm)
-
+    const [officalOnly, setOfficalOnly] = useState<boolean>(false)
 
     useEffect(() => {
         fetch('/api/plugins')
@@ -28,6 +30,17 @@ export const PluginViewer = () => {
             For more information about Etherpad visit https://etherpad.org.
         </span>
             <h2 className="text-3xl text-primary">Plugins ({plugins?.metadata.total_count})</h2>
+            <div className="flex gap-5">
+                <Checkbox.Root className="w-8 h-8 border-[1px] border-white p-2 grid place-items-center" checked={officalOnly}
+                               onCheckedChange={()=>setOfficalOnly(!officalOnly)} id="c1">
+                    <Checkbox.Indicator className="text-white">
+                            <CheckIcon/>
+                    </Checkbox.Indicator>
+                </Checkbox.Root>
+                <label className="Label" htmlFor="c1">
+                    Accept terms and conditions.
+                </label>
+            </div>
             <div className="mt-5 mb-5 relative flex self-center w-full">
                 <input className="w-full  rounded border-[1px] pt-2 pb-2 pl-8 pr-1"
                        placeholder="Search for plugins to install" value={pluginSearchTerm}