chore: gist panel UI

solidjs-tailwind/src/components/GistPanel/GistPanel.jsx

@@ -0,0 +1,27 @@
+import { gists } from './data';
+import { For } from 'solid-js';
+import { Link } from '@solidjs/router';
+
+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>
+  );
+};
+
+export default GistPanel;

solidjs-tailwind/src/components/GistPanel/GistPanel.stories.jsx

@@ -0,0 +1,26 @@
+import { Router } from '@solidjs/router';
+import GistPanel from './GistPanel';
+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({});

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',
+      },
+    ],
+  },
+];

solidjs-tailwind/src/components/GistPanel/index.js

@@ -0,0 +1 @@
+export { default as GistPanel } from './GistPanel';

solidjs-tailwind/src/components/index.js

@@ -1,5 +1,6 @@
 export * from './CounterExample';
 export * from './FetchExample';
+export * from './GistPanel';
 export * from './RepoMeta';
 export * from './RepoCard';
 export * from './PrivacyBadge';

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: [],
 }