genesis

src/Content.js

@@ -0,0 +1,90 @@
+import { 
+	Paper, 
+	TextField, 
+	Stack,
+	Popper,
+	Avatar,
+	Typography,
+	Card,
+	InputAdornment
+} from "@mui/material";
+
+import SearchIcon from "@mui/icons-material/Search";
+
+import React from "react";
+
+export default class Content extends React.Component {
+	constructor(props) {
+		super(props);
+
+		this.state = {
+			searchtext:'',
+			result:[],
+			anchorEl:null
+		};
+	}
+
+
+	handleSearch = (searchtext) => {
+		if(searchtext.trim().length > 2){
+			this.props.socket.emit('search',searchtext,(err,res)=>{
+				if(!err){
+					this.setState({ result:res });
+					console.log(res);
+				}
+				else{
+					console.log('Err',err);
+					this.setState({ result:[] });
+				}
+			});
+		}
+		else{
+			this.setState({ result:[] });
+		}
+	}
+
+	render() {
+		return (
+			<div style={{ width:'100%'}}>
+				<Stack spacing={2}>
+					<Card style={{ width:'100%',margin:'20px auto'}} sx={{ maxWidth: 'sm' }}>
+						<TextField
+							spellCheck={false}
+							InputProps={{
+								startAdornment: (
+									<InputAdornment>
+										<SearchIcon style={{ marginRight:'20px'}}/>
+									</InputAdornment>
+								)
+							}}
+							value={this.state.searchtext}
+							inputRef={(input) => {input && input.focus()}}
+							onChange={(e) => {
+								this.setState({ anchorEl:e.target,searchtext: e.target.value });
+								this.handleSearch(e.target.value);
+							}}
+							autoComplete="off"
+							fullWidth
+						/>
+					</Card>
+					<Popper
+						open={this.state.result.length > 0}
+						anchorEl={this.state.anchorEl}
+						placement={'bottom-start'}
+					>
+						<Paper style={{ padding: 20}}>
+							<Stack>
+								{this.state.result.map((line,i)=>(
+									<Stack key={i} direction="row" spacing={2} style={{cursor: 'pointer',userSelect:'none'}} sx={{alignItems: "center"}} onClick={() => { window.location = 'https://t.growheads.de/'+line.cSeo }}>
+										<Avatar src={'https://t.growheads.de/media/image/product/'+(line.kArtikel)+'/xs/'+(line.cSeo)+'.jpg'} sx={{ width: 40, height: 40 }} variant="square"/>
+										<Typography>{line.cName}</Typography>
+									</Stack>
+								))}
+							</Stack>
+						</Paper>
+					</Popper>
+				</Stack>
+			</div>
+		);
+	}
+}