cesnimda
34 lines
1.2 KiB
React
34 lines
1.2 KiB
React
'use client';
|
|
import PropTypes from 'prop-types';
|
|
|
|
import { useId } from 'react';
|
|
|
|
// @mui
|
|
import { useTheme } from '@mui/material/styles';
|
|
|
|
/*************************** ICON - CURVE ***************************/
|
|
|
|
export default function Curve({ size = 24, color }) {
|
|
const theme = useTheme();
|
|
const uniqueId = useId(); // Generate a unique ID
|
|
|
|
return (
|
|
<svg width={size} height={size} viewBox="0 0 52 98" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
<path
|
|
d="M0.499991 1.18871V1.18871C14.03 1.19143 24.9967 12.1604 24.9967 25.6904L24.9967 52.8657C24.9967 69.8957 33.6648 85.7547 47.9988 94.9502L51.4973 97.1946"
|
|
stroke={`url(#${uniqueId})`}
|
|
strokeLinecap="round"
|
|
strokeDasharray="5 5"
|
|
/>
|
|
<defs>
|
|
<linearGradient id={uniqueId} x1="16.3364" y1="-26.7751" x2="105.757" y2="67.5319" gradientUnits="userSpaceOnUse">
|
|
<stop stopColor={color || theme.vars.palette.primary.main} stopOpacity="0" />
|
|
<stop offset="1" stopColor={color || theme.vars.palette.primary.main} />
|
|
</linearGradient>
|
|
</defs>
|
|
</svg>
|
|
);
|
|
}
|
|
|
|
Curve.propTypes = { size: PropTypes.number, color: PropTypes.any };
|