@capytale/meta-player 0.1.2 → 0.1.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@capytale/meta-player",
-  "version": "0.1.2",
+  "version": "0.1.4",
   "type": "module",
   "scripts": {
     "dev": "vite",
@@ -14,12 +14,12 @@
     "type-check": "tsc --noEmit"
   },
   "dependencies": {
-    "@capytale/activity.js": "^3.0.8",
+    "@capytale/activity.js": "^3.1.0",
     "@capytale/capytale-rich-text-editor": "^0.4.2",
     "@reduxjs/toolkit": "^2.0.1",
     "@uidotdev/usehooks": "^2.4.1",
     "primeicons": "^7.0.0",
-    "primereact": "^10.6.3",
+    "primereact": "^10.8.3",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-html-props": "^2.0.9",
@@ -42,7 +42,7 @@
     "prettier": "^3.2.1",
     "sass": "^1.75.0",
     "typescript": "^5.3.3",
-    "vite": "^5.0.11",
+    "vite": "^5.4.6",
     "vitest": "^1.2.0"
   }
 }

package/src/MetaPlayer.tsx

@@ -10,7 +10,7 @@ import { store } from "./app/store";
 import "./index.css";
 import ThemeSwitcher from "./features/theming/ThemeSwitcher";
 import { ActivityJSProvider } from "./features/activityJS/ActivityJSProvider";
-import { LoadOptions } from "./features/activityJS/hooks";
+import { LoadOptions } from "./features/activityJS/internal-hooks";
 import { ErrorBoundary } from "./utils/ErrorBoundary";
 import Saver from "./features/activityJS/Saver";
 

package/src/features/activityJS/ActivityJSProvider.tsx

@@ -12,7 +12,7 @@ import {
   ActivitySessionLoaderReturnValue,
   LoadOptions,
   useActivitySessionLoader,
-} from "./hooks";
+} from "./internal-hooks";
 import { getIdFromUrl } from "../../utils/activity";
 import { useAppDispatch } from "../../app/hooks";
 import ActivitySession from "@capytale/activity.js/activity/activitySession";

package/src/features/activityJS/BeforeResetAction.tsx

@@ -0,0 +1,23 @@
+import { FC, useEffect } from "react";
+import {
+  SaveCallback,
+  addBeforeReset,
+  removeBeforeReset,
+} from "./saverSlice";
+import { useAppDispatch } from "../../app/hooks";
+
+type BeforeResetActionProps = SaveCallback;
+
+const BeforeResetAction: FC<BeforeResetActionProps> = (props) => {
+  const dispatch = useAppDispatch();
+  useEffect(() => {
+    dispatch(addBeforeReset(props));
+    return () => {
+      // Remove the callback when the component is unmounted
+      dispatch(removeBeforeReset(props.name));
+    };
+  }, [props]);
+  return null;
+};
+
+export default BeforeResetAction;

package/src/features/activityJS/hooks.ts

@@ -1,93 +1,61 @@
-import { useEffect, useState, useRef } from "react";
-
-import { autoLoad } from "@capytale/activity.js";
-
-import type ActivitySession from "@capytale/activity.js/activity/activitySession/uni";
-
-import type { ActivityBunchOptions as LoadOptions } from "@capytale/activity.js/activity/activityBunch/uni/backend";
-
-export type { LoadOptions };
-
-export type ActivitySessionLoaderReturnValue = {
-  state: "loading" | "loaded" | "error";
-  activitySession: ActivitySession | null;
-  error?: any;
+import { useAppDispatch, useAppSelector } from "../../app/hooks";
+import {
+  selectMode,
+  selectWorkflow,
+  setSaveState,
+} from "../activityData/activityDataSlice";
+import { useActivityJS } from "./ActivityJSProvider";
+import { selectBeforeReset } from "./saverSlice";
+
+type UseResetProps = {
+  onError: (errorMessage: string) => void;
 };
 
-/**
- * Un hook pour utiliser activity.js
- * Charge une activité de façon réactive.
- *
- * @param id id de l'activité à charger
- * @param loadOptions les options de chargement
- * @param callback une callback appelée avec l'activité chargée
- * @returns un objet contenant l'état de chargement de l'activité et l'activité dès qu'elle est chargée
- */
-
-export function useActivitySessionLoader(
-  id: number,
-  loadOptions?: LoadOptions,
-  callback?: (activitySession: ActivitySession) => void,
-): ActivitySessionLoaderReturnValue {
-  const callbackW = useHandlerWrapper(callback);
-  const [state, setState] = useState<ActivitySessionLoaderReturnValue>({
-    state: "loading",
-    activitySession: null,
-  });
-  useEffect(() => {
-    let cancelled = false;
-    autoLoad(loadOptions)
-      .then((data) => {
-        if (cancelled) return;
-        callbackW(data);
-        setState({
-          state: "loaded",
-          activitySession: data,
-        });
-        (window as any).capy = data;
-      })
-      .catch((error) => {
-        if (cancelled) return;
-        setState({
-          state: "error",
-          activitySession: null,
-          error,
-        });
-      });
-    return () => {
-      cancelled = true;
-      setState({
-        state: "loading",
-        activitySession: null,
-      });
-    };
-  }, [id, loadOptions?.binaryDataType, loadOptions?.readOnly]);
-  return state;
-}
-
-/**
- * Si un handler est passé en props à un composant, il peut changer. Il n'y a pas trop de raison mais
- * rien ne l'interdit.
- * Si un useEffect invoque ce handler, il faudrait que le handler figure dans les dépendances du useEffect.
- * Du coup, si le handler change, le useEffect est ré-exécuté.
- * Ce hook crée un wrapper immuable autour du handler passé en props. Ce wrapper ne change jamais et n'a donc
- * pas besoin de figurer dans les dépendances du useEffect.
- *
- * @param handler
- */
-export function useHandlerWrapper<H extends () => any>(
-  handler?: H,
-): () => ReturnType<H> | void;
-export function useHandlerWrapper<H extends (...args: any[]) => any>(
-  handler?: H,
-): (...p: Parameters<H>) => ReturnType<H> | void;
-export function useHandlerWrapper<H extends (...args: any[]) => any>(
-  handler?: H,
-): (...p: Parameters<H>) => ReturnType<H> | void {
-  const handlerRef = useRef<H>();
-  handlerRef.current = handler;
-  return useRef((...p: Parameters<H>) => {
-    if (null == handlerRef.current) return;
-    return handlerRef.current(...p);
-  }).current;
-}
+export const useReset = (props: UseResetProps) => {
+  const dispatch = useAppDispatch();
+  const beforeReset = useAppSelector(selectBeforeReset);
+  const activityJs = useActivityJS();
+  const mode = useAppSelector(selectMode);
+  const workflow = useAppSelector(selectWorkflow);
+  if (mode !== "assignment" || workflow !== "current") {
+    return null;
+  }
+  return async () => {
+    if (!activityJs.activitySession) {
+      throw new Error("No activity session to reset");
+    }
+    for (const callback of Object.values(beforeReset)) {
+      try {
+        const v = callback();
+        if (v instanceof Promise) {
+          await v;
+        }
+      } catch (e) {
+        console.error("Error in beforeReset callback", e);
+        props.onError((e as any).toString());
+        return;
+      }
+    }
+    try {
+      dispatch(setSaveState("saving"));
+      const ab = activityJs.activitySession.activityBunch;
+      // @ts-expect-error
+      ab.assignmentNode.content.value = null;
+      // @ts-expect-error
+      ab.assignmentNode.binaryData.value = null;
+      try {
+        const saveData = await ab.save();
+        console.log("Save return data", saveData);
+        location.reload();
+      } catch (e) {
+        console.error("Error in reset", e);
+        props.onError((e as any).toString());
+        return;
+      }
+      dispatch(setSaveState("idle"));
+    } catch (e) {
+      console.error("Error in reset process", e);
+      props.onError((e as any).toString());
+    }
+  };
+};

package/src/features/activityJS/internal-hooks.ts

@@ -0,0 +1,93 @@
+import { useEffect, useState, useRef } from "react";
+
+import { autoLoad } from "@capytale/activity.js";
+
+import type ActivitySession from "@capytale/activity.js/activity/activitySession/uni";
+
+import type { ActivityBunchOptions as LoadOptions } from "@capytale/activity.js/activity/activityBunch/uni/backend";
+
+export type { LoadOptions };
+
+export type ActivitySessionLoaderReturnValue = {
+  state: "loading" | "loaded" | "error";
+  activitySession: ActivitySession | null;
+  error?: any;
+};
+
+/**
+ * Un hook pour utiliser activity.js
+ * Charge une activité de façon réactive.
+ *
+ * @param id id de l'activité à charger
+ * @param loadOptions les options de chargement
+ * @param callback une callback appelée avec l'activité chargée
+ * @returns un objet contenant l'état de chargement de l'activité et l'activité dès qu'elle est chargée
+ */
+
+export function useActivitySessionLoader(
+  id: number,
+  loadOptions?: LoadOptions,
+  callback?: (activitySession: ActivitySession) => void,
+): ActivitySessionLoaderReturnValue {
+  const callbackW = useHandlerWrapper(callback);
+  const [state, setState] = useState<ActivitySessionLoaderReturnValue>({
+    state: "loading",
+    activitySession: null,
+  });
+  useEffect(() => {
+    let cancelled = false;
+    autoLoad(loadOptions)
+      .then((data) => {
+        if (cancelled) return;
+        callbackW(data);
+        setState({
+          state: "loaded",
+          activitySession: data,
+        });
+        (window as any).capy = data;
+      })
+      .catch((error) => {
+        if (cancelled) return;
+        setState({
+          state: "error",
+          activitySession: null,
+          error,
+        });
+      });
+    return () => {
+      cancelled = true;
+      setState({
+        state: "loading",
+        activitySession: null,
+      });
+    };
+  }, [id, loadOptions?.binaryDataType, loadOptions?.readOnly]);
+  return state;
+}
+
+/**
+ * Si un handler est passé en props à un composant, il peut changer. Il n'y a pas trop de raison mais
+ * rien ne l'interdit.
+ * Si un useEffect invoque ce handler, il faudrait que le handler figure dans les dépendances du useEffect.
+ * Du coup, si le handler change, le useEffect est ré-exécuté.
+ * Ce hook crée un wrapper immuable autour du handler passé en props. Ce wrapper ne change jamais et n'a donc
+ * pas besoin de figurer dans les dépendances du useEffect.
+ *
+ * @param handler
+ */
+export function useHandlerWrapper<H extends () => any>(
+  handler?: H,
+): () => ReturnType<H> | void;
+export function useHandlerWrapper<H extends (...args: any[]) => any>(
+  handler?: H,
+): (...p: Parameters<H>) => ReturnType<H> | void;
+export function useHandlerWrapper<H extends (...args: any[]) => any>(
+  handler?: H,
+): (...p: Parameters<H>) => ReturnType<H> | void {
+  const handlerRef = useRef<H>();
+  handlerRef.current = handler;
+  return useRef((...p: Parameters<H>) => {
+    if (null == handlerRef.current) return;
+    return handlerRef.current(...p);
+  }).current;
+}

package/src/features/activityJS/saverSlice.ts

@@ -11,11 +11,13 @@ export type SaveCallback = {
 export interface SaverState {
   beforeSave: { [key: string]: CallbackType };
   afterSave: { [key: string]: CallbackType };
+  beforeReset: { [key: string]: CallbackType };
 }
 
 const initialState: SaverState = {
   beforeSave: {},
   afterSave: {},
+  beforeReset: {},
 };
 
 // If you are not using async thunks you can use the standalone `createSlice`.
@@ -36,23 +38,42 @@ export const saverSlice = createAppSlice({
         state.afterSave[action.payload.name] = action.payload.callback;
       },
     ),
+    addBeforeReset: create.reducer(
+      (state, action: PayloadAction<SaveCallback>) => {
+        state.beforeReset[action.payload.name] = action.payload.callback;
+      },
+    ),
     removeBeforeSave: create.reducer((state, action: PayloadAction<string>) => {
       delete state.beforeSave[action.payload];
     }),
     removeAfterSave: create.reducer((state, action: PayloadAction<string>) => {
       delete state.afterSave[action.payload];
     }),
+    removeBeforeReset: create.reducer(
+      (state, action: PayloadAction<string>) => {
+        delete state.beforeReset[action.payload];
+      },
+    ),
   }),
   // You can define your selectors here. These selectors receive the slice
   // state as their first argument.
   selectors: {
     selectBeforeSave: (saver) => saver.beforeSave,
     selectAfterSave: (saver) => saver.afterSave,
+    selectBeforeReset: (saver) => saver.beforeReset,
   },
 });
 
 // Action creators are generated for each case reducer function.
-export const { addBeforeSave, removeBeforeSave, addAfterSave, removeAfterSave } = saverSlice.actions;
+export const {
+  addBeforeSave,
+  removeBeforeSave,
+  addAfterSave,
+  removeAfterSave,
+  addBeforeReset,
+  removeBeforeReset,
+} = saverSlice.actions;
 
 // Selectors returned by `slice.selectors` take the root state as their first argument.
-export const { selectBeforeSave, selectAfterSave } = saverSlice.selectors;
+export const { selectBeforeSave, selectAfterSave, selectBeforeReset } =
+  saverSlice.selectors;

package/src/features/navbar/ActivityMenu.tsx

@@ -9,6 +9,7 @@ import ActivityQuickActions from "./ActivityQuickActions";
 import useFullscreen from "../../utils/useFullscreen";
 import { useActivityJS } from "../activityJS/ActivityJSProvider";
 import { Dialog } from "primereact/dialog";
+import capytaleUI from "@capytale/activity.js/backend/capytale/ui";
 
 const ActivityMenu: React.FC = memo(() => {
   const [settingsSidebarVisible, setSettingsSidebarVisible] = useState(false);
@@ -21,6 +22,18 @@ const ActivityMenu: React.FC = memo(() => {
   return (
     <div className={styles.activityMenu}>
       <ActivityQuickActions />
+      <Button
+        severity="secondary"
+        size="small"
+        icon="pi pi-cog" // pi-ellipsis-v
+        outlined
+        tooltip="Paramètres"
+        tooltipOptions={{
+          position: "left",
+          showDelay: settings.TOOLTIP_SHOW_DELAY,
+        }}
+        onClick={() => setSettingsSidebarVisible(true)}
+      />
       <Button
         severity="secondary"
         size="small"
@@ -36,14 +49,14 @@ const ActivityMenu: React.FC = memo(() => {
       <Button
         severity="secondary"
         size="small"
-        icon="pi pi-cog" // pi-ellipsis-v
-        outlined
-        tooltip="Paramètres"
+        icon={"pi pi-times"}
+        text
+        tooltip="Retour à la liste des activités"
         tooltipOptions={{
           position: "left",
           showDelay: settings.TOOLTIP_SHOW_DELAY,
         }}
-        onClick={() => setSettingsSidebarVisible(true)}
+        onClick={() => capytaleUI.closeCapytaleIframe()}
       />
       <Sidebar
         header="Paramètres"

package/src/features/navbar/CapytaleMenu.tsx

@@ -2,6 +2,7 @@ import { Button } from "primereact/button";
 import { SplitButton } from "primereact/splitbutton";
 import { ConfirmDialog, confirmDialog } from "primereact/confirmdialog";
 import { Toast } from "primereact/toast";
+import { OverlayPanel } from "primereact/overlaypanel";
 
 import styles from "./style.module.scss";
 import { useMemo, useRef } from "react";
@@ -21,6 +22,9 @@ import {
 import { copyToClipboard } from "../../utils/clipboard";
 import settings from "../../settings";
 import { wf } from "@capytale/activity.js/activity/field/workflow";
+import capytaleUI from "@capytale/activity.js/backend/capytale/ui";
+import ButtonDoubleIcon from "../../utils/ButtonDoubleIcon";
+import CardSelector from "../../utils/CardSelector";
 
 const CapytaleMenu: React.FC = () => {
   const dispatch = useAppDispatch();
@@ -39,6 +43,7 @@ const CapytaleMenu: React.FC = () => {
     () => windowsSize.width && windowsSize.width < ML,
     [windowsSize.width],
   );
+  const isInIframe = useMemo(() => capytaleUI.isInCapytaletIframe(), []);
   const toast = useRef<Toast>(null);
   const changeWorkflow = (value: wf) => {
     dispatch(setWorkflow(value));
@@ -56,10 +61,25 @@ const CapytaleMenu: React.FC = () => {
       accept: () => changeWorkflow("finished"),
     });
   };
+  const overlayPanelWorkflow = useRef<OverlayPanel>(null);
   return (
     <>
       <Toast ref={toast} position="bottom-right" />
       <div className={styles.capytaleMenu}>
+        {isInIframe && (
+          <Button
+            label="Retour"
+            icon="pi pi-chevron-left"
+            size="small"
+            outlined
+            onClick={() => capytaleUI.closeCapytaleIframe()}
+            tooltip="Retour à la liste des activités"
+            tooltipOptions={{
+              position: "right",
+              showDelay: settings.TOOLTIP_SHOW_DELAY,
+            }}
+          />
+        )}
         {showSaveButton && (
           <Button
             label={isQuiteSmall ? undefined : "Enregistrer"}
@@ -144,60 +164,64 @@ const CapytaleMenu: React.FC = () => {
           />
         )}
         {mode === "review" && (
-          <SplitButton
-            label={
-              workflow === "current"
-                ? "En cours"
-                : workflow === "finished"
-                  ? "Rendue"
-                  : "Corrigée"
-            }
-            severity="secondary"
-            size="small"
-            icon={
-              workflow === "current"
-                ? "pi pi-pencil"
-                : workflow === "finished"
-                  ? "pi pi-envelope"
-                  : "pi pi-check-square"
-            }
-            outlined
-            model={[
-              ...(workflow === "current"
-                ? []
-                : [
-                    {
-                      label: "Réautoriser la modification",
-                      icon: "pi pi-pencil",
-                      command: () => {
-                        changeWorkflow("current");
-                      },
-                    },
-                  ]),
-              ...(workflow === "finished"
-                ? []
-                : [
-                    {
-                      label: "Marquer comme rendue",
-                      icon: "pi pi-envelope",
-                      command: () => {
-                        changeWorkflow("finished");
-                      },
-                    },
-                  ]),
-              ...(workflow === "corrected"
-                ? []
-                : [
-                    {
-                      label: "Marquer comme corrigée",
-                      icon: "pi pi-check-square",
-                      command: () => {
-                        changeWorkflow("corrected");
-                      },
-                    },
-                  ]),
-            ]}
-          />
+          <div>
+            <ButtonDoubleIcon
+              severity="secondary"
+              size="small"
+              outlined
+              onClick={(e) => {
+                overlayPanelWorkflow.current!.toggle(e);
+              }}
+              label={
+                workflow === "current"
+                  ? "En cours"
+                  : workflow === "finished"
+                    ? "Rendue"
+                    : "Corrigée"
+              }
+              leftIcon={
+                "pi " +
+                (workflow === "current"
+                  ? "pi pi-pencil"
+                  : workflow === "finished"
+                    ? "pi pi-envelope"
+                    : "pi pi-check-square")
+              }
+              rightIcon="pi pi-angle-down"
+            />
+            <OverlayPanel ref={overlayPanelWorkflow}>
+              <h3 className={styles.overlayPanelWorkflowTitle}>
+                État de la copie
+              </h3>
+              <CardSelector
+                selected={workflow}
+                onChange={(option: wf) => {
+                  changeWorkflow(option);
+
+                  overlayPanelWorkflow.current!.hide();
+                }}
+                options={[
+                  {
+                    value: "current",
+                    title: "En cours",
+                    description:
+                      "L'élève peut modifier sa copie à tout moment.",
+                  },
+                  {
+                    value: "finished",
+                    title: "Rendue",
+                    description: "L'élève ne peut plus modifier sa copie.",
+                  },
+                  {
+                    value: "corrected",
+                    title: "Corrigée",
+                    description:
+                      "L'élève ne peut plus modifier sa copie et a reçu une correction.",
+                  },
+                ]}
+              />
+            </OverlayPanel>
+          </div>
         )}
         <ConfirmDialog />
       </div>

package/src/features/navbar/SidebarContent.tsx

@@ -21,7 +21,9 @@ import {
 } from "../activityData/activityDataSlice";
 import { ActivitySettingsDisplay } from "../activitySettings";
 import { Button } from "primereact/button";
+import { ConfirmPopup, confirmPopup } from "primereact/confirmpopup";
 import settings from "../../settings";
+import { useReset } from "../activityJS/hooks";
 
 type SidebarContentProps = {
   showHelp?: () => void;
@@ -33,11 +35,12 @@ const SidebarContent: FC<SidebarContentProps> = (props) => {
   const orientation = useAppSelector(selectOrientation);
   const themeName = useAppSelector(selectThemeNameOrAuto);
   const sidebarActions = useAppSelector(selectSidebarActions);
+  const reset = useReset({ onError: console.error });
   const dispatch = useAppDispatch();
   return (
     <>
-      {props.showHelp && (
-        <div className={styles.sidebarCapytaleActions}>
+      <div className={styles.sidebarCapytaleActions}>
+        {props.showHelp && (
           <Button
             severity="secondary"
             size="small"
@@ -53,8 +56,38 @@ const SidebarContent: FC<SidebarContentProps> = (props) => {
               showDelay: settings.TOOLTIP_SHOW_DELAY,
             }}
           />
-        </div>
-      )}
+        )}
+        {reset && (
+          <>
+            <ConfirmPopup />
+            <Button
+              severity="secondary"
+              size="small"
+              icon={"pi pi-undo"}
+              onClick={(event) => {
+                confirmPopup({
+                  target: event.currentTarget,
+                  message:
+                    "Toutes vos modifications seront perdues. Continuer ?",
+                  icon: "pi pi-exclamation-triangle",
+                  defaultFocus: "reject",
+                  acceptClassName: "p-button-danger",
+                  accept: reset,
+                  acceptLabel: "Oui",
+                  rejectLabel: "Non",
+                });
+              }}
+              outlined
+              label="Réinitialiser l'activité"
+              tooltip="Revenir à la version de l'enseignant"
+              tooltipOptions={{
+                position: "left",
+                showDelay: settings.TOOLTIP_SHOW_DELAY,
+              }}
+            />
+          </>
+        )}
+      </div>
       {sidebarActions.length > 0 && (
         <Fieldset
           legend="Actions"

package/src/features/navbar/index.tsx

@@ -7,6 +7,7 @@ import styles from "./style.module.scss";
 import { useMemo } from "react";
 import { useAppSelector } from "../../app/hooks";
 import { selectReturnUrl } from "../activityData/activityDataSlice";
+import capytaleUI from "@capytale/activity.js/backend/capytale/ui";
 
 const Navbar: React.FC = () => {
   const returnUrl = useAppSelector(selectReturnUrl);
@@ -15,12 +16,13 @@ const Navbar: React.FC = () => {
     () => windowsSize.width && windowsSize.width < MD,
     [windowsSize.width],
   );
+  const isInIframe = useMemo(() => capytaleUI.isInCapytaletIframe(), []);
   const logoText = isSmall ? "C" : "CAPYTALE";
   return (
     <div className={styles.navbar}>
       <div className={styles.navbarContainer}>
         <div className={styles.navbarLogo}>
-          <a href={returnUrl}>{logoText}</a>
+          {!isInIframe && <a href={returnUrl}>{logoText}</a>}
         </div>
         <CapytaleMenu />
         <ActivityInfo />

package/src/features/navbar/style.module.scss

@@ -147,7 +147,14 @@
 
 .sidebarCapytaleActions {
   margin-bottom: 8px;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
   & > button {
     width: 100%;
   }
 }
+
+.overlayPanelWorkflowTitle {
+  margin-top: 0;
+}

package/src/utils/ButtonDoubleIcon.tsx

@@ -0,0 +1,35 @@
+import { Button, ButtonProps } from "primereact/button";
+import React from "react";
+
+type ButtonDoubleIconProps = Exclude<
+  ButtonProps,
+  "icon" | "children" | "iconPos"
+> & {
+  leftIcon: string;
+  rightIcon: string;
+};
+
+const ButtonDoubleIcon: React.FC<ButtonDoubleIconProps> = function ({
+  label,
+  leftIcon,
+  rightIcon,
+  ...props
+}) {
+  return (
+    <Button {...props}>
+      <span
+        className={"p-button-icon p-c p-button-icon-left " + leftIcon}
+        data-pc-section="icon"
+      ></span>
+      <span className="p-button-label p-c" data-pc-section="label">
+        {label}
+      </span>
+      <span
+        className={"p-button-icon p-c p-button-icon-right " + rightIcon}
+        data-pc-section="icon"
+      ></span>
+    </Button>
+  );
+};
+
+export default ButtonDoubleIcon;

package/src/utils/CardSelector.tsx

@@ -0,0 +1,39 @@
+import { RadioButton } from "primereact/radiobutton";
+import styles from "./style.module.scss";
+
+type CardSelectorProps<ValueType> = {
+  options: { title: string; description: string; value: ValueType }[];
+  selected?: ValueType | null;
+  onChange: (value: ValueType) => void | Promise<void>;
+};
+const CardSelector = function <ValueType>(props: CardSelectorProps<ValueType>) {
+  return (
+    <>
+      <div className={styles.cardSelector}>
+        {props.options.map((option) => (
+          <div
+            className={styles.cardSelectorOption}
+            data-selected={props.selected === option.value}
+            onClick={() => {
+              props.onChange(option.value);
+            }}
+          >
+            <div className={styles.cardSelectorOptionRadio}>
+              <RadioButton checked={props.selected === option.value} />
+            </div>
+            <div className={styles.cardSelectorOptionContent}>
+              <div className={styles.cardSelectorOptionTitle}>
+                {option.title}
+              </div>
+              <div className={styles.cardSelectorOptionDescription}>
+                {option.description}
+              </div>
+            </div>
+          </div>
+        ))}
+      </div>
+    </>
+  );
+};
+
+export default CardSelector;

package/src/utils/style.module.scss

@@ -0,0 +1,46 @@
+.cardSelector {
+  display: flex;
+  flex-direction: column;
+  gap: 1.25rem;
+  & :global(.p-card-title) {
+    font-size: 1.2rem;
+  }
+
+  & :global(.p-card-content) {
+    padding: 0.5rem 0;
+  }
+
+  & p {
+    margin: 0;
+  }
+}
+
+.cardSelectorOption {
+  padding: 1.25rem;
+  display: flex;
+  gap: 1.25rem;
+  background-color: var(--surface-100);
+  box-shadow: none;
+  border: 1px solid var(--surface-300);
+  border-radius: 6px;
+  cursor: pointer;
+  transition: background-color 0.2s;
+  &[data-selected="true"] {
+    background-color: var(--surface-0);
+    border-color: var(--primary-color);
+  }
+  &:hover {
+    background-color: var(--surface-0);
+  }
+}
+
+.cardSelectorOptionRadio {
+  display: flex;
+  align-items: center;
+}
+
+.cardSelectorOptionTitle {
+  font-size: 1.2rem;
+  font-weight: 700;
+  margin-bottom: 0.5rem;
+}