CoastalCommitsPastes/client/app/(posts)/new/components/title/index.tsx
2022-11-17 23:39:52 -08:00

40 lines
856 B
TypeScript

import { ChangeEvent, memo } from "react"
import Input from "@components/input"
import styles from "./title.module.css"
const titlePlaceholders = [
"How to...",
"Status update for ...",
"My new project",
"My new idea",
"Let's talk about...",
"What's up with ...",
"I'm thinking about ..."
]
type props = {
onChange: (e: ChangeEvent<HTMLInputElement>) => void
title?: string
}
const Title = ({ onChange, title }: props) => {
const placeholder =
titlePlaceholders[Math.floor(Math.random() * titlePlaceholders.length)]
return (
<div className={styles.title}>
<h1>Drift</h1>
<Input
placeholder={placeholder}
value={title || ""}
onChange={onChange}
label="Title"
className={styles.labelAndInput}
style={{ width: "100%" }}
labelClassName={styles.labelAndInput}
/>
</div>
)
}
export default memo(Title)