CoastalCommitsPastes/client/app/(posts)/new/components/title/index.tsx

52 lines
1.1 KiB
TypeScript
Raw Normal View History

2022-04-09 20:48:19 -04:00
import { ChangeEvent, memo, useEffect, useState } from "react"
2022-11-09 21:38:05 -05:00
import { Text } from "@geist-ui/core/dist"
2022-11-12 03:58:21 -05:00
import ShiftBy from "app/components/shift-by"
2022-04-09 20:48:19 -04:00
import styles from "../post.module.css"
2022-11-09 21:38:05 -05:00
import { Input } from "@geist-ui/core/dist"
2022-03-06 19:46:59 -05:00
const titlePlaceholders = [
2022-04-09 20:48:19 -04:00
"How to...",
"Status update for ...",
"My new project",
"My new idea",
"Let's talk about...",
"What's up with ...",
"I'm thinking about ..."
2022-03-06 19:46:59 -05:00
]
type props = {
2022-04-09 20:48:19 -04:00
onChange: (e: ChangeEvent<HTMLInputElement>) => void
title?: string
2022-03-06 19:46:59 -05:00
}
const Title = ({ onChange, title }: props) => {
2022-04-09 20:48:19 -04:00
const [placeholder, setPlaceholder] = useState(titlePlaceholders[0])
useEffect(() => {
// set random placeholder on load
setPlaceholder(
titlePlaceholders[Math.floor(Math.random() * titlePlaceholders.length)]
)
}, [])
return (
<div className={styles.title}>
<Text h1 width={"150px"} className={styles.drift}>
Drift
</Text>
<ShiftBy y={-3}>
<Input
placeholder={placeholder}
value={title || ""}
onChange={onChange}
height={"55px"}
font={1.5}
label="Post title"
style={{ width: "100%" }}
/>
</ShiftBy>
</div>
)
2022-03-06 19:46:59 -05:00
}
2022-04-09 20:48:19 -04:00
export default memo(Title)