TODO: Slider

DONE: Segmented buttons

src/primitive-components/button-components/segmented-buttons/segmented-buttons.tsx

@@ -1,51 +1,33 @@
-import React, { forwardRef } from 'react';
-import {
-    SegmentedButton,
-    SegmentedButtonsProps,
-} from './segmented-buttons.types';
-import { string } from 'prop-types';
-import { ButtonLayout } from '../../components';
-import { ButtonLayoutProps } from '../button-layout/button-layout.types';
-import { IconWrapper } from '../../icon/icon-wrapper';
+'use client';
 
-export const SegmentButton = forwardRef<
-    HTMLButtonElement,
-    ButtonLayoutProps & SegmentedButton
->(({ centralRipple = false, iconPlace = 'left', icon, ...props }, ref) => {
-    const classes = `m3-button-segment ${props.className ?? ''}`.trimEnd();
-    return (
-        <ButtonLayout
-            {...props}
-            centralRipple={centralRipple}
-            className={classes}
-            ref={ref}
-        >
-            <IconWrapper icon={icon} iconPlace={iconPlace}>
-                <span className={'label-large'}>{props.children}</span>
-            </IconWrapper>
-            <span className={'m3 m3-button-segment-state-layer'} />
-        </ButtonLayout>
-    );
-});
-
-SegmentButton.propTypes = {
-    children: string,
-};
+import { SegmentButton } from './segment-button';
+import { SegmentedButtonsProps } from './segmented-buttons.types';
+import React, { cloneElement, forwardRef, ReactElement } from 'react';
 
 export const SegmentedButtons = forwardRef<
     HTMLDivElement,
     SegmentedButtonsProps
->(({ children, ...props }, ref) => {
+>(({ toggled = false, children, ...props }, ref) => {
     if (children.length <= 1) {
-        throw 'You must build segmented button with 2 or more buttton';
+        throw 'You must build segmented button with 2 or more button';
     }
 
+    const SegmentedButtons: Array<ReactElement> = children.map(
+        (Button: ReactElement, index: number) => {
+            return cloneElement(<SegmentButton />, {
+                ...Button.props,
+                toggled: toggled,
+                key: index,
+            });
+        },
+    );
+
     return (
         <div
             className={`m3 m3-segmented-buttons ${props.className ?? ''}`.trimEnd()}
             ref={ref}
         >
-            {children}
+            {SegmentedButtons}
         </div>
     );
 });