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