docs: Added a page on pin control for ZMK (#2508)

* docs(feat): Added a page on pin control for ZMK

* Added note on HAL modules

* docs: Added images of boards

---------

Co-authored-by: Cem Aksoylar <caksoylar@users.noreply.github.com>

docs/src/components/interconnect-tabs.tsx

@@ -6,25 +6,21 @@ import { groupedMetadata, InterconnectDetails } from "./hardware-utils";
 
 interface InterconnectTabsProps {
   items: HardwareMetadata[];
+  gpio: Boolean;
 }
 
-function mapInterconnect(interconnect: Interconnect) {
+function mapInterconnect(interconnect: Interconnect, gpio: Boolean) {
   let content = require(`@site/src/data/interconnects/${interconnect.id}/design_guideline.md`);
   let imageUrl = require(`@site/docs/assets/interconnects/${interconnect.id}/pinout.png`);
-
   return (
     <TabItem value={interconnect.id} key={interconnect.id}>
       <img src={imageUrl.default} />
-
-      <content.default />
-
-      {interconnect.node_labels && (
+      {gpio && <content.default />}
+      {interconnect.node_labels && !gpio && (
         <>
+          <br></br>
           The following node labels are available:
           <ul>
-            <li>
-              GPIO: <code>&{interconnect.node_labels.gpio}</code>
-            </li>
             {interconnect.node_labels.i2c && (
               <li>
                 I2C bus: <code>&{interconnect.node_labels.i2c}</code>
@@ -56,7 +52,7 @@ function mapInterconnectValue(interconnect: Interconnect) {
   return { label: `${interconnect.name} Shields`, value: interconnect.id };
 }
 
-function InterconnectTabs({ items }: InterconnectTabsProps) {
+function InterconnectTabs({ items, gpio }: InterconnectTabsProps) {
   let grouped = Object.values(groupedMetadata(items).interconnects)
     .map((i) => i?.interconnect as Interconnect)
     .filter((i) => i?.design_guideline)
@@ -64,7 +60,7 @@ function InterconnectTabs({ items }: InterconnectTabsProps) {
 
   return (
     <Tabs defaultValue={"pro_micro"} values={grouped.map(mapInterconnectValue)}>
-      {grouped.map(mapInterconnect)}
+      {grouped.map((items) => mapInterconnect(items, gpio))}
     </Tabs>
   );
 }