diff --git a/.idea/workspace.xml b/.idea/workspace.xml
index 0922ad9..6910fa9 100644
--- a/.idea/workspace.xml
+++ b/.idea/workspace.xml
@@ -4,37 +4,10 @@
-
+
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
@@ -272,15 +245,7 @@
-
-
-
-
- 1719274243788
-
-
-
- 1719274243788
+
@@ -666,7 +631,15 @@
1720730102817
-
+
+
+ 1720913013183
+
+
+
+ 1720913013183
+
+
@@ -710,7 +683,6 @@
-
@@ -735,7 +707,8 @@
-
+
+
diff --git a/src/pages/list/rotate/index.tsx b/src/pages/list/rotate/index.tsx
index a61779f..f5a63dc 100644
--- a/src/pages/list/rotate/index.tsx
+++ b/src/pages/list/rotate/index.tsx
@@ -118,7 +118,7 @@ export default function Rotate() {
{rotationDirections.map(({ title, description, value }) => (
updateField('right', Boolean(value))}
+ onClick={() => updateField('right', value)}
title={title}
description={description}
checked={values.right === value}
diff --git a/src/pages/list/shuffle/index.tsx b/src/pages/list/shuffle/index.tsx
index 3e4f97a..c06daa5 100644
--- a/src/pages/list/shuffle/index.tsx
+++ b/src/pages/list/shuffle/index.tsx
@@ -1,11 +1,125 @@
import { Box } from '@mui/material';
-import React from 'react';
+import React, { useState } from 'react';
+import ToolTextInput from '../../../components/input/ToolTextInput';
+import ToolTextResult from '../../../components/result/ToolTextResult';
import * as Yup from 'yup';
+import ToolOptions from '../../../components/options/ToolOptions';
+import { shuffleList, SplitOperatorType } from './service';
+import ToolInputAndResult from '../../../components/ToolInputAndResult';
+import SimpleRadio from '../../../components/options/SimpleRadio';
+import TextFieldWithDesc from '../../../components/options/TextFieldWithDesc';
+import { formatNumber } from '../../../utils/number';
+import { isNumber } from '../../../utils/string';
+
+const initialValues = {
+ splitOperatorType: 'symbol' as SplitOperatorType,
+ splitSeparator: ',',
+ joinSeparator: ',',
+ length: ''
+};
+const splitOperators: {
+ title: string;
+ description: string;
+ type: SplitOperatorType;
+}[] = [
+ {
+ title: 'Use a Symbol for Splitting',
+ description: 'Delimit input list items with a character.',
+ type: 'symbol'
+ },
+ {
+ title: 'Use a Regex for Splitting',
+ type: 'regex',
+ description: 'Delimit input list items with a regular expression.'
+ }
+];
-const initialValues = {};
-const validationSchema = Yup.object({
- // splitSeparator: Yup.string().required('The separator is required')
-});
export default function Shuffle() {
- return Lorem ipsum;
+ const [input, setInput] = useState('');
+ const [result, setResult] = useState('');
+ const compute = (optionsValues: typeof initialValues, input: any) => {
+ const { splitOperatorType, splitSeparator, joinSeparator, length } =
+ optionsValues;
+
+ setResult(
+ shuffleList(
+ splitOperatorType,
+ input,
+ splitSeparator,
+ joinSeparator,
+ isNumber(length) ? Number(length) : undefined
+ )
+ );
+ };
+ const validationSchema = Yup.object({
+ // splitSeparator: Yup.string().required('The separator is required')
+ });
+
+ return (
+
+
+ }
+ result={}
+ />
+ [
+ {
+ title: 'Input list separator',
+ component: (
+
+ {splitOperators.map(({ title, description, type }) => (
+ updateField('splitOperatorType', type)}
+ title={title}
+ description={description}
+ checked={values.splitOperatorType === type}
+ />
+ ))}
+ updateField('splitSeparator', val)}
+ />
+
+ )
+ },
+ {
+ title: 'Shuffled List Length',
+ component: (
+
+ updateField('length', val)}
+ />
+
+ )
+ },
+ {
+ title: 'Shuffled List Separator',
+ component: (
+
+ updateField('joinSeparator', value)}
+ description={'Use this separator in the randomized list.'}
+ />
+
+ )
+ }
+ ]}
+ initialValues={initialValues}
+ input={input}
+ validationSchema={validationSchema}
+ />
+
+ );
}