From ce85fb7489f93adf6212618061d85ef25a8d0136 Mon Sep 17 00:00:00 2001
From: Jerry Hogan <jerry.hogan@thisdot.co>
Date: Fri, 28 Oct 2022 11:32:06 +0100
Subject: [PATCH 1/3] chore: gist panel UI

---
 .../GistPanel/GistPanel.stories.jsx           | 26 +++++++++++++++++++
 .../src/components/GistPanel/data.js          | 25 ++++++++++++++++++
 .../src/components/GistPanel/index.jsx        | 25 ++++++++++++++++++
 solidjs-tailwind/src/components/index.js      |  1 +
 solidjs-tailwind/tailwind.config.js           | 18 ++++++++++++-
 5 files changed, 94 insertions(+), 1 deletion(-)
 create mode 100644 solidjs-tailwind/src/components/GistPanel/GistPanel.stories.jsx
 create mode 100644 solidjs-tailwind/src/components/GistPanel/data.js
 create mode 100644 solidjs-tailwind/src/components/GistPanel/index.jsx

diff --git a/solidjs-tailwind/src/components/GistPanel/GistPanel.stories.jsx b/solidjs-tailwind/src/components/GistPanel/GistPanel.stories.jsx
new file mode 100644
index 000000000..51b13cca1
--- /dev/null
+++ b/solidjs-tailwind/src/components/GistPanel/GistPanel.stories.jsx
@@ -0,0 +1,26 @@
+import { Router } from '@solidjs/router';
+import { GistPanel } from '.';
+import { gists } from './data';
+
+export default {
+  title: 'Components/Gist Panel',
+  parameters: {
+    mockData: [
+      {
+        url: 'https://api.starter.dev/hello?greeting=',
+        method: 'GET',
+        status: 200,
+        response: () => gists,
+        delay: 1000,
+      },
+    ],
+  },
+};
+
+const Template = (args) => (
+  <Router>
+    <GistPanel {...args} />
+  </Router>
+);
+
+export const Default = Template.bind({});
diff --git a/solidjs-tailwind/src/components/GistPanel/data.js b/solidjs-tailwind/src/components/GistPanel/data.js
new file mode 100644
index 000000000..ae80118b1
--- /dev/null
+++ b/solidjs-tailwind/src/components/GistPanel/data.js
@@ -0,0 +1,25 @@
+export const gists = [
+  {
+    id: 'G_kwDOADjK-doAIGU0OTc3ODQ1ZmRlOGNjZmU1Yzc0MjQxNzlmZGMyZmVh',
+    description: 'A react hook that handles firebase storage uploading',
+    url: 'https://gist.github.com/e4977845fde8ccfe5c7424179fdc2fea',
+    name: 'FormStore.js',
+    files: [
+      {
+        name: 'useFirebaseUploader.ts',
+      },
+    ],
+  },
+  {
+    id: 'MDQ6R2lzdGQ1Yzc1NTIwMWJiMTI1MmJiNzI2YzQ2ZTIzOTE1Mzgw',
+    description:
+      'Mobx store for managing form state (built for my react-native app)',
+    url: 'https://gist.github.com/d5c755201bb1252bb726c46e23915380',
+    name: 'MyFormStore.js',
+    files: [
+      {
+        name: 'MyFormStore.js',
+      },
+    ],
+  },
+];
diff --git a/solidjs-tailwind/src/components/GistPanel/index.jsx b/solidjs-tailwind/src/components/GistPanel/index.jsx
new file mode 100644
index 000000000..06e9aa4b3
--- /dev/null
+++ b/solidjs-tailwind/src/components/GistPanel/index.jsx
@@ -0,0 +1,25 @@
+import { gists } from './data';
+import { For } from 'solid-js';
+import { Link } from '@solidjs/router';
+
+export const GistPanel = () => {
+  const dummyGists = gists;
+  return (
+    <div class="h-full min-h-[30rem] pt-8 px-8">
+      <div class=" border-y border-y-gray-300 py-4">
+        <h3 class="font-bold">Gists</h3>
+      </div>
+      <ul class="flex flex-col gap-2 mt-4">
+        <For each={dummyGists}>
+          {(gist) => (
+            <li class="text-base transition-colors delay-75 text-dark-800 hover:underline hover:text-primary-400 w-fit">
+              <Link href={gist.url} target="_blank">
+                <span>{gist.name}</span>
+              </Link>
+            </li>
+          )}
+        </For>
+      </ul>
+    </div>
+  );
+};
diff --git a/solidjs-tailwind/src/components/index.js b/solidjs-tailwind/src/components/index.js
index 8b537425d..36102a02e 100644
--- a/solidjs-tailwind/src/components/index.js
+++ b/solidjs-tailwind/src/components/index.js
@@ -1,4 +1,5 @@
 export * from './CounterExample';
 export * from './FetchExample';
+export * from './GistPanel';
 export { default as PageHeader } from './PageHeader';
 export { default as PageFooter } from './PageFooter';
diff --git a/solidjs-tailwind/tailwind.config.js b/solidjs-tailwind/tailwind.config.js
index 0b96aaa0c..0e4419be2 100644
--- a/solidjs-tailwind/tailwind.config.js
+++ b/solidjs-tailwind/tailwind.config.js
@@ -2,7 +2,23 @@
 module.exports = {
   content: ["./src/**/*.{js,jsx}", ],
   theme: {
-    extend: {},
+    extend: {
+      colors: {
+        'primary': '#0969da',
+        'primary-100': '#f6f8fa',
+        'primary-200': '#ddf4ff',
+        'primary-400': '#4078c0',
+        'secondary': '#586069',
+        'secondary-100': '#d0d7de',
+        'secondary-200': '#57606a',
+        'secondary-300': '#eaecef',
+        'accent': '#6e5494',
+        'success': '#2ea44f',
+        'dark': '#111827',
+        'dark-300': '#1b1f2414',
+        'dark-800': '#24292f',
+      }
+    },
   },
   plugins: [],
 }

From 1e648d0ee0c60dcbf954859113d060909418c3fa Mon Sep 17 00:00:00 2001
From: Jerry Hogan <jerry.hogan@thisdot.co>
Date: Mon, 31 Oct 2022 09:05:42 +0100
Subject: [PATCH 2/3] fix coment

---
 .../src/components/GistPanel/{index.jsx => GistPanel.jsx}       | 0
 solidjs-tailwind/src/components/GistPanel/GistPanel.stories.jsx | 2 +-
 solidjs-tailwind/src/components/GistPanel/index.js              | 1 +
 3 files changed, 2 insertions(+), 1 deletion(-)
 rename solidjs-tailwind/src/components/GistPanel/{index.jsx => GistPanel.jsx} (100%)
 create mode 100644 solidjs-tailwind/src/components/GistPanel/index.js

diff --git a/solidjs-tailwind/src/components/GistPanel/index.jsx b/solidjs-tailwind/src/components/GistPanel/GistPanel.jsx
similarity index 100%
rename from solidjs-tailwind/src/components/GistPanel/index.jsx
rename to solidjs-tailwind/src/components/GistPanel/GistPanel.jsx
diff --git a/solidjs-tailwind/src/components/GistPanel/GistPanel.stories.jsx b/solidjs-tailwind/src/components/GistPanel/GistPanel.stories.jsx
index 51b13cca1..cc8ad0d0c 100644
--- a/solidjs-tailwind/src/components/GistPanel/GistPanel.stories.jsx
+++ b/solidjs-tailwind/src/components/GistPanel/GistPanel.stories.jsx
@@ -1,5 +1,5 @@
 import { Router } from '@solidjs/router';
-import { GistPanel } from '.';
+import { GistPanel } from './GistPanel';
 import { gists } from './data';
 
 export default {
diff --git a/solidjs-tailwind/src/components/GistPanel/index.js b/solidjs-tailwind/src/components/GistPanel/index.js
new file mode 100644
index 000000000..a71083642
--- /dev/null
+++ b/solidjs-tailwind/src/components/GistPanel/index.js
@@ -0,0 +1 @@
+export { default as GistPanel } from './GistPanel';

From e9389600935c31fab30bf13a304e41a90e51c745 Mon Sep 17 00:00:00 2001
From: Jerry Hogan <jerry.hogan@thisdot.co>
Date: Mon, 31 Oct 2022 09:20:29 +0100
Subject: [PATCH 3/3] fix coment

---
 solidjs-tailwind/src/components/GistPanel/GistPanel.jsx       | 4 +++-
 .../src/components/GistPanel/GistPanel.stories.jsx            | 2 +-
 2 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/solidjs-tailwind/src/components/GistPanel/GistPanel.jsx b/solidjs-tailwind/src/components/GistPanel/GistPanel.jsx
index 06e9aa4b3..b7bf0b670 100644
--- a/solidjs-tailwind/src/components/GistPanel/GistPanel.jsx
+++ b/solidjs-tailwind/src/components/GistPanel/GistPanel.jsx
@@ -2,7 +2,7 @@ import { gists } from './data';
 import { For } from 'solid-js';
 import { Link } from '@solidjs/router';
 
-export const GistPanel = () => {
+const GistPanel = () => {
   const dummyGists = gists;
   return (
     <div class="h-full min-h-[30rem] pt-8 px-8">
@@ -23,3 +23,5 @@ export const GistPanel = () => {
     </div>
   );
 };
+
+export default GistPanel;
diff --git a/solidjs-tailwind/src/components/GistPanel/GistPanel.stories.jsx b/solidjs-tailwind/src/components/GistPanel/GistPanel.stories.jsx
index cc8ad0d0c..e8d6a113f 100644
--- a/solidjs-tailwind/src/components/GistPanel/GistPanel.stories.jsx
+++ b/solidjs-tailwind/src/components/GistPanel/GistPanel.stories.jsx
@@ -1,5 +1,5 @@
 import { Router } from '@solidjs/router';
-import { GistPanel } from './GistPanel';
+import GistPanel from './GistPanel';
 import { gists } from './data';
 
 export default {