Fresh LayoutSelector with a ButtonGroup

Author: manojVivek

desktop-app/src/renderer/components/ButtonGroup/index.tsx

@@ -0,0 +1,35 @@
+import { ReactElement } from 'react';
+import cx from 'classnames';
+
+interface Props {
+  buttons: {
+    content: ReactElement;
+    srContent: string;
+    onClick: () => void;
+    isActive: boolean;
+  }[];
+}
+
+export const ButtonGroup = ({ buttons }: Props) => {
+  return (
+    <span className="isolate inline-flex rounded-md shadow-sm">
+      {buttons.map(({ content, srContent, onClick, isActive }, index) => (
+        <button
+          type="button"
+          className={cx(
+            'relative inline-flex items-center px-2 py-2 text-slate-500 ring-1 ring-inset ring-slate-300 hover:bg-slate-300 focus:z-10 dark:text-slate-200 hover:dark:bg-slate-600',
+            {
+              'rounded-l-md': index === 0,
+              'rounded-r-md': index === buttons.length - 1,
+              'bg-slate-200 dark:bg-slate-600': isActive,
+            }
+          )}
+          onClick={onClick}
+        >
+          <span className="sr-only">{srContent}</span>
+          {content}
+        </button>
+      ))}
+    </span>
+  );
+};

desktop-app/src/renderer/components/Divider/index.tsx

@@ -1,3 +1,3 @@
 export const Divider = () => (
-  <div className="my-4 w-full border-t border-gray-200 opacity-20" />
+  <div className="my-1 w-full border-t border-gray-400 opacity-30" />
 );

desktop-app/src/renderer/components/Masonry/MasonryLayout.tsx

@@ -1,43 +1,66 @@
 import { Icon } from '@iconify/react';
-import { PREVIEW_LAYOUTS } from 'common/constants';
+import { PREVIEW_LAYOUTS, PreviewLayout } from 'common/constants';
 import { useDispatch, useSelector } from 'react-redux';
+import { ButtonGroup } from 'renderer/components/ButtonGroup';
 import useKeyboardShortcut, {
   SHORTCUT_CHANNEL,
 } from 'renderer/components/KeyboardShortcutsManager/useKeyboardShortcut';
-import Toggle from 'renderer/components/Toggle';
 import { selectLayout, setLayout } from 'renderer/store/features/renderer';
 
-const PreviewLayout = () => {
+const PreviewLayoutSelector = () => {
   const layout = useSelector(selectLayout);
   const dispatch = useDispatch();
 
-  const handleLayout = () => {
-    if (layout === PREVIEW_LAYOUTS.FLEX)
-      dispatch(setLayout(PREVIEW_LAYOUTS.COLUMN));
-    else dispatch(setLayout(PREVIEW_LAYOUTS.FLEX));
+  const handleLayout = (newLayout: PreviewLayout) => {
+    dispatch(setLayout(newLayout));
   };
 
   useKeyboardShortcut(SHORTCUT_CHANNEL.PREVIEW_LAYOUT, handleLayout);
 
   return (
     <div className="flex flex-row items-center justify-start px-4">
       <span className="w-1/2">Preview Layout</span>
-      <div className="flex w-fit items-center gap-3 border-l px-5 dark:border-slate-400">
-        <Icon icon="radix-icons:layout" />
-        <Toggle
-          isOn={layout === PREVIEW_LAYOUTS.FLEX}
-          onChange={(e) => {
-            if (e.target.checked) {
-              dispatch(setLayout(PREVIEW_LAYOUTS.FLEX));
-            } else {
-              dispatch(setLayout(PREVIEW_LAYOUTS.COLUMN));
-            }
-          }}
+      <div className="flex w-fit items-center gap-3 px-5 ">
+        <ButtonGroup
+          buttons={[
+            {
+              content: (
+                <div className="flex flex-col items-center text-xs">
+                  {' '}
+                  <Icon icon="radix-icons:layout" /> Column
+                </div>
+              ),
+              srContent: 'Horizontal Layout',
+              onClick: () => handleLayout(PREVIEW_LAYOUTS.COLUMN),
+              isActive: layout === PREVIEW_LAYOUTS.COLUMN,
+            },
+            {
+              content: (
+                <div className="flex min-w-12 flex-col items-center text-xs">
+                  {' '}
+                  <Icon icon="lucide:layout-dashboard" /> Flex
+                </div>
+              ),
+              srContent: 'Flex Layout',
+              onClick: () => handleLayout(PREVIEW_LAYOUTS.FLEX),
+              isActive: layout === PREVIEW_LAYOUTS.FLEX,
+            },
+            {
+              content: (
+                <div className="flex flex-col items-center text-xs">
+                  {' '}
+                  <Icon icon="bx:bx-grid-alt" /> Masonry
+                </div>
+              ),
+              srContent: 'Masonry Layout',
+              onClick: () => handleLayout(PREVIEW_LAYOUTS.MASONRY),
+              isActive: layout === PREVIEW_LAYOUTS.MASONRY,
+            },
+          ]}
         />
-        <Icon icon="lucide:layout-dashboard" />
       </div>
     </div>
   );
 };
 
-export default PreviewLayout;
+export default PreviewLayoutSelector;