Merge pull request #29 from Azure-Samples/gk/26-aggregate-miyagi-skil…

…ls-into-a-notebook

add personalize drawer

services/frontend/src/components/accounts/link-accounts.tsx

@@ -1,20 +1,21 @@
 import cn from 'classnames';
 import Button from '@/components/ui/button';
 import {useModal} from '@/components/modal-views/context';
+import {usePersonalizeDrawer} from "@/components/personalize/personalize-context";
 
 export default function LinkAccounts({
   btnClassName}: {
   btnClassName?: string;
   anchorClassName?: string;
 }) {
-  const { openModal } = useModal();
+    const { openPersonalize } = usePersonalizeDrawer();
   return (
     <>
         <Button
-          onClick={() => openModal('LINK_ACCOUNTS_VIEW')}
+          onClick={openPersonalize}
           className={cn('shadow-main hover:shadow-large', btnClassName)}
         >
-          Link Accounts
+          Personalize
         </Button>
     </>
   );

services/frontend/src/components/icons/close.tsx

@@ -0,0 +1,25 @@
+export function Close(props: React.SVGAttributes<{}>) {
+  return (
+    <svg
+      width="10"
+      height="10"
+      viewBox="0 0 10 10"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <path
+        d="M1.46445 8.53542L8.53552 1.46436"
+        stroke="currentColor"
+        strokeWidth="1.5"
+        strokeLinecap="round"
+      />
+      <path
+        d="M1.46446 1.46458L8.53552 8.53564"
+        stroke="currentColor"
+        strokeWidth="1.5"
+        strokeLinecap="round"
+      />
+    </svg>
+  );
+}

services/frontend/src/components/icons/horizontal-three-dots.tsx

@@ -0,0 +1,18 @@
+export default function HorizontalThreeDots() {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      fill="none"
+      viewBox="0 0 24 24"
+      strokeWidth={1.5}
+      stroke="currentColor"
+      className="h-6 w-6"
+    >
+      <path
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        d="M6.75 12a.75.75 0 11-1.5 0 .75.75 0 011.5 0zM12.75 12a.75.75 0 11-1.5 0 .75.75 0 011.5 0zM18.75 12a.75.75 0 11-1.5 0 .75.75 0 011.5 0z"
+      />
+    </svg>
+  );
+}

services/frontend/src/components/personalize/personalize-context.tsx

@@ -0,0 +1,13 @@
+import { atom, useAtom } from 'jotai';
+
+const personalizeDrawerAtom = atom(false);
+export function usePersonalizeDrawer() {
+  const [isPersonalizeOpen, setPersonalizeOpen] = useAtom(personalizeDrawerAtom);
+  const openPersonalize = () => setPersonalizeOpen(true);
+  const closePersonalize = () => setPersonalizeOpen(false);
+  return {
+    isPersonalizeOpen,
+    openPersonalize,
+    closePersonalize,
+  };
+}