Add ReadMore component for expandable text display
This commit is contained in:
21
src/components/atoms/ReadMore/index.tsx
Normal file
21
src/components/atoms/ReadMore/index.tsx
Normal file
@@ -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>
|
||||
);
|
||||
};
|
||||
Reference in New Issue
Block a user