Added checkbox.

ether · Oct 1, 2023 · 94796e3 · 94796e3
1 parent d055662
commit 94796e3
Show file tree

Hide file tree

Showing 3 changed files with 25 additions and 5 deletions.
diff --git a/src/components/Plugin.tsx b/src/components/Plugin.tsx
@@ -1,4 +1,4 @@
-import {PluginMetaData, Plugin, PluginResponse} from "../store/Plugin.ts";
+import {PluginMetaData, Plugin} from "../store/Plugin.ts";
 import {FC} from "react";
 import TimeAgo from 'javascript-time-ago'
 import en from 'javascript-time-ago/locale/en'
@@ -29,7 +29,7 @@ const renderMarkdown = (text: string) => {
 
 export const PluginCom: FC<PluginProps> = ({plugins, index})=>{
     const pluginResp = useUIStore(state=>state.plugins)
-    const setPlugins = useUIStore(state=>state.setPlugins)
+    //const setPlugins = useUIStore(state=>state.setPlugins)
 
     const loadNextPage = ()=> {
     /*        fetch('/api/plugins')
@@ -55,7 +55,7 @@ export const PluginCom: FC<PluginProps> = ({plugins, index})=>{
         <div>{plugins.description}</div>
         <div className="flex gap-10">
             {plugins.image&&<img alt={"Image of "+plugins.name} className="w-60 object-contain" src={plugins.image}/>}
-            {plugins.readme&&<div className="w-full line-clamp-5" dangerouslySetInnerHTML={renderMarkdown(plugins.readme)}></div>}
+            {plugins.readme&&<div className="w-full line-clamp-5 readme-of-plugin" dangerouslySetInnerHTML={renderMarkdown(plugins.readme)}></div>}
         </div>
         <div className="mt-5 flex">
             <PluginAuthorComp name={plugins.author} email={plugins.author_email}/>

diff --git a/src/index.css b/src/index.css
@@ -302,3 +302,23 @@ div#footer img.logo {
     opacity: 1;
   }
 }
+
+.readme-of-plugin h1 {
+  @apply text-primary text-xl font-bold mb-4;
+}
+
+.readme-of-plugin h2 {
+  @apply font-bold mb-4;
+}
+
+.readme-of-plugin code, .readme-of-plugin pre {
+    @apply text-sm p-1 rounded-sm dark:bg-gray-700 bg-gray-200 overflow-hidden;
+}
+
+.readme-of-plugin {
+  @apply overflow-hidden;
+}
+
+.readme-of-plugin a {
+    @apply text-primary;
+}
diff --git a/src/pages/PluginViewer.tsx b/src/pages/PluginViewer.tsx
@@ -48,9 +48,9 @@ export const PluginViewer = () => {
         </span>
             <h2 className="text-3xl text-primary">Plugins ({plugins?.metadata.total_count})</h2>
             <div className="flex items-center gap-5">
-                <Checkbox.Root className="w-5 h-5 border-[1px] border-white p-2 flex items-center justify-center" checked={officalOnly}
+                <Checkbox.Root className="w-5 h-5 p-2 flex items-center justify-center data-[state=unchecked]:bg-gray-600 data-[state=unchecked]:rounded-full" checked={officalOnly}
                                onCheckedChange={()=>setOfficalOnly(!officalOnly)} id="c1">
-                    <Checkbox.Indicator className="text-white">
+                    <Checkbox.Indicator className=" text-white bg-primary rounded-full p-1">
                             <CheckIcon/>
                     </Checkbox.Indicator>
                 </Checkbox.Root>