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