Merge pull request #65 from apptension/feature/element-box-ui

feat: change element box ui

package.json

@@ -15,10 +15,11 @@
   "dependencies": {
     "@headlessui/react": "^1.4.2",
     "@heroicons/react": "^1.0.5",
-    "clsx": "^1.1.1",
-    "fuse.js": "^6.4.6",
     "axios": "^0.24.0",
+    "clsx": "^1.1.1",
+    "copy-to-clipboard": "^3.3.1",
     "date-fns": "^2.27.0",
+    "fuse.js": "^6.4.6",
     "next": "12.0.5",
     "react": "17.0.2",
     "react-dom": "17.0.2",
@@ -43,9 +44,9 @@
     "lodash": "^4.17.21",
     "postcss": "^8.4.4",
     "ramda": "^0.27.1",
+    "react-query": "^3.34.0",
     "tailwindcss": "^2.2.19",
     "uuid": "^8.3.2",
-    "yaml": "^1.10.2",
-    "react-query": "^3.34.0"
+    "yaml": "^1.10.2"
   }
 }

src/components/element/elementBox/elementBox.component.js

@@ -1,57 +1,72 @@
-import { useState } from 'react';
+import { Fragment } from 'react';
 import clsx from 'clsx';
+import copy from 'copy-to-clipboard';
+import { Tab } from '@headlessui/react';
 import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
 import { dracula } from 'react-syntax-highlighter/dist/cjs/styles/prism';
+const TABS = ['Preview', 'Source'];
 
-import { ELEMENT_BOX_MODE } from './elementBox.const';
+const HEIGHT = 60;
 
 export function ElementBoxComponent({ author, description, Component, source }) {
-  const [mode, setMode] = useState(ELEMENT_BOX_MODE.PREVIEW);
-  const handlePreview = () => setMode(ELEMENT_BOX_MODE.PREVIEW);
-  const handleSource = () => setMode(ELEMENT_BOX_MODE.SOURCE);
+  const handleCopySuccess = () => {
+    // TODO: HANDLE COPY SUCCESS
+  };
+  const handleCopy = () => copy(source, { onCopy: handleCopySuccess });
   return (
-    <div className="bg-blue-100 p-4 rounded">
-      <div className="flex justify-between">
+    <div>
+      <div className="mb-2">
         <p>{description}</p>
-        <p>by {author}</p>
       </div>
-      <div className="flex justify-center">
-        <button
-          onClick={handlePreview}
-          className={clsx(
-            {
-              'border-blue-500 text-gray-900': mode === ELEMENT_BOX_MODE.PREVIEW,
-              'border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700':
-                mode !== ELEMENT_BOX_MODE.PREVIEW,
-            },
-            'inline-flex items-center px-1 pt-1 border-b-2 text-m font-medium'
-          )}
-        >
-          Preview
-        </button>
-        <button
-          onClick={handleSource}
-          className={clsx(
-            {
-              'border-blue-500 text-gray-900': mode === ELEMENT_BOX_MODE.SOURCE,
-              'border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700':
-                mode !== ELEMENT_BOX_MODE.SOURCE,
-            },
-            'inline-flex items-center px-1 pt-1 border-b-2 text-m font-medium'
-          )}
-        >
-          Source
-        </button>
-      </div>
-      <div className="bg-white">
-        {mode === ELEMENT_BOX_MODE.PREVIEW && (
-          <div className="h-32 flex justify-center items-center">{Component.default()}</div>
-        )}
-        {mode === ELEMENT_BOX_MODE.SOURCE && (
-          <SyntaxHighlighter showLineNumbers language="javascript" style={dracula}>
-            {source}
-          </SyntaxHighlighter>
-        )}
+      <Tab.Group
+        as="div"
+        className={`w-full relative rounded-lg h-${HEIGHT} bg-gradient-to-tr from-blue-100 to-blue-500`}
+      >
+        <Tab.List as="div" className="absolute right-2 top-2">
+          {TABS.map((tab) => (
+            <Tab key={tab} as={Fragment}>
+              {({ selected }) => (
+                <button
+                  className={clsx(
+                    {
+                      'bg-black bg-opacity-50 text-white': selected,
+                      'bg-transparent text-white': !selected,
+                    },
+                    'text-white, px-2 py-1 rounded text-xs'
+                  )}
+                >
+                  {tab}
+                </button>
+              )}
+            </Tab>
+          ))}
+          <button onClick={handleCopy} className="bg-transparent text-white text-white, px-2 py-1 rounded text-xs">
+            Copy
+          </button>
+        </Tab.List>
+        <Tab.Panels as="div" className="h-full">
+          <Tab.Panel as="div" className="h-full flex justify-center items-center">
+            {Component.default()}
+          </Tab.Panel>
+          <Tab.Panel as="div" className="h-full">
+            <SyntaxHighlighter
+              showLineNumbers
+              className={`max-h-${HEIGHT} h-full`}
+              language="javascript"
+              style={dracula}
+            >
+              {source}
+            </SyntaxHighlighter>
+          </Tab.Panel>
+        </Tab.Panels>
+      </Tab.Group>
+      <div className="mt-2 flex justify-end">
+        <p>
+          Author:{' '}
+          <a className="text-blue-500" href={`https://github.com/${author}`}>
+            {author}
+          </a>
+        </p>
       </div>
     </div>
   );