@canmingir/link 1.1.0

package/src/components/search-not-found/search-not-found.jsx

@@ -0,0 +1,31 @@
+import Paper from "@mui/material/Paper";
+import Typography from "@mui/material/Typography";
+
+// ----------------------------------------------------------------------
+
+export default function SearchNotFound({ query, sx, ...other }) {
+  return query ? (
+    <Paper
+      sx={{
+        bgcolor: "unset",
+        textAlign: "center",
+        ...sx,
+      }}
+      {...other}
+    >
+      <Typography variant="h6" gutterBottom>
+        Not Found
+      </Typography>
+
+      <Typography variant="body2">
+        No results found for &nbsp;
+        <strong>&quot;{query}&quot;</strong>.
+        <br /> Try checking for typos or using complete words.
+      </Typography>
+    </Paper>
+  ) : (
+    <Typography variant="body2" sx={sx}>
+      Please enter keywords
+    </Typography>
+  );
+}

package/src/components/settings/context/index.js

@@ -0,0 +1,2 @@
+export { SettingsProvider } from "./settings-provider";
+export { useSettingsContext } from "./settings-context";

package/src/components/settings/context/settings-context.js

@@ -0,0 +1,14 @@
+import { createContext, useContext } from "react";
+
+// ----------------------------------------------------------------------
+
+export const SettingsContext = createContext({});
+
+export const useSettingsContext = () => {
+  const context = useContext(SettingsContext);
+
+  if (!context)
+    throw new Error("useSettingsContext must be use inside SettingsProvider");
+
+  return context;
+};

package/src/components/settings/context/settings-provider.jsx

@@ -0,0 +1,52 @@
+import React from "react";
+import { SettingsContext } from "./settings-context";
+import isEqual from "lodash/isEqual";
+import { useLocalStorage } from "../../../hooks/use-local-storage";
+
+import { useCallback, useMemo, useState } from "react";
+
+// ----------------------------------------------------------------------
+
+const STORAGE_KEY = "settings";
+
+export function SettingsProvider({ children, defaultSettings }) {
+  const { state, update, reset } = useLocalStorage(
+    STORAGE_KEY,
+    defaultSettings
+  );
+
+  const [openDrawer, setOpenDrawer] = useState(false);
+
+  // Drawer
+  const onToggleDrawer = useCallback(() => {
+    setOpenDrawer((prev) => !prev);
+  }, []);
+
+  const onCloseDrawer = useCallback(() => {
+    setOpenDrawer(false);
+  }, []);
+
+  const canReset = !isEqual(state, defaultSettings);
+
+  const memoizedValue = useMemo(
+    () => ({
+      ...state,
+      onUpdate: update,
+      // Direction
+      // Reset
+      canReset,
+      onReset: reset,
+      // Drawer
+      open: openDrawer,
+      onToggle: onToggleDrawer,
+      onClose: onCloseDrawer,
+    }),
+    [reset, update, state, canReset, openDrawer, onCloseDrawer, onToggleDrawer]
+  );
+
+  return (
+    <SettingsContext.Provider value={memoizedValue}>
+      {children}
+    </SettingsContext.Provider>
+  );
+}

package/src/components/settings/drawer/base-option.jsx

@@ -0,0 +1,54 @@
+import ButtonBase from "@mui/material/ButtonBase";
+import React from "react";
+import Stack from "@mui/material/Stack";
+import SvgColor from "../../svg-color";
+import { alpha } from "@mui/material/styles";
+
+// ----------------------------------------------------------------------
+
+export default function BaseOptions({ icons, options, value, onChange }) {
+  return (
+    <Stack direction="row" spacing={2}>
+      {options.map((option, index) => {
+        const selected = value === option;
+        return (
+          <ButtonBase
+            key={option}
+            onClick={() => onChange(option)}
+            sx={{
+              width: 1,
+              height: 80,
+              borderRadius: 1,
+              border: (theme) =>
+                `solid 1px ${alpha(theme.palette.grey[500], 0.08)}`,
+              ...(selected && {
+                bgcolor: "background.paper",
+                boxShadow: (theme) =>
+                  `-24px 8px 24px -4px ${alpha(
+                    theme.palette.mode === "light"
+                      ? theme.palette.grey[500]
+                      : theme.palette.common.black,
+                    0.08
+                  )}`,
+              }),
+              "& .svg-color": {
+                background: (theme) =>
+                  `linear-gradient(135deg, ${theme.palette.grey[500]} 0%, ${theme.palette.grey[600]} 100%)`,
+                ...(selected && {
+                  background: (theme) =>
+                    `linear-gradient(135deg, ${theme.palette.primary.light} 0%, ${theme.palette.primary.main} 100%)`,
+                }),
+              },
+            }}
+          >
+            <SvgColor
+              src={`./assets/icons/setting/ic_${
+                index === 0 ? icons[0] : icons[1]
+              }.svg`}
+            />
+          </ButtonBase>
+        );
+      })}
+    </Stack>
+  );
+}

package/src/components/settings/drawer/fullscreen-option.jsx

@@ -0,0 +1,60 @@
+import Box from "@mui/material/Box";
+import ButtonBase from "@mui/material/ButtonBase";
+import React from "react";
+import SvgColor from "../../svg-color";
+import { alpha } from "@mui/material/styles";
+
+import { useCallback, useState } from "react";
+
+// ----------------------------------------------------------------------
+
+export default function FullScreenOption() {
+  const [fullscreen, setFullscreen] = useState(false);
+
+  const onToggleFullScreen = useCallback(() => {
+    if (!document.fullscreenElement) {
+      document.documentElement.requestFullscreen();
+      setFullscreen(true);
+    } else if (document.exitFullscreen) {
+      document.exitFullscreen();
+      setFullscreen(false);
+    }
+  }, []);
+
+  return (
+    <Box sx={{ p: 2.5 }}>
+      <ButtonBase
+        onClick={onToggleFullScreen}
+        sx={{
+          width: 1,
+          height: 48,
+          borderRadius: 1,
+          color: "text.disabled",
+          typography: "subtitle2",
+          border: (theme) =>
+            `solid 1px ${alpha(theme.palette.grey[500], 0.08)}`,
+          ...(fullscreen && {
+            color: "text.primary",
+          }),
+          "& .svg-color": {
+            background: (theme) =>
+              `linear-gradient(135deg, ${theme.palette.grey[500]} 0%, ${theme.palette.grey[600]} 100%)`,
+            ...(fullscreen && {
+              background: (theme) =>
+                `linear-gradient(135deg, ${theme.palette.primary.light} 0%, ${theme.palette.primary.main} 100%)`,
+            }),
+          },
+        }}
+      >
+        <SvgColor
+          src={`/assets/icons/setting/${
+            fullscreen ? "ic_exit_full_screen" : "ic_full_screen"
+          }.svg`}
+          sx={{ width: 16, height: 16, mr: 1 }}
+        />
+
+        {fullscreen ? "Exit Fullscreen" : "Fullscreen"}
+      </ButtonBase>
+    </Box>
+  );
+}

package/src/components/settings/drawer/index.js

@@ -0,0 +1 @@
+export { default } from "./settings-drawer";

package/src/components/settings/drawer/layout-options.jsx

@@ -0,0 +1,146 @@
+import Box from "@mui/material/Box";
+import ButtonBase from "@mui/material/ButtonBase";
+import React from "react";
+import Stack from "@mui/material/Stack";
+
+import { alpha, useTheme } from "@mui/material/styles";
+
+// ----------------------------------------------------------------------
+
+export default function LayoutOptions({ options, value, onChange }) {
+  const theme = useTheme();
+  const renderNav = (option, selected) => {
+    const background = `linear-gradient(135deg, ${theme.palette.primary.light} 0%, ${theme.palette.primary.main} 100%)`;
+
+    const baseStyles = {
+      flexShrink: 0,
+      borderRadius: 0.5,
+      bgcolor: "grey.500",
+    };
+
+    const circle = (
+      <Box
+        sx={{
+          ...baseStyles,
+          width: 8,
+          height: 8,
+          ...(selected && { background }),
+        }}
+      />
+    );
+
+    const primaryItem = (
+      <Box
+        sx={{
+          ...baseStyles,
+          width: 1,
+          height: 3,
+          opacity: 0.48,
+          ...(option === "horizontal" && {
+            width: 12,
+          }),
+          ...(selected && { background }),
+        }}
+      />
+    );
+
+    const secondaryItem = (
+      <Box
+        sx={{
+          ...baseStyles,
+          width: 1,
+          height: 3,
+          maxWidth: 12,
+          opacity: 0.24,
+          ...(option === "horizontal" && {
+            width: 8,
+          }),
+          ...(selected && { background }),
+        }}
+      />
+    );
+
+    return (
+      <Stack
+        spacing={0.5}
+        flexShrink={0}
+        direction={option === "horizontal" ? "row" : "column"}
+        sx={{
+          p: 0.5,
+          width: 28,
+          height: 1,
+          borderRight: `solid 1px ${alpha(theme.palette.grey[500], 0.08)}`,
+          ...(option === "mini" && {
+            width: 16,
+          }),
+          ...(option === "horizontal" && {
+            width: 1,
+            height: 16,
+            alignItems: "center",
+            borderRight: "unset",
+            borderBottom: `solid 1px ${alpha(theme.palette.grey[500], 0.08)}`,
+          }),
+        }}
+      >
+        {circle}
+        {primaryItem}
+        {secondaryItem}
+      </Stack>
+    );
+  };
+
+  const renderContent = (selected) => (
+    <Box sx={{ p: 0.5, flexGrow: 1, height: 1, width: 1 }}>
+      <Box
+        sx={{
+          width: 1,
+          height: 1,
+          opacity: 0.08,
+          borderRadius: 0.5,
+          bgcolor: "grey.500",
+          ...(selected && {
+            opacity: 0.24,
+            background: `linear-gradient(135deg, ${theme.palette.primary.light} 0%, ${theme.palette.primary.main} 100%)`,
+          }),
+        }}
+      />
+    </Box>
+  );
+
+  return (
+    <Stack direction="row" spacing={2}>
+      {options.map((option) => {
+        const selected = value === option;
+
+        return (
+          <ButtonBase
+            key={option}
+            onClick={() => onChange(option)}
+            sx={{
+              p: 0,
+              width: 1,
+              height: 56,
+              borderRadius: 1,
+              border: `solid 1px ${alpha(theme.palette.grey[500], 0.08)}`,
+              ...(selected && {
+                bgcolor: "background.paper",
+                boxShadow: `-24px 8px 24px -4px ${alpha(
+                  theme.palette.mode === "light"
+                    ? theme.palette.grey[500]
+                    : theme.palette.common.black,
+                  0.08
+                )}`,
+              }),
+              ...(option === "horizontal" && {
+                flexDirection: "column",
+              }),
+            }}
+          >
+            {renderNav(option, selected)}
+            {renderContent(selected)}
+          </ButtonBase>
+        );
+      })}
+    </Stack>
+  );
+}

package/src/components/settings/drawer/presets-options.jsx

@@ -0,0 +1,55 @@
+import Box from "@mui/material/Box";
+import ButtonBase from "@mui/material/ButtonBase";
+import React from "react";
+import { alpha } from "@mui/material/styles";
+import { presetOptions } from "../../../theme/options/presets";
+
+// ----------------------------------------------------------------------
+
+export default function PresetsOptions({ value, onChange }) {
+  return (
+    <Box
+      columnGap={2}
+      rowGap={1.5}
+      display="grid"
+      gridTemplateColumns="repeat(3, 1fr)"
+    >
+      {presetOptions.map((option) => {
+        const selected = value === option.name;
+
+        return (
+          <ButtonBase
+            key={option.name}
+            onClick={() => onChange(option.name)}
+            sx={{
+              height: 56,
+              borderRadius: 1,
+              border: (theme) =>
+                `solid 1px ${alpha(theme.palette.grey[500], 0.08)}`,
+              ...(selected && {
+                borderColor: "transparent",
+                bgcolor: alpha(option.value, 0.08),
+              }),
+            }}
+          >
+            <Box
+              sx={{
+                width: 12,
+                height: 12,
+                borderRadius: "50%",
+                bgcolor: option.value,
+                transition: (theme) =>
+                  theme.transitions.create(["transform"], {
+                    duration: theme.transitions.duration.shorter,
+                  }),
+                ...(selected && {
+                  transform: "scale(2)",
+                }),
+              }}
+            />
+          </ButtonBase>
+        );
+      })}
+    </Box>
+  );
+}

package/src/components/settings/drawer/settings-drawer.jsx

@@ -0,0 +1,191 @@
+import Badge from "@mui/material/Badge";
+import BaseOptions from "./base-option";
+import Divider from "@mui/material/Divider";
+import FullScreenOption from "./fullscreen-option";
+import IconButton from "@mui/material/IconButton";
+import Iconify from "../../Iconify";
+import LayoutOptions from "./layout-options";
+import PresetsOptions from "./presets-options";
+import React from "react";
+import Scrollbar from "../../scrollbar";
+import Stack from "@mui/material/Stack";
+import StretchOptions from "./stretch-options";
+import Tooltip from "@mui/material/Tooltip";
+import Typography from "@mui/material/Typography";
+import { paper } from "../../../theme/css";
+import { useSettingsContext } from "../context";
+import { useTheme } from "@mui/material/styles";
+
+import Drawer, { drawerClasses } from "@mui/material/Drawer";
+
+// ----------------------------------------------------------------------
+
+export default function SettingsDrawer() {
+  const theme = useTheme();
+
+  const settings = useSettingsContext();
+
+  const labelStyles = {
+    mb: 1.5,
+    color: "text.disabled",
+    fontWeight: "fontWeightSemiBold",
+  };
+
+  const renderHead = (
+    <Stack
+      direction="row"
+      alignItems="center"
+      justifyContent="space-between"
+      sx={{ py: 2, pr: 1, pl: 2.5 }}
+    >
+      <Typography variant="h6" sx={{ flexGrow: 1 }}>
+        Settings
+      </Typography>
+
+      <Tooltip title="Reset">
+        <IconButton onClick={settings.onReset}>
+          <Badge color="error" variant="dot" invisible={!settings.canReset}>
+            <Iconify icon="solar:restart-bold" />
+          </Badge>
+        </IconButton>
+      </Tooltip>
+
+      <IconButton onClick={settings.onClose}>
+        <Iconify icon="mingcute:close-line" />
+      </IconButton>
+    </Stack>
+  );
+  const renderMode = (
+    <div>
+      <Typography variant="caption" component="div" sx={{ ...labelStyles }}>
+        Mode
+      </Typography>
+
+      <BaseOptions
+        value={settings.themeMode}
+        onChange={(newValue) => settings.onUpdate("themeMode", newValue)}
+        options={["light", "dark"]}
+        icons={["sun", "moon"]}
+      />
+    </div>
+  );
+
+  const renderContrast = (
+    <div>
+      <Typography variant="caption" component="div" sx={{ ...labelStyles }}>
+        Contrast
+      </Typography>
+
+      <BaseOptions
+        value={settings.themeContrast}
+        onChange={(newValue) => settings.onUpdate("themeContrast", newValue)}
+        options={["default", "bold"]}
+        icons={["contrast", "contrast_bold"]}
+      />
+    </div>
+  );
+
+  const renderDirection = (
+    <div>
+      <Typography variant="caption" component="div" sx={{ ...labelStyles }}>
+        Direction
+      </Typography>
+
+      <BaseOptions
+        value={settings.themeDirection}
+        onChange={(newValue) => settings.onUpdate("themeDirection", newValue)}
+        options={["ltr", "rtl"]}
+        icons={["align_left", "align_right"]}
+      />
+    </div>
+  );
+
+  const renderLayout = (
+    <div>
+      <Typography variant="caption" component="div" sx={{ ...labelStyles }}>
+        Layout
+      </Typography>
+
+      <LayoutOptions
+        value={settings.themeLayout}
+        onChange={(newValue) => settings.onUpdate("themeLayout", newValue)}
+        options={["vertical", "horizontal", "mini"]}
+      />
+    </div>
+  );
+
+  const renderStretch = (
+    <div>
+      <Typography
+        variant="caption"
+        component="div"
+        sx={{
+          ...labelStyles,
+          display: "inline-flex",
+          alignItems: "center",
+        }}
+      >
+        Stretch
+        <Tooltip title="Only available at large resolutions > 1600px (xl)">
+          <Iconify icon="eva:info-outline" width={16} sx={{ ml: 0.5 }} />
+        </Tooltip>
+      </Typography>
+
+      <StretchOptions
+        value={settings.themeStretch}
+        onChange={() =>
+          settings.onUpdate("themeStretch", !settings.themeStretch)
+        }
+      />
+    </div>
+  );
+
+  const renderPresets = (
+    <div>
+      <Typography variant="caption" component="div" sx={{ ...labelStyles }}>
+        Presets
+      </Typography>
+
+      <PresetsOptions
+        value={settings.themeColorPresets}
+        onChange={(newValue) =>
+          settings.onUpdate("themeColorPresets", newValue)
+        }
+      />
+    </div>
+  );
+
+  return (
+    <Drawer
+      anchor="right"
+      open={settings.open}
+      onClose={settings.onClose}
+      slotProps={{
+        backdrop: { invisible: true },
+      }}
+      sx={{
+        [`& .${drawerClasses.paper}`]: {
+          ...paper({ theme, bgcolor: theme.palette.background.default }),
+          width: 280,
+        },
+      }}
+    >
+      {renderHead}
+
+      <Divider sx={{ borderStyle: "dashed" }} />
+
+      <Scrollbar>
+        <Stack spacing={3} sx={{ p: 3 }}>
+          {renderMode}
+          {renderContrast}
+          {renderDirection}
+          {renderLayout}
+          {renderStretch}
+          {renderPresets}
+        </Stack>
+      </Scrollbar>
+
+      <FullScreenOption />
+    </Drawer>
+  );
+}

package/src/components/settings/drawer/stretch-options.jsx

@@ -0,0 +1,69 @@
+import Box from "@mui/material/Box";
+import ButtonBase from "@mui/material/ButtonBase";
+import Iconify from "../../Iconify";
+import React from "react";
+import Stack from "@mui/material/Stack";
+import { alpha } from "@mui/material/styles";
+
+// ----------------------------------------------------------------------
+
+export default function StretchOptions({ value, onChange }) {
+  return (
+    <ButtonBase
+      onClick={onChange}
+      sx={{
+        width: 1,
+        height: 80,
+        borderRadius: 1,
+        color: "text.disabled",
+        border: (theme) => `solid 1px ${alpha(theme.palette.grey[500], 0.08)}`,
+        ...(value && {
+          bgcolor: "background.paper",
+          color: (theme) => theme.palette.primary.main,
+          boxShadow: (theme) =>
+            `-24px 8px 24px -4px ${alpha(
+              theme.palette.mode === "light"
+                ? theme.palette.grey[500]
+                : theme.palette.common.black,
+              0.08
+            )}`,
+        }),
+      }}
+    >
+      <Stack
+        direction="row"
+        alignItems="center"
+        justifyContent="space-between"
+        sx={{
+          width: 0.24,
+          transition: (theme) => theme.transitions.create(["width"]),
+          ...(value && {
+            width: 0.5,
+          }),
+        }}
+      >
+        <Iconify
+          icon={
+            value ? "eva:arrow-ios-back-fill" : "eva:arrow-ios-forward-fill"
+          }
+          sx={{
+            color: (theme) =>
+              `linear-gradient(135deg, ${theme.palette.primary.light} 0%, ${theme.palette.primary.main} 100%)`,
+          }}
+        />
+
+        <Box sx={{ flexGrow: 1, borderBottom: `dashed 1.5px currentcolor` }} />
+
+        <Iconify
+          icon={
+            value ? "eva:arrow-ios-forward-fill" : "eva:arrow-ios-back-fill"
+          }
+          sx={{
+            color: (theme) =>
+              `linear-gradient(135deg, ${theme.palette.primary.light} 0%, ${theme.palette.primary.main} 100%)`,
+          }}
+        />
+      </Stack>
+    </ButtonBase>
+  );
+}

package/src/components/settings/index.js

@@ -0,0 +1,3 @@
+export * from "./context";
+
+export { default as SettingsDrawer } from "./drawer";

package/src/components/svg-color/index.js

@@ -0,0 +1 @@
+export { default } from "./svg-color";