86 lines
1.9 KiB
TypeScript
86 lines
1.9 KiB
TypeScript
import { Segmented, type SegmentedProps } from 'antd';
|
|
import React from 'react';
|
|
import styled from 'styled-components';
|
|
|
|
interface SegmentLineProps extends SegmentedProps {
|
|
height?: number;
|
|
}
|
|
|
|
const SegmentedQwrapper = styled.div<{ $height: number }>`
|
|
.ant-segmented.segment-line {
|
|
padding: 0;
|
|
background-color: transparent;
|
|
color: var(--color-white-tertiary);
|
|
border: none;
|
|
box-shadow: none;
|
|
height: ${(props) => props.$height}px;
|
|
display: flex;
|
|
align-items: center;
|
|
.ant-segmented-group {
|
|
gap: 16px;
|
|
height: 100%;
|
|
}
|
|
.ant-segmented-item:hover {
|
|
color: var(--color-white-secondary);
|
|
}
|
|
.ant-segmented-thumb {
|
|
height: 2px;
|
|
padding: 0px;
|
|
bottom: 0px;
|
|
top: unset;
|
|
background-color: var(--color-white-primary) !important;
|
|
}
|
|
.ant-segmented-item-label {
|
|
display: flex;
|
|
align-items: center;
|
|
padding: 0;
|
|
font-size: var(--font-size-small);
|
|
}
|
|
.ant-segmented-item {
|
|
background-color: transparent;
|
|
padding-bottom: 2px;
|
|
display: flex;
|
|
align-items: center;
|
|
&::after {
|
|
background-color: var(--color-white-primary) !important;
|
|
width: 100%;
|
|
height: 0px;
|
|
border-radius: 2px;
|
|
bottom: 0px;
|
|
top: unset;
|
|
}
|
|
}
|
|
.ant-segmented-item-selected {
|
|
background-color: transparent;
|
|
color: var(--color-white-primary);
|
|
&::after {
|
|
height: 2px;
|
|
}
|
|
}
|
|
}
|
|
`;
|
|
|
|
const SegmentLine: React.FC<SegmentLineProps> = (props) => {
|
|
const {
|
|
height = 32,
|
|
size = 'small',
|
|
options = [],
|
|
className = 'segment-line',
|
|
...rest
|
|
} = props;
|
|
return (
|
|
<SegmentedQwrapper $height={height}>
|
|
<Segmented
|
|
{...rest}
|
|
size={size}
|
|
options={options}
|
|
className={className}
|
|
/>
|
|
</SegmentedQwrapper>
|
|
);
|
|
};
|
|
|
|
SegmentLine.displayName = 'SegmentLine';
|
|
|
|
export default SegmentLine;
|