quickshell-web/src/components/type/Properties.astro

---
import { getQMLTypeLink } from "@config/io/helpers";
import type {
  QMLTypeLinkObject,
  QuickshellProps,
} from "@config/io/types";
import { Tag, Flag } from "@icons";

import TypeDetails from "./TypeDetails.astro";

export interface Props {
  propsKeys: string[];
  propsData: QuickshellProps;
}

const { propsKeys, propsData } = Astro.props;
---
<ul class="typedata typeprops">
  {
    propsKeys.map(item => {
      const propData = propsData[item]
      let typeLink:string;
      let linkText:string;
      let genericType:string|undefined;
      let genericTypeLink:string|undefined;
      const gadget = propData.type.gadget;
      if (gadget) {
        typeLink = "#"
        linkText = `[${Object.keys(gadget).toString()}]`
      } else {
        typeLink = getQMLTypeLink(propData.type)
        linkText = propData.type.name || propData.type.type
      }
      if (propData.type.of) {
        genericType = propData.type.of.name;
        genericTypeLink = getQMLTypeLink(propData.type.of)
      }
      return (
        <li id={ item } class="typedata-root typeprop-root">
          <p class="typedata-name typeprop-name">
            <Tag client:idle/>
            { item }<span class="type-datatype">:&nbsp;<a
              href={typeLink}
            >{ linkText }</a>{genericType &&
            (<span class="type-datatype">&lt;</span><a
              href={genericTypeLink}>{genericType}</a
              ><span class="type-datatype">&gt;</span>
            )}</span>
          </p>
          {
            propData.flags && propData.flags.length > 0 ? (
              <p class="type-flags">
                {
                  propData.flags.map((flag) => {
                    return (
                      <span class="type-flag">
                        <Flag client:idle/>
                        {flag}
                      </span>
                    )
                  })
                }
              </p>
            ) : null
          }
          {
            gadget ? (
              <p class="typedata-params typefunc-params">
                {
                  Object.keys(gadget).map((key) => {
                    const gadgetData = gadget[key]
                    return (
                      <span class="typedata-param typefunc-param">
                        <Tag client:idle/>
                        {key}:<span><a href=`${getQMLTypeLink(gadgetData as unknown as QMLTypeLinkObject)}`>{gadgetData.name}</a></span>
                      </span>
                    )
                  })
                }
              </p>
            ):null
          }
          <TypeDetails markdown={propData.details} />
        </li>
      )
    })
  }
</ul>