Add ReadMore component for expandable text display
This commit is contained in:
		
							parent
							
								
									96ef090cef
								
							
						
					
					
						commit
						3dd776f119
					
				|  | @ -0,0 +1,21 @@ | ||||||
|  | "use client"; | ||||||
|  | import { FC, useState } from "react"; | ||||||
|  | 
 | ||||||
|  | type Props = { | ||||||
|  |   text: string; | ||||||
|  | }; | ||||||
|  | 
 | ||||||
|  | export const ReadMore: FC<Props> = ({ text }) => { | ||||||
|  |   const [isOpen, setIsOpen] = useState(false); | ||||||
|  | 
 | ||||||
|  |   return ( | ||||||
|  |     <p | ||||||
|  |       className={`${ | ||||||
|  |         isOpen ? "line-clamp-none" : "line-clamp-2" | ||||||
|  |       } hover:text-accent`}
 | ||||||
|  |       onClick={() => setIsOpen(!isOpen)} | ||||||
|  |     > | ||||||
|  |       {text} | ||||||
|  |     </p> | ||||||
|  |   ); | ||||||
|  | }; | ||||||
		Loading…
	
		Reference in New Issue