Kbar

package.json

@@ -28,6 +28,7 @@
     "get-random-values": "^1.2.2",
     "ioredis": "^4.28.0",
     "js-cookie": "^3.0.1",
+    "kbar": "^0.1.0-beta.21",
     "link-preview-js": "^2.1.8",
     "lru-cache": "^6.0.0",
     "next": "12.0.4",

src/components/Kbar/Actions.ts

@@ -0,0 +1,66 @@
+const actions = ({ setTheme }: { setTheme: (theme: string) => void }) => [
+  // CREATE CLIP REDIRECT
+  {
+    id: 'create',
+    name: 'Create clip',
+    shortcut: ['c'],
+    keywords: 'create clip',
+    section: 'Clip',
+    perform: () => window.location.replace('/'),
+  },
+  // RECEIVE CLIP REDIRECT
+  {
+    id: 'receive',
+    name: 'Receive clip',
+    shortcut: ['r'],
+    keywords: 'receive clip',
+    section: 'Clip',
+    perform: () => window.location.replace('/receive'),
+  },
+  // SETTINGS
+  {
+    id: 'settings',
+    name: 'Settings',
+    shortcut: ['s'],
+    keywords: 'settings',
+    section: 'Settings',
+    perform: () => window.location.replace('/settings'),
+  },
+  // THEME MENU
+  {
+    id: 'theme',
+    name: 'Change theme',
+    shortcut: ['t'],
+    keywords: 'interface color dark light',
+    section: 'Settings',
+  },
+  // THEME OPTIONS
+  {
+    id: 'darkTheme',
+    name: 'Dark',
+    keywords: 'dark theme',
+    shortcut: ['d'],
+    section: '',
+    perform: () => setTheme('dark'),
+    parent: 'theme',
+  },
+  {
+    id: 'lightTheme',
+    name: 'Light',
+    keywords: 'light theme',
+    shortcut: ['l'],
+    section: '',
+    perform: () => setTheme('light'),
+    parent: 'theme',
+  },
+  {
+    id: 'systemTheme',
+    name: 'System',
+    keywords: 'system theme',
+    section: '',
+    perform: () => setTheme('system'),
+    parent: 'theme',
+  },
+];
+
+export default actions;

src/components/Kbar/Kbar.tsx

@@ -0,0 +1,32 @@
+import {
+  KBarAnimator,
+  KBarPortal,
+  KBarPositioner,
+  KBarProvider,
+  KBarSearch,
+} from 'kbar';
+import { useTheme } from 'next-themes';
+import React from 'react';
+
+import actions from './Actions';
+import RenderResults from './RenderResults';
+
+const Kbar: React.FC = ({ children }) => {
+  const { setTheme } = useTheme();
+
+  return (
+    <KBarProvider actions={actions({ setTheme })}>
+      <KBarPortal>
+        <KBarPositioner>
+          <KBarAnimator className="max-w-[600px] w-full rounded-[8px] bg-white dark:bg-dark-secondary overflow-hidden shadow-xl text-black dark:text-dark-text">
+            <KBarSearch className="px-[16px] py-[12px] text-[16px] w-full outline-none border-none " />
+            <RenderResults />
+          </KBarAnimator>
+        </KBarPositioner>
+      </KBarPortal>
+      {children}
+    </KBarProvider>
+  );
+};
+
+export default Kbar;

src/components/Kbar/RenderResults.tsx

@@ -0,0 +1,70 @@
+import { KBarResults, useMatches } from 'kbar';
+import React from 'react';
+
+const RenderResults = () => {
+  const groups = useMatches();
+  const flattened = React.useMemo(
+    () =>
+      groups.reduce((acc, curr) => {
+        // @ts-ignore
+        acc.push(curr.name);
+        // @ts-ignore
+        acc.push(...curr.actions);
+        return acc;
+      }, []),
+    [groups],
+  );
+
+  return (
+    <KBarResults
+      items={flattened}
+      onRender={({ item, active }) =>
+        typeof item === 'string' ? (
+          <div className="opacity-50 py-[8px] px-[16px] uppercase text-[12px]">
+            {item}
+          </div>
+        ) : (
+          <div
+            className={`py-[12px] px-[16px] flex cursor-pointer items-center justify-between ${
+              active ? 'bg-gray-200 dark:bg-[#3B3B3B]' : ''
+            }`}
+          >
+            <div className="flex gap-[8px] text-[14px] items-center">
+              {item.icon && item.icon}
+              <div className="flex flex-col">
+                <div>
+                  <span>{item.name}</span>
+                </div>
+                {item.subtitle && (
+                  <span className="text-[12px]">{item.subtitle}</span>
+                )}
+              </div>
+            </div>
+            {item.shortcut?.length ? (
+              <div
+                aria-hidden
+                style={{ gridAutoFlow: 'column' }}
+                className="grid gap-[4px]"
+              >
+                {item.shortcut.map((shortcut) => (
+                  <kbd
+                    key={shortcut}
+                    className={`py-[4px] px-[6px] ${
+                      active
+                        ? 'bg-gray-300 dark:bg-gray-900'
+                        : 'bg-gray-200 dark:bg-black'
+                    } text-black dark:text-white text-[14px] rounded-[4px]`}
+                  >
+                    {shortcut}
+                  </kbd>
+                ))}
+              </div>
+            ) : null}
+          </div>
+        )
+      }
+    />
+  );
+};
+
+export default RenderResults;

src/components/Kbar/index.ts

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

src/pages/_app.tsx

@@ -1,5 +1,6 @@
 import 'tailwindcss/tailwind.css';
 
+import { Kbar } from '@components/Kbar';
 import type { AppProps } from 'next/app';
 import { SessionProvider } from 'next-auth/react';
 import { ThemeProvider } from 'next-themes';
@@ -9,7 +10,9 @@ function MyApp({ Component, pageProps: { session, ...pageProps } }: AppProps) {
   return (
     <SessionProvider session={session}>
       <ThemeProvider attribute="class">
-        <Component {...pageProps} />
+        <Kbar>
+          <Component {...pageProps} />
+        </Kbar>
       </ThemeProvider>
     </SessionProvider>
   );

src/pages/index.tsx

@@ -38,7 +38,7 @@ const Home: NextPage = () => {
               value={clipURL}
               onChange={(e) => setURL(e.target.value)}
               className="mt-12 text-3xl w-full text-black dark:text-dark-text py-2 px-3 rounded-2xl"
-              placeholder="https://www.histories.cc/krystofex"
+              placeholder="https://www.youtube.com/watch?v=dQw4w9WgXcQ"
             />
           </form>
         </div>

yarn.lock

@@ -867,6 +867,13 @@
   dependencies:
     regenerator-runtime "^0.13.4"
 
+"@babel/runtime@^7.12.5":
+  version "7.16.3"
+  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.16.3.tgz#b86f0db02a04187a3c17caa77de69840165d42d5"
+  integrity sha512-WBwekcqacdY2e9AF/Q7WLFUWmdJGJTkbjqTjoMDgXkVZ3ZRUvOPsLb5KdwISoQVsbP+DQzVZW4Zhci0DvpbNTQ==
+  dependencies:
+    regenerator-runtime "^0.13.4"
+
 "@babel/template@^7.15.4":
   version "7.15.4"
   resolved "https://registry.npmjs.org/@babel/template/-/template-7.15.4.tgz"
@@ -1214,6 +1221,28 @@
   resolved "https://registry.yarnpkg.com/@prisma/engines/-/engines-3.5.0-38.78a5df6def6943431f4c022e1428dbc3e833cf8e.tgz#1873885836294060239f8a887452fd429dc03ae1"
   integrity sha512-MqZUrxuLlIbjB3wu8LrRJOKcvR4k3dunKoI4Q2bPfAwLQY0XlpsLZ3TRVW1c32ooVk939p6iGNkaCUo63Et36g==
 
+"@reach/observe-rect@^1.1.0":
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/@reach/observe-rect/-/observe-rect-1.2.0.tgz#d7a6013b8aafcc64c778a0ccb83355a11204d3b2"
+  integrity sha512-Ba7HmkFgfQxZqqaeIWWkNK0rEhpxVQHIoVyW1YDSkGsGIXzcaW4deC8B0pZrNSSyLTdIk7y+5olKt5+g0GmFIQ==
+
+"@reach/portal@^0.16.0":
+  version "0.16.2"
+  resolved "https://registry.yarnpkg.com/@reach/portal/-/portal-0.16.2.tgz#ca83696215ee03acc2bb25a5ae5d8793eaaf2f64"
+  integrity sha512-9ur/yxNkuVYTIjAcfi46LdKUvH0uYZPfEp4usWcpt6PIp+WDF57F/5deMe/uGi/B/nfDweQu8VVwuMVrCb97JQ==
+  dependencies:
+    "@reach/utils" "0.16.0"
+    tiny-warning "^1.0.3"
+    tslib "^2.3.0"
+
+"@reach/[email protected]":
+  version "0.16.0"
+  resolved "https://registry.yarnpkg.com/@reach/utils/-/utils-0.16.0.tgz#5b0777cf16a7cab1ddd4728d5d02762df0ba84ce"
+  integrity sha512-PCggBet3qaQmwFNcmQ/GqHSefadAFyNCUekq9RrWoaU9hh/S4iaFgf2MBMdM47eQj5i/Bk0Mm07cP/XPFlkN+Q==
+  dependencies:
+    tiny-warning "^1.0.3"
+    tslib "^2.3.0"
+
 "@rollup/plugin-babel@^5.2.0":
   version "5.3.0"
   resolved "https://registry.npmjs.org/@rollup/plugin-babel/-/plugin-babel-5.3.0.tgz"
@@ -3136,6 +3165,11 @@ fast-diff@^1.1.2:
   resolved "https://registry.yarnpkg.com/fast-diff/-/fast-diff-1.2.0.tgz#73ee11982d86caaf7959828d519cfe927fac5f03"
   integrity sha512-xJuoT5+L99XlZ8twedaRf6Ax2TgQVxvgZOYoPKqZufmJib0tL2tegPBOZb1pVNgIhlqDlA0eO0c3wBvQcmzx4w==
 
+fast-equals@^2.0.3:
+  version "2.0.3"
+  resolved "https://registry.yarnpkg.com/fast-equals/-/fast-equals-2.0.3.tgz#7039b0a039909f345a2ce53f6202a14e5f392efc"
+  integrity sha512-0EMw4TTUxsMDpDkCg0rXor2gsg+npVrMIHbEhvD0HZyIhUX6AktC/yasm+qKwfyswd06Qy95ZKk8p2crTo0iPA==
+
 fast-glob@^3.1.1, fast-glob@^3.2.7:
   version "3.2.7"
   resolved "https://registry.npmjs.org/fast-glob/-/fast-glob-3.2.7.tgz"
@@ -4073,6 +4107,16 @@ jsonpointer@^4.1.0:
     array-includes "^3.1.3"
     object.assign "^4.1.2"
 
+kbar@^0.1.0-beta.21:
+  version "0.1.0-beta.21"
+  resolved "https://registry.yarnpkg.com/kbar/-/kbar-0.1.0-beta.21.tgz#9035490635d43d3e6d459a18e73cf517bdf43a72"
+  integrity sha512-+UQ0tfiREfmGdtUIS5bqLGz5BwhYzvZ/d6k2uwGe/odyrIfs86Rh8VzlpD4e6feNpYDhFc+yp2lCMAp9FKO/qA==
+  dependencies:
+    "@reach/portal" "^0.16.0"
+    fast-equals "^2.0.3"
+    match-sorter "^6.3.0"
+    react-virtual "^2.8.2"
+
 keyv@^4.0.0:
   version "4.0.3"
   resolved "https://registry.npmjs.org/keyv/-/keyv-4.0.3.tgz"
@@ -4241,6 +4285,14 @@ make-error@^1.1.1, make-error@^1.3.6:
   resolved "https://registry.npmjs.org/make-error/-/make-error-1.3.6.tgz"
   integrity sha512-s8UhlNe7vPKomQhC1qFelMokr/Sc3AgNbso3n74mVPA5LTZwkB9NlXf4XPamLxJE8h0gh73rM94xvwRT2CVInw==
 
+match-sorter@^6.3.0:
+  version "6.3.1"
+  resolved "https://registry.yarnpkg.com/match-sorter/-/match-sorter-6.3.1.tgz#98cc37fda756093424ddf3cbc62bfe9c75b92bda"
+  integrity sha512-mxybbo3pPNuA+ZuCUhm5bwNkXrJTbsk5VWbR5wiwz/GC6LIiegBGn2w3O08UG/jdbYLinw51fSQ5xNU1U3MgBw==
+  dependencies:
+    "@babel/runtime" "^7.12.5"
+    remove-accents "0.4.2"
+
 matcher@^4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/matcher/-/matcher-4.0.0.tgz#a42a05a09aaed92e2d241eb91fddac689461ea51"
@@ -5185,6 +5237,13 @@ react-spinners@^0.11.0:
   dependencies:
     "@emotion/react" "^11.1.4"
 
+react-virtual@^2.8.2:
+  version "2.8.2"
+  resolved "https://registry.yarnpkg.com/react-virtual/-/react-virtual-2.8.2.tgz#e204b30c57c426bd260ed1ac49f8b1099e92b7cb"
+  integrity sha512-CwnvF/3Jev4M14S9S7fgzGc0UFQ/bG/VXbrUCq+AB0zH8WGnVDTG0lQT7O3jPY76YLPzTHBu+AMl64Stp8+exg==
+  dependencies:
+    "@reach/observe-rect" "^1.1.0"
+
 [email protected]:
   version "17.0.2"
   resolved "https://registry.npmjs.org/react/-/react-17.0.2.tgz"
@@ -5312,6 +5371,11 @@ regjsparser@^0.7.0:
   dependencies:
     jsesc "~0.5.0"
 
+[email protected]:
+  version "0.4.2"
+  resolved "https://registry.yarnpkg.com/remove-accents/-/remove-accents-0.4.2.tgz#0a43d3aaae1e80db919e07ae254b285d9e1c7bb5"
+  integrity sha1-CkPTqq4egNuRngeuJUsoXZ4ce7U=
+
 require-from-string@^2.0.2:
   version "2.0.2"
   resolved "https://registry.npmjs.org/require-from-string/-/require-from-string-2.0.2.tgz"
@@ -5983,6 +6047,11 @@ [email protected]:
   dependencies:
     setimmediate "^1.0.4"
 
+tiny-warning@^1.0.3:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/tiny-warning/-/tiny-warning-1.0.3.tgz#94a30db453df4c643d0fd566060d60a875d84754"
+  integrity sha512-lBN9zLN/oAf68o3zNXYrdCt1kP8WsiGW8Oo2ka41b2IM5JL/S1CTyX1rW0mb/zSuJun0ZUrDxx4sqvYS2FWzPA==
+
 tmp@^0.2.1:
   version "0.2.1"
   resolved "https://registry.npmjs.org/tmp/-/tmp-0.2.1.tgz"
@@ -6052,7 +6121,7 @@ tslib@^1.8.1:
   resolved "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz"
   integrity sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==
 
-tslib@^2.1.0, tslib@^2.2.0:
+tslib@^2.1.0, tslib@^2.2.0, tslib@^2.3.0:
   version "2.3.1"
   resolved "https://registry.npmjs.org/tslib/-/tslib-2.3.1.tgz"
   integrity sha512-77EbyPPpMz+FRFRuAFlWMtmgUWGe9UOG2Z25NqCwiIjRhOf5iKGuzSe5P2w1laq+FkRy4p+PCuVkJSGkzTEKVw==