customer-dashboard/src/Components/MyTypography/index.js

38 lines
851 B
JavaScript

import { EditOutlined } from "@ant-design/icons";
import { Input, Typography } from "antd";
import { useState } from "react";
export default function MyTypography({ value, setValue, maxLength }) {
const [editing, setEditing] = useState(false);
return (
<div
style={{
display: "flex",
flexDirection: "row",
gap: 10,
marginRight: 26,
alignItems: "center",
}}
>
{editing ? (
<Input
value={value}
onChange={(e) => setValue(e.target.value)}
maxLength={maxLength}
showCount
/>
) : (
<Typography.Title level={3} style={{ margin: 0 }}>
{value}
</Typography.Title>
)}
<EditOutlined
style={{ fontSize: 24 }}
onClick={() => setEditing(!editing)}
/>
</div>
);
}