feature tabs

thanhdanh27600 · Aug 30, 2023 · 44a2161 · 44a2161
1 parent 46c4707
commit 44a2161
Show file tree

Hide file tree

Showing 6 changed files with 109 additions and 26 deletions.
diff --git a/src/components/atoms/Accordion.tsx b/src/components/atoms/Accordion.tsx
@@ -10,7 +10,7 @@ export const Accordion = ({ children, title }: Props) => {
   return (
     <div id={`accordion${id}`}>
       <div key={`k${id}`} className="rounded-none border-none border-neutral-200">
-        <h2 className="mb-0 hover:text-cyan-500 hover:underline" id={`heading${id}`}>
+        <h3 className="mb-0 hover:text-cyan-500 hover:underline" id={`heading${id}`}>
           <button
             className="[&:not([data-te-collapse-collapsed])]:text-primary group relative flex w-full items-center rounded-none border-0 py-4 text-left text-base transition [overflow-anchor:none] hover:z-[2] focus:z-[3] focus:outline-none"
             type="button"
@@ -31,7 +31,7 @@ export const Accordion = ({ children, title }: Props) => {
             </span>
             <span className="ml-2 text-lg">{title || 'Heading'}</span>
           </button>
-        </h2>
+        </h3>
         <div
           id={`collapse${id}`}
           className="!visible hidden border-0"

diff --git a/src/components/atoms/Tabs.tsx b/src/components/atoms/Tabs.tsx
@@ -0,0 +1,52 @@
+import clsx from 'clsx';
+import { ReactNode } from 'react';
+
+export type Tab = {
+  content: ReactNode;
+  key: string;
+  disabled?: boolean;
+};
+
+interface Props {
+  tabs: Tab[];
+  selectedKey: string;
+  setSelectedKey: (key: string) => void;
+}
+
+export const Tabs = (props: Props) => {
+  const { tabs, selectedKey, setSelectedKey } = props;
+
+  const handleClick = (tab: Tab) => (e: any) => {
+    if (tab.disabled) return;
+    setSelectedKey(tab.key);
+  };
+
+  return (
+    <div className="border-b border-gray-200 ">
+      <ul className="-mb-px flex flex-wrap text-center text-sm font-medium text-gray-500">
+        {tabs.map((tab) => {
+          const selected = selectedKey === tab.key;
+          return (
+            <>
+              <li className="mr-2" key={`tab-${tab.key}`}>
+                <a
+                  href={`#${tab.key}`}
+                  onClick={handleClick(tab)}
+                  className={clsx(
+                    'group inline-flex items-center justify-center rounded-t-lg border-b-2 border-transparent p-4',
+                    !tab.disabled && !selected && 'hover:border-gray-300 hover:text-gray-600',
+                    !tab.disabled &&
+                      selected &&
+                      'border-cyan-500 text-cyan-500 hover:border-cyan-400 hover:text-cyan-400',
+                    tab.disabled && 'cursor-not-allowed text-gray-400',
+                  )}>
+                  <div className={clsx()}>{tab.content}</div>
+                </a>
+              </li>
+            </>
+          );
+        })}
+      </ul>
+    </div>
+  );
+};
diff --git a/src/components/atoms/UploadImage.tsx b/src/components/atoms/UploadImage.tsx
@@ -44,9 +44,9 @@ export const UploadImage = ({
           };
           return (
             <button
-              className="w-fit cursor-pointer rounded-lg border border-gray-300 p-4 transition-colors hover:bg-gray-100"
+              className="w-fit cursor-pointer rounded-lg border border-gray-300 p-6 transition-colors hover:bg-gray-100"
               onClick={handleOnClick}>
-              <UploadCloud className="h-8 w-8 text-gray-700" />
+              <UploadCloud className="h-8 w-8 stroke-[1.25px] text-gray-700" />
             </button>
           );
         }}

diff --git a/src/components/sections/URLAdvancedSetting.tsx b/src/components/sections/URLAdvancedSetting.tsx
@@ -1,11 +1,35 @@
-import { ThumbsUp } from '@styled-icons/feather';
+import { Facebook, ThumbsUp, Twitter } from '@styled-icons/feather';
 import { Accordion } from 'components/atoms/Accordion';
+import { Tab, Tabs } from 'components/atoms/Tabs';
 import { AdvancedSettingUrlForm } from 'components/gadgets/AdvancedSettingUrlForm';
+import { useState } from 'react';
 import { useTrans } from 'utils/i18next';
 import { URLSharePreview } from './URLSharePreview';
 
+const tabs: Tab[] = [
+  {
+    content: (
+      <span className="flex items-center gap-2">
+        <Facebook className="w-5" />
+        Facebook
+      </span>
+    ),
+    key: 'Facebook',
+  },
+  {
+    content: (
+      <span className="flex items-center gap-2">
+        <Twitter className="w-5" />
+        Twitter
+      </span>
+    ),
+    key: 'Twitter',
+  },
+];
+
 export const URLAdvancedSetting = () => {
   const { t, locale } = useTrans();
+  const [selectedKey, setSelectedKey] = useState(tabs[0]?.key);
 
   const title = (
     <span className="relative">
@@ -19,7 +43,8 @@ export const URLAdvancedSetting = () => {
   return (
     <Accordion title={title}>
       <div>
-        <URLSharePreview />
+        <Tabs tabs={tabs} selectedKey={selectedKey} setSelectedKey={setSelectedKey} />
+        <URLSharePreview selectedKey={selectedKey} />
         <AdvancedSettingUrlForm key={locale} />
         <hr className="my-8" />
       </div>

diff --git a/src/components/sections/URLSharePreview.tsx b/src/components/sections/URLSharePreview.tsx
@@ -2,21 +2,15 @@ import { useBearStore } from 'bear';
 import { FacebookPreview } from 'components/gadgets/FacebookPreview';
 import { TwitterPreview } from 'components/gadgets/TwitterPreview';
 
-export const URLSharePreview = () => {
+export const URLSharePreview = ({ selectedKey }: { selectedKey: string }) => {
   const { shortenSlice } = useBearStore();
   const shortenHistoryForm = shortenSlice((state) => state.shortenHistoryForm);
   if (!shortenHistoryForm) return null;
 
   return (
-    <div className="mx-auto mt-4 flex w-fit flex-col items-center justify-between gap-8 lg:flex-row">
-      <div>
-        <p className="mb-2 text-gray-500">{`Facebook`}</p>
-        <FacebookPreview {...shortenHistoryForm} />
-      </div>
-      <div>
-        <p className="mb-2 text-gray-500">{`Twitter`}</p>
-        <TwitterPreview {...shortenHistoryForm} />
-      </div>
+    <div className="mx-auto mt-8 flex w-fit flex-col items-center justify-between gap-8 lg:flex-row">
+      {selectedKey === 'Facebook' && <FacebookPreview {...shortenHistoryForm} />}
+      {selectedKey === 'Twitter' && <TwitterPreview {...shortenHistoryForm} />}
     </div>
   );
 };
diff --git a/src/components/sections/URLShortenerResult.tsx b/src/components/sections/URLShortenerResult.tsx
@@ -4,6 +4,7 @@ import clsx from 'clsx';
 import { Button } from 'components/atoms/Button';
 import mixpanel from 'mixpanel-browser';
 import Image from 'next/image';
+import { useEffect } from 'react';
 import { toast } from 'react-hot-toast';
 import { useQuery } from 'react-query';
 import { BASE_URL, BASE_URL_SHORT, PLATFORM_AUTH } from 'types/constants';
@@ -26,14 +27,13 @@ export const URLShortenerResult = ({ setCopied, copied }: Props) => {
   const shortenUrl = getShortenUrl();
 
   const onCopy = () => {
-    if (copied) {
-      toast.success('Copied');
-    }
     mixpanel.track(MIXPANEL_EVENT.LINK_COPY, {
       status: MIXPANEL_STATUS.OK,
+      shortenUrl,
     });
     setCopied(true);
     copyToClipBoard(shortenUrl);
+    toast.success('Copied');
   };
   let token = '';
   if (PLATFORM_AUTH) {
@@ -48,6 +48,17 @@ export const URLShortenerResult = ({ setCopied, copied }: Props) => {
     ...strictRefetch,
   });
 
+  useEffect(() => {
+    if (!copied) return;
+    let timeout = setTimeout(() => {
+      setCopied(false);
+    }, 2000);
+
+    return () => {
+      clearTimeout(timeout);
+    };
+  }, [copied]);
+
   return (
     <div className="mt-4">
       <h2 className="text-xl">🚀 {t('shortenSuccess')}</h2>
@@ -83,16 +94,17 @@ export const URLShortenerResult = ({ setCopied, copied }: Props) => {
           <span className="">{copied ? 'Copied' : 'Copy'}</span>
         </button>
       </div>
+      <a
+        href={linkWithLanguage(shortenUrl.replace(`${BASE_URL_SHORT}/`, `${BASE_URL}/v/`), locale)}
+        target="_blank"
+        className="mt-2 flex w-full cursor-pointer justify-end text-cyan-500 underline decoration-1 transition-all hover:decoration-wavy">
+        {t('trackingLive')}
+      </a>
+
       <div className="mt-4">
         <URLAdvancedSetting />
       </div>
-      <div className="flex flex-col flex-wrap justify-between gap-8 sm:flex-row sm:items-center">
-        <a
-          href={linkWithLanguage(shortenUrl.replace(`${BASE_URL_SHORT}/`, `${BASE_URL}/v/`), locale)}
-          target="_blank"
-          className="cursor-pointer text-cyan-500 underline decoration-1 transition-all hover:decoration-wavy">
-          {t('trackingLive')}
-        </a>
+      <div className="flex justify-center max-sm:mt-4 sm:justify-end">
         <div className="flex flex-col items-center gap-2 sm:flex-row">
           <a href={`http://www.facebook.com/sharer.php?u=${shortenUrl}`} target="_blank">
             <Button