Mahyar Khanbolooki
30 lines
1006 B
TypeScript
30 lines
1006 B
TypeScript
'use client';
|
|
|
|
import { Star1 } from 'iconsax-react'
|
|
import React from 'react'
|
|
import { motion } from 'framer-motion'
|
|
|
|
type Props = {
|
|
percentage: string;
|
|
content: string;
|
|
className?: string;
|
|
}
|
|
|
|
function RateBar({ percentage, content, className = '' }: Props) {
|
|
return (
|
|
<div className={`flex items-center justify-center ${className}`}>
|
|
<span className='text-xs font-medium text-[#999999] me-3'>{percentage}%</span>
|
|
<span className='mb-1 me-3 relative w-[67px] h-1 bg-border rounded-full'>
|
|
<motion.span
|
|
animate={{ width: [0, `${percentage}%`] }}
|
|
className='absolute top-0 left-0 w-[10%] h-1 bg-primary dark:bg-foreground rounded-full'
|
|
>
|
|
</motion.span>
|
|
</span>
|
|
<Star1 className='fill-black dark:fill-foreground me-1 mb-1' size={12} />
|
|
<span className='text-xs font-medium'>{content}</span>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default RateBar |