feat: add RangeCalendar sandbox

src/content/components/date-components/RangeCalendar/index.ts

@@ -1,7 +1,49 @@
+import dynamic from 'next/dynamic';
+import {Repos} from 'src/types/common';
+
 import {Component} from '../../types';
+import {getGithubUrl, getReadmeUrl, mappingOptions} from '../../utils';
+
+const getterOptions = {repoName: Repos.DateComponents, componentName: 'RangeCalendar'};
 
 export const rangeCalendarConfig: Component = {
     id: 'range-calendar',
     title: 'Range Calendar',
-    isComingSoon: true,
+    githubUrl: getGithubUrl(getterOptions),
+    content: {
+        readmeUrl: getReadmeUrl(getterOptions),
+    },
+    sandbox: {
+        component: dynamic(() =>
+            import('../examples/components/index').then((mod) => mod.RangeCalendarExample),
+        ),
+        props: {
+            size: {
+                type: 'radioButton',
+                values: mappingOptions(['m', 'l', 'xl']),
+                defaultValue: 'm',
+            },
+            mode: {
+                type: 'select',
+                values: mappingOptions(['days', 'months', 'quarters', 'years']),
+            },
+            disabled: {
+                type: 'switch',
+                defaultValue: false,
+            },
+            readOnly: {
+                type: 'switch',
+                defaultValue: false,
+            },
+            minValue: {
+                type: 'input',
+            },
+            maxValue: {
+                type: 'input',
+            },
+            focusedValue: {
+                type: 'input',
+            },
+        },
+    },
 };