diff --git a/packages/desktop/src/components/Button/IconButton/index.tsx b/packages/desktop/src/components/Button/IconButton/index.tsx new file mode 100644 index 0000000..58616d0 --- /dev/null +++ b/packages/desktop/src/components/Button/IconButton/index.tsx @@ -0,0 +1,7 @@ +export default function IconButton({ children }) { + return ( + + {children} + + ); +} diff --git a/packages/desktop/src/components/Logo/index.tsx b/packages/desktop/src/components/Logo/index.tsx index d2a6486..bf89a2a 100644 --- a/packages/desktop/src/components/Logo/index.tsx +++ b/packages/desktop/src/components/Logo/index.tsx @@ -4,14 +4,14 @@ export default function Logo({ className, type, }: { - className: string; + className?: string; type?: LogoType; }) { if (type === "small") { return ( (null); + const [searchInput, setSearchInput] = useState(""); + const [anchorEl, setAnchorEl] = useState(null); const [outputMode, setOutputMode] = useRecoilState($selectedOutputMode); @@ -48,57 +53,90 @@ export default function NirvanaHeader() { setAnchorEl(null); }, []); + const selectSearch = () => { + inputRef.current?.focus(); + }; + + const onSearchChange = (e) => { + setSearchInput(e.target.value); + }; + + const keyMap: KeyMap = { + SELECT_SEARCH: { + name: "select search to start searching", + sequence: "/", + action: "keyup", + }, + }; + const handlers = { + SELECT_SEARCH: selectSearch, + }; + if (isLoading) return <>loading>; return ( - - + <> + - - - flow state - - + + - - {outputMode === "video" && ( - - )} - - {userDetailsRes?.user?.picture && outputMode === "audio" && ( - + + - )} + + + {/* todo: move this ghost button to components */} + + flow state + + + + {outputMode === "video" && ( + + )} + + {userDetailsRes?.user?.picture && outputMode === "audio" && ( + + )} + + + {/* menu for the output options */} + + setOutputMode("audio")}> + + + + Audio Only + + + setOutputMode("video")}> + + + + Video + + - - {/* menu for the output options */} - - setOutputMode("audio")}> - - - - Audio Only - - - setOutputMode("video")}> - - - - Video - - - + > ); } diff --git a/packages/desktop/src/pages/nirvanaApp.tsx b/packages/desktop/src/pages/nirvanaApp.tsx index 14232fe..04fdf29 100644 --- a/packages/desktop/src/pages/nirvanaApp.tsx +++ b/packages/desktop/src/pages/nirvanaApp.tsx @@ -39,6 +39,16 @@ const theme = createTheme({ }, }, }, + MuiFab: { + styleOverrides: { + root: { + borderRadius: 0, + }, + }, + }, + }, + shape: { + borderRadius: 0, }, }); diff --git a/packages/desktop/src/pages/terminal/index.tsx b/packages/desktop/src/pages/terminal/index.tsx index 7abed64..915620e 100644 --- a/packages/desktop/src/pages/terminal/index.tsx +++ b/packages/desktop/src/pages/terminal/index.tsx @@ -1,3 +1,9 @@ +import { AddSharp, SearchSharp } from "@mui/icons-material"; +import { Button, Fab, InputAdornment, TextField } from "@mui/material"; +import { FaPlus, FaSearch } from "react-icons/fa"; +import { useRef, useState } from "react"; + +import IconButton from "../../components/Button/IconButton/index"; import NirvanaHeader from "../../components/header"; export default function NirvanaTerminal() { @@ -5,7 +11,11 @@ export default function NirvanaTerminal() { - + + + + + ); } diff --git a/packages/desktop/src/styles/index.css b/packages/desktop/src/styles/index.css index 47f8df3..caa522c 100644 --- a/packages/desktop/src/styles/index.css +++ b/packages/desktop/src/styles/index.css @@ -8,3 +8,7 @@ @tailwind utilities; @import "~antd/dist/antd.css"; + +button { + @apply transition-all; +}