feat: responsive table component (#227)

components/ResponsiveTable.vue

@@ -0,0 +1,78 @@
+<script setup lang="ts">
+interface Props {
+  colLabels: string[]
+  rows: {
+    heading: string
+    cols: string[][]
+  }[]
+}
+defineProps<Props>()
+</script>
+
+<template>
+  <table>
+    <thead>
+      <tr>
+        <th />
+        <th v-for="colLabel in colLabels" :key="colLabel">
+          {{ colLabel }}
+        </th>
+      </tr>
+    </thead>
+    <tbody v-for="(row, rowIndex) in rows" :key="rowIndex">
+      <tr>
+        <td :colspan="colLabels.length + 1">
+          {{ row.heading }}
+        </td>
+      </tr>
+      <tr v-for="(cols, colIndex) in row.cols" :key="colIndex">
+        <td v-if="colIndex === 0">
+          {{ row.heading }}
+        </td>
+        <td v-else />
+        <td v-for="col in cols" :key="col">
+          {{ col }}
+        </td>
+      </tr>
+    </tbody>
+  </table>
+</template>
+
+<style scoped lang="postcss">
+table {
+  @apply w-full mt-14;
+}
+thead tr {
+  @apply bg-brand-teal-dark/70 text-white;
+}
+thead tr th {
+  @apply py-3.5 px-6 text-xl text-left;
+}
+thead tr th:first-child {
+  @apply hidden sm:block;
+}
+tbody {
+  @apply border-b border-brand-teal-dark;
+}
+tbody td {
+  @apply lg:py-4 py-3 px-6 text-xl;
+}
+tbody td:first-child {
+  @apply font-bold;
+}
+tbody tr:not(:first-child) td:first-child {
+  @apply hidden sm:block;
+}
+tbody tr:first-child {
+  @apply sm:hidden;
+}
+tbody tr:first-child td {
+  @apply pt-7;
+}
+tbody tr:nth-child(2) td {
+  @apply md:pt-8;
+}
+tbody tr:last-child td {
+  @apply pb-8;
+}
+</style>

pages/developers.vue

@@ -58,6 +58,31 @@
       <Subhead center>
         IPFS is a modular suite of protocols and standards for organizing and moving data, designed from the ground up with the principles of content addressing and peer-to-peer networking.
       </Subhead>
+      <ResponsiveTable
+        :col-labels="['System', 'Responsible for']"
+        :rows="[
+          {
+            heading: 'Transferring the data',
+            cols: [
+              ['IPFS*', 'Data routing and transfer'],
+              ['Libp2p**', 'Peer-to-peer network connectivity'],
+              ['IPFS gateways', 'Interoperability with http'],
+            ],
+          },
+          {
+            heading: 'Defining the data',
+            cols: [
+              ['IPNS, DNSLink', 'Dynamic naming'],
+              ['IPLD**', 'Define and organize data'],
+              ['Multiformats**', 'Universal addressing for data and peers'],
+            ],
+          },
+        ]"
+      />
+      <ul class="mt-10 text-brand-teal-dark">
+        <li>* Including its various subsystems and specs</li>
+        <li>** Essential components for IPFS (can also be used independently of IPFS)</li>
+      </ul>
     </PageSection>
     <PageSection dark-gradient>
       <div class="mb-20 text-white">