diff --git a/components/Settings.tsx b/components/Settings.tsx new file mode 100644 index 0000000..b419814 --- /dev/null +++ b/components/Settings.tsx @@ -0,0 +1,445 @@ +import { RadioGroup, Listbox, Dialog, Transition } from "@headlessui/react"; +import { Fragment, useState } from "react"; +import { FiSettings, FiChevronsDown, FiCheck } from "react-icons/fi"; +import styled, { css } from "styled-components"; + +const ModalContainer = styled.div` +position: absolute; +top: 0; +left: 0; +width: 100vw; +height: 100vh; +background: rgba(0, 0, 0, 0.5); +display: flex; +align-items: center; +justify-content: center; +`; + +const plans = [ + { + name: 'Startup', + ram: '12GB', + cpus: '6 CPUs', + disk: '160 GB SSD disk', + }, + { + name: 'Business', + ram: '16GB', + cpus: '8 CPUs', + disk: '512 GB SSD disk', + }, + { + name: 'Enterprise', + ram: '32GB', + cpus: '12 CPUs', + disk: '1024 GB SSD disk', + }, +] + + + +export default function Settings() { + const [open, setOpen] = useState(false); + + var classNameCondition = "" + if (open) { + classNameCondition = "fixed z-20 top-64 mt-4 right-4 md:top-68 md:right-8 bg-sky-400 w-14 h-14 rounded-full drop-shadow-lg flex justify-center items-center text-white text-2xl hover:bg-sky-500 hover:drop-shadow-2xl" + } else { + classNameCondition = "fixed z-20 top-64 mt-4 right-4 md:top-68 md:right-8 bg-slate-100 w-14 h-14 rounded-full drop-shadow-lg flex justify-center items-center text-sky-900 text-2xl hover:text-white hover:bg-sky-600 hover:drop-shadow-2xl" + } + + return ( + <> + + + + setOpen(false)} + > +
+ + + + + + + +
+ + Settings + +
+

+ {Denoising()} + {Drop()} + + + + {/* choose options */} + {/* {Example()} */} +

+ {/* {Radio()} */} +

+
+ +
+ + + + + +
+
+ + +
+ + + + ); +}; + +export function Denoising() { + return ( +
+ +
+ +
+
+ ) +} + +export function Example() { + const [selected, setSelected] = useState(people[0]) + + return ( +
+ +
+ + {selected.name} + + + + + + {people.map((person, personIdx) => ( + + `relative cursor-default select-none py-2 pl-10 pr-4 ${active ? 'bg-amber-100 text-amber-900' : 'text-gray-900' + }` + } + value={person} + > + {({ selected }) => ( + <> + + {person.name} + + {selected ? ( + + + ) : null} + + )} + + ))} + + +
+ +
+ ) +} + + + +export function Radio() { + const [selected, setSelected] = useState(plans[0]) + + return ( +
+
+ + Server size +
+ {plans.map((plan) => ( + + `${active + ? 'ring-2 ring-white ring-opacity-60 ring-offset-2 ring-offset-sky-300' + : '' + } + ${checked ? 'bg-sky-900 bg-opacity-75 text-white' : 'bg-white' + } + relative flex cursor-pointer rounded-lg px-5 py-4 shadow-md focus:outline-none` + } + > + {({ active, checked }) => ( + <> +
+
+
+ + {plan.name} + + + + {plan.ram}/{plan.cpus} + {' '} + {' '} + {plan.disk} + +
+
+ {checked && ( +
+ +
+ )} +
+ + )} + + ))} +
+ +
+
+ ) +} + +function CheckIcon(props) { + return ( + + + + + ) +} + + +const people = [ + { + id: 1, + name: 'Wade Cooper', + avatar: + 'https://images.unsplash.com/photo-1491528323818-fdd1faba62cc?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80', + }, + { + id: 2, + name: 'Arlene Mccoy', + avatar: + 'https://images.unsplash.com/photo-1550525811-e5869dd03032?ixlib=rb-1.2.1&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80', + }, + { + id: 3, + name: 'Devon Webb', + avatar: + 'https://images.unsplash.com/photo-1500648767791-00dcc994a43e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2.25&w=256&h=256&q=80', + }, + { + id: 4, + name: 'Tom Cook', + avatar: + 'https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80', + }, + { + id: 5, + name: 'Tanya Fox', + avatar: + 'https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80', + }, + { + id: 6, + name: 'Hellen Schmidt', + avatar: + 'https://images.unsplash.com/photo-1487412720507-e7ab37603c6f?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80', + }, + { + id: 7, + name: 'Caroline Schultz', + avatar: + 'https://images.unsplash.com/photo-1568409938619-12e139227838?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80', + }, + { + id: 8, + name: 'Mason Heaney', + avatar: + 'https://images.unsplash.com/photo-1531427186611-ecfd6d936c79?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80', + }, + { + id: 9, + name: 'Claudie Smitham', + avatar: + 'https://images.unsplash.com/photo-1584486520270-19eca1efcce5?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80', + }, + { + id: 10, + name: 'Emil Schaefer', + avatar: + 'https://images.unsplash.com/photo-1561505457-3bcad021f8ee?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80', + }, +] + +function classNames(...classes) { + return classes.filter(Boolean).join(' ') +} + +export function Drop() { + const [selected, setSelected] = useState(people[3]) + + return ( + + {({ open }) => ( + <> + Assigned to +
+ + + + {selected.name} + + + + + + + + {people.map((person) => ( + + classNames( + active ? 'text-white bg-indigo-600' : 'text-gray-900', + 'relative cursor-default select-none py-2 pl-3 pr-9' + ) + } + value={person} + > + {({ selected, active }) => ( + <> +
+ + + {person.name} + +
+ + {selected ? ( + + + ) : null} + + )} + + ))} + + +
+ + )} + + ) +} \ No newline at end of file diff --git a/pages/index.tsx b/pages/index.tsx index 5eeeccd..5016eb1 100644 --- a/pages/index.tsx +++ b/pages/index.tsx @@ -6,6 +6,7 @@ import AudioPlayer from "../components/AudioPlayer"; import PageHead from "../components/PageHead"; import Info from "../components/Info"; import Share from "../components/Share"; +import Settings from "../components/Settings" import ModelInference from "../components/ModelInference"; import Pause from "../components/Pause"; import PromptPanel from "../components/PromptPanel"; @@ -238,6 +239,8 @@ export default function Home() { /> + + );