import SearchIcon from "@mui/icons-material/Search";
import { Autocomplete, Box, Typography } from "@mui/material";
import Head from "next/head";
import { useRouter } from "next/router";
import React, { useRef, useState } from "react";
import LanguageLink from "../components/LanguageLink";
import { Search, SearchIconWrapper, StyledInputBase } from "../components/UI";
import langs from "../assets/data.json";
export default function Home() {
const [selected, setSelected] = useState(null);
const router = useRouter();
const search = useRef();
const moveToEditor = (link) => {
router.push(`/editor/${link.id}`);
};
React.useEffect(() => {
if (search.current) {
search.current.focus();
}
}, []);
return (
<>
Riju
Riju
fast online playground for every programming language
theme.zIndex.appBar + 1,
borderRadius: (theme) => theme.shape.borderRadius,
backgroundColor: (theme) =>
theme.palette.type === "dark"
? theme.palette.common.black
: theme.palette.common.white,
}}
id="search"
>
option.name}
value={selected}
onChange={(event, newValue) => {
if (!newValue) return;
setSelected(newValue);
moveToEditor(newValue);
}}
renderInput={(params) => (
{
params.InputProps.ref(e);
search.current = e;
return e;
}}
placeholder="Search…"
inputProps={{
...params.inputProps,
"aria-label": "search",
}}
/>
)}
/>
{langs.map((link, i) => (
))}
);
}