add: aboutus second tab

2025-07-16 01:12:17 +03:30
parent 16f1173f80
commit 1c4b791047
3 changed files with 136 additions and 88 deletions
@@ -0,0 +1,41 @@
+import { Star1 } from 'iconsax-react'
+import React from 'react'
+
+type Props = {
+    user: string;
+    rating: number;
+    date: string;
+    text: string;
+    tags: Array<string>;
+    className?: string;
+}
+
+function Comment({ user, rating, date, text, tags, className = '' }: Props) {
+    return (
+        <div className={className}>
+            <div className="flex items-center justify-start">
+                <span className="rounded-sm bg-primary h-5 mb-1 w-13 flex items-center justify-center gap-1">
+                    <Star1 className='fill-white mb-0.5' size={12} />
+                    <span className='text-sm2 font-medium text-white mt-1'>{rating}</span>
+                </span>
+                <span className='ms-2 text-sm2'>{user}</span>
+                <span className='ms-3 mb-1 size-1.5 bg-border rounded-full'></span>
+                <span className='ms-3 text-sm2'>{date}</span>
+            </div>
+
+            <div className='text-xs mt-3'>
+                {text}
+            </div>
+
+            <div className='mt-3 flex flex-wrap items-center justify-start gap-2'>
+                {tags.map((v, i) => (
+                    <div key={i} className='text-xs py-1.5 px-3 bg-[#F2F2F2] rounded-sm text-center'>
+                        {v}
+                    </div>
+                ))}
+            </div>
+        </div>
+    )
+}
+
+export default Comment
@@ -0,0 +1,28 @@
+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 rounded-full'
+                >
+                </motion.span>
+            </span>
+            <Star1 className='fill-black me-1 mb-1' size={12} />
+            <span className='text-xs font-medium'>{content}</span>
+        </div>
+    )
+}
+
+export default RateBar