initiate drf app

frontend/components/ui/ShowMore.tsx

@@ -0,0 +1,48 @@
+'use client'
+import { useState } from 'react'
+
+interface ShowMoreProps {
+  text?: string
+}
+
+const ShowMore = ({ text }: ShowMoreProps) => {
+  const [isExpandedMobile, setIsExpandedMobile] = useState(false)
+  const [isExpandedDesktop, setIsExpandedDesktop] = useState(false)
+
+  if (!text) return null
+
+  const maxLength = {
+    mobile: 100,
+    desktop: 100,
+  }
+
+  return (
+    <div className="pb-5">
+      {/* мобила */}
+      <div
+        onClick={() => setIsExpandedMobile(!isExpandedMobile)}
+        className={`lg:hidden text-justify relative cursor-pointer overflow-hidden
+          ${isExpandedMobile ? 'max-h-[2000px]' : 'max-h-[300px]'}`}
+      >
+        {isExpandedMobile ? text : text.slice(0, maxLength.mobile)}
+        {!isExpandedMobile && text.length > maxLength.mobile && (
+          <div className="absolute bottom-0 left-0 right-0 h-12 bg-gradient-to-t from-white to-transparent" />
+        )}
+      </div>
+
+      {/* десктоп */}
+      <div
+        onClick={() => setIsExpandedDesktop(!isExpandedDesktop)}
+        className={`hidden lg:block text-justify relative cursor-pointer overflow-hidden
+          ${isExpandedDesktop ? 'max-h-[2000px]' : 'max-h-[300px]'}`}
+      >
+        {isExpandedDesktop ? text : text.slice(0, maxLength.desktop)}
+        {!isExpandedDesktop && text.length > maxLength.desktop && (
+          <div className="absolute bottom-0 left-0 right-0 h-12 bg-gradient-to-t from-white to-transparent" />
+        )}
+      </div>
+    </div>
+  )
+}
+
+export default ShowMore