Пересобранный и видоизмененный conky для ОСГОС

web/components/Docs.tsx

@@ -0,0 +1,82 @@
+import { Documentation } from '../utils/doc-utils'
+import { Link as LinkIcon } from 'react-feather'
+import Link from 'next/link'
+import { useRouter } from 'next/router'
+
+export interface DocsProps {
+  docs: Documentation
+  braces: boolean
+  assign: boolean
+}
+
+export default function Docs({ docs, braces, assign }: DocsProps) {
+  const router = useRouter()
+  return (
+    <div className="prose dark:prose-invert prose-lg w-full max-w-3xl">
+      <div className="px-2 lg:px-4" dangerouslySetInnerHTML={{ __html: docs.desc_md }} />
+
+      <div className="divide-y divide-gray-700/25 dark:divide-gray-300/25">
+        {docs.values.map((doc) => {
+          const target = router.asPath.endsWith(`#${doc.name}`)
+          return (
+            <div
+              id={doc.name}
+              key={doc.name}
+              className={
+                'pt-4 scroll-mt-16 overflow-auto ' +
+                (target
+                  ? 'bg-rose-300 dark:bg-rose-900'
+                  : 'bg-slate-200 dark:bg-slate-800 target:bg-rose-300 target:dark:bg-rose-900') +
+                ' hover:bg-opacity-25 dark:hover:bg-opacity-25 hover:ring-1 ring-black dark:ring-white ring-inset'
+              }
+            >
+              <div className="flex">
+                <div className="px-2 lg:pl-4 py-3">
+                  <Link href={`#${doc.name}`} data-anchor-name={doc.name}>
+                    <LinkIcon size={20} />
+                  </Link>
+                </div>
+                <div className="flex-col p-1 pr-2 lg:pr-4">
+                  <div>
+                    {braces && <code>$&#123;</code>}
+                    <code className="text-lg p-1 mx-1 bg-fuchsia-200 dark:bg-fuchsia-900 font-bold">
+                      {doc.name}
+                    </code>
+                    {typeof doc.args != 'undefined' && doc.args.length > 0 && (
+                      <>
+                        {assign && <code>=</code>}
+                        <em>
+                          {doc.args.map((arg) => (
+                            <code
+                              className="text-lg p-1 mx-1 bg-slate-200 dark:bg-slate-800"
+                              key={arg}
+                            >
+                              {arg}
+                            </code>
+                          ))}
+                        </em>
+                      </>
+                    )}
+                    {braces && <code>&#125;</code>}
+                  </div>
+                  <div
+                    className="py-2"
+                    dangerouslySetInnerHTML={{ __html: doc.desc_md }}
+                  />
+                  {typeof doc.default != 'undefined' && (
+                    <div>
+                      Default:{' '}
+                      <code className="px-1 mx-1 bg-slate-200 dark:bg-slate-800">
+                        {doc.default}
+                      </code>
+                    </div>
+                  )}
+                </div>
+              </div>
+            </div>
+          )
+        })}
+      </div>
+    </div>
+  )
+}