Changed settings layout + separated settings into different pages. Cleaned some code. Working on tts pages (no db/rest calls yet).

2023-12-31 10:41:55 +00:00
parent 8eb9b9096f
commit a3352af981
20 changed files with 1083 additions and 287 deletions
--- a/app/settings/tts/voices/page.tsx
+++ b/app/settings/tts/voices/page.tsx
@ -0,0 +1,110 @@
+"use client";
+
+import axios from "axios";
+import * as React from 'react';
+import { Check, ChevronsUpDown } from "lucide-react"
+import { ApiKey, TwitchConnection, User } from "@prisma/client";
+import { useEffect, useState } from "react";
+import { useSession } from "next-auth/react";
+import Link from "next/link";
+import { cn } from "@/lib/utils";
+import { Skeleton } from "@/components/ui/skeleton";
+import { Button } from "@/components/ui/button"
+import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem } from "@/components/ui/command"
+import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover"
+import { Label } from "@/components/ui/label";
+
+const TTSFiltersPage = () => {
+  const { data: session, status } = useSession();
+  const [loading, setLoading] = useState<boolean>(true)
+
+  const [open, setOpen] = useState(false)
+  const [value, setValue] = useState<string>("")
+
+  const voices = [
+    {
+      value: "brian",
+      label: "Brian",
+      gender: "Male",
+      language: "en"
+    },
+    {
+      value: "sveltekit",
+      label: "SvelteKit",
+      gender: "Male"
+    },
+    {
+      value: "nuxt.js",
+      label: "Nuxt.js",
+      gender: "Male",
+      language: "en"
+    },
+    {
+      value: "remix",
+      label: "Remix",
+      gender: "Male",
+      language: "en"
+    },
+    {
+      value: "astro",
+      label: "Astro",
+      gender: "Male",
+      language: "en"
+    },
+  ]
+
+  return ( 
+    <div>
+      <div className="text-2xl text-center pt-[50px]">TTS Voices</div>
+      <div className="px-10 py-10 w-full h-full flex-grow inset-y-1/2">
+        <div>
+          <div id="defaultvoice" className="inline-block text-lg">Default Voice</div>
+          <Label htmlFor="defaultvoice" className=" pl-[10px] inline-block">Voice used without any voice modifiers</Label>
+          <Popover open={open} onOpenChange={setOpen}>
+            <PopoverTrigger asChild>
+              <Button
+                variant="outline"
+                role="combobox"
+                aria-expanded={open}
+                className="w-[200px] justify-between"
+              >
+                {value
+                  ? voices.find((voice) => voice.value === value)?.label
+                  : "Select voice..."}
+                <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
+              </Button>
+            </PopoverTrigger>
+            <PopoverContent className="w-[200px] p-0">
+              <Command>
+                <CommandInput placeholder="Search voice..." />
+                <CommandEmpty>No framework found.</CommandEmpty>
+                <CommandGroup>
+                  {voices.map((voice) => (
+                    <CommandItem
+                      key={voice.value}
+                      value={voice.value}
+                      onSelect={(currentValue) => {
+                        setValue(currentValue === value ? "" : currentValue)
+                        setOpen(false)
+                      }}
+                    >
+                      <Check
+                        className={cn(
+                          "mr-2 h-4 w-4",
+                          value === voice.value ? "opacity-100" : "opacity-0"
+                        )}
+                      />
+                      {voice.label}
+                    </CommandItem>
+                  ))}
+                </CommandGroup>
+              </Command>
+            </PopoverContent>
+          </Popover>
+        </div>
+      </div>
+    </div>
+   );
+}
+ 
+export default TTSFiltersPage;