feat: use selectable card component

gravity-ui · Jun 28, 2024 · 3aa5055 · 3aa5055
1 parent 0635fba
commit 3aa5055
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 51 deletions.
diff --git a/src/components/Themes/ui/BorderRadiusTab/BorderCard/BorderCard.scss b/src/components/Themes/ui/BorderRadiusTab/BorderCard/BorderCard.scss
diff --git a/src/components/Themes/ui/BorderRadiusTab/BorderCard/BorderCard.tsx b/src/components/Themes/ui/BorderRadiusTab/BorderCard/BorderCard.tsx
@@ -1,28 +1,15 @@
-import {CircleCheckFill} from '@gravity-ui/icons';
-import {Card, Text} from '@gravity-ui/uikit';
 import React, {useCallback} from 'react';
 import {useTranslation} from 'react-i18next';
+import {SelectableCard} from 'src/components/SelectableCard/SelectableCard';
 import {RADIUS_PRESETS} from 'src/components/Themes/lib/constants';
 import {RadiusPresetName} from 'src/components/Themes/lib/types';
 
-import {block} from '../../../../../utils';
-
-import './BorderCard.scss';
-
-const b = block('border-card');
-
 export type BorderCardProps = {
     preset: RadiusPresetName;
     selected: boolean;
     onClick: (preset: RadiusPresetName) => void;
 };
 
-const FakeButton = ({preset, text}: {preset: RadiusPresetName; text: string}) => (
-    <div className={b('fake-button')} style={{borderRadius: RADIUS_PRESETS[preset]?.m + 'px'}}>
-        <Text color="inverted-primary">{text}</Text>
-    </div>
-);
-
 export const BorderCard = ({selected, preset, onClick}: BorderCardProps) => {
     const {t} = useTranslation('themes');
 
@@ -33,13 +20,12 @@ export const BorderCard = ({selected, preset, onClick}: BorderCardProps) => {
     const displayName = t(preset);
 
     return (
-        <Card className={b()} type="selection" selected={selected} onClick={handleClick}>
-            {preset === RadiusPresetName.Custom ? (
-                <Text variant="body-2">{displayName}</Text>
-            ) : (
-                <FakeButton preset={preset} text={displayName} />
-            )}
-            {selected && <CircleCheckFill className={b('icon')} />}
-        </Card>
+        <SelectableCard
+            text={displayName}
+            onClick={handleClick}
+            selected={selected}
+            pureText={preset === RadiusPresetName.Custom}
+            contentStyle={{borderRadius: RADIUS_PRESETS[preset]?.m + 'px'}}
+        />
     );
 };