From e37aa502bcddc45ca7e0ec307ed4363e4371b540 Mon Sep 17 00:00:00 2001
From: Justin Schroeder <justin@formkit.com>
Date: Sat, 3 Feb 2024 17:24:33 -0500
Subject: [PATCH] feat: adds function reference

---
 docs/components/FunctionReference.vue | 24 ++++++++++++++++++++++++
 docs/components/content/Format.vue    | 13 +++++++++++++
 2 files changed, 37 insertions(+)
 create mode 100644 docs/components/FunctionReference.vue

diff --git a/docs/components/FunctionReference.vue b/docs/components/FunctionReference.vue
new file mode 100644
index 0000000..064341b
--- /dev/null
+++ b/docs/components/FunctionReference.vue
@@ -0,0 +1,24 @@
+<script lang="ts" setup>
+const props = defineProps<{
+  function: string
+  arguments: Array<{ name: string; type: string; comment?: string }>
+  return: string
+}>()
+</script>
+
+<template>
+  <div class="bg-white rounded-lg p-3 font-mono text-base mb-8">
+    <span class="text-blue-700">function </span>
+    <span class="text-fuchsia-700">{{ props.function }}</span
+    >(<br /><template v-for="(arg, index) in props.arguments" :key="arg.name">
+      <div class="ml-4">
+        <span class="text-fuchsia-700">{{ arg.name }}</span
+        >: <span class="text-sky-500">{{ arg.type }}</span
+        >{{ index < props.arguments.length - 1 ? ", " : ""
+        }}<span v-if="arg.comment" class="text-gray-400"
+          >// {{ arg.comment }}</span
+        >
+      </div> </template
+    >): <span class="text-sky-500">{{ props.return }}</span>
+  </div>
+</template>
diff --git a/docs/components/content/Format.vue b/docs/components/content/Format.vue
index 30ed8a6..2566898 100644
--- a/docs/components/content/Format.vue
+++ b/docs/components/content/Format.vue
@@ -6,6 +6,19 @@ import { format } from "@formkit/tempo"
 <template>
   <PageSection id="format">
     <HeadingSection title="Format" class="text-sky-500" />
+    <FunctionReference
+      function="format"
+      :arguments="[
+        {
+          name: 'date',
+          type: 'Date | string',
+          comment: 'strings must be ISO 8601',
+        },
+        { name: 'format', type: 'string | object' },
+        { name: 'locale?', type: 'string' },
+      ]"
+      return="string"
+    />
     <p>Tempo’s <code>format()</code> function output’s dates in two ways:</p>
     <ul class="jump-list">
       <li>