CoastalCommitsPastes/client/components/new-post/title/index.tsx

45 lines
1.3 KiB
TypeScript
Raw Normal View History

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