Add Pages + Fixed BG Changer

src/app/settings/appearance/page.tsx

@@ -6,18 +6,16 @@ import { z } from 'zod'
 
 import { Button } from '@/components/ui/button'
 import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from '@/components/ui/form'
-import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'
 
 import { Input } from '@/components/ui/input'
 import { Separator } from '@/components/ui/separator'
-import { Textarea } from '@/components/ui/textarea'
-import { Save } from 'lucide-react'
+import { Save, RotateCcw } from 'lucide-react'
 import { useState } from 'react'
 import { toast } from 'sonner'
 
 const formSchema = z.object({
-  backgroundImage: z.string(),
-  description: z.string()
+  backgroundImage: z.string().url('Please provide a valid URL'),
+  description: z.string().optional(),
 })
 
 export default function Settings() {
@@ -25,19 +23,31 @@ export default function Settings() {
   const form = useForm<z.infer<typeof formSchema>>({
     resolver: zodResolver(formSchema),
     defaultValues: {
-      backgroundImage: ''
-    }
+      backgroundImage: '',
+    },
   })
 
   function onSubmit(values: z.infer<typeof formSchema>) {
     setSubmitting(true)
 
+    document.body.style.backgroundImage = `url(${values.backgroundImage})`
+    document.body.style.backgroundSize = 'cover'
+    document.body.style.backgroundPosition = 'center'
+
     setTimeout(() => {
       setSubmitting(false)
       toast.success('Settings saved')
     }, 1000)
+
     console.log(values)
   }
+
+  function onReset() {
+    form.reset()
+    document.body.style.backgroundImage = ''
+    toast('Settings reset')
+  }
+
   return (
     <div className="space-y-4">
       <h1 className="text-4xl font-semibold">Appearance</h1>
@@ -58,9 +68,15 @@ export default function Settings() {
             )}
           />
 
+          {}
+          <div className="flex space-x-4">
             <Button type="submit" disabled={submitting}>
               <Save className="mr-2 h-5 w-5" /> Save Changes
             </Button>
+            <Button type="button" onClick={onReset}>
+              <RotateCcw className="mr-2 h-5 w-5" /> Reset
+            </Button>
+          </div>
         </form>
       </Form>
     </div>

src/app/settings/credits/page.tsx

@@ -0,0 +1,21 @@
+'use client'
+
+import { Separator } from '@/components/ui/separator'
+
+export default function Credits() {
+  return (
+    <div>
+      <h1 className="text-4xl font-semibold">Credits</h1>
+      <Separator />
+      <div className="mt-4">
+        <p>Radius contributors!</p>
+        <ul className="list-disc pl-5 mt-2 space-y-1">
+          <li>Owskio09</li>
+          <li>proudparrot2</li>
+          <li>Sparkzil</li>
+          <li>Scaratek</li>
+        </ul>
+      </div>
+    </div>
+  )
+}

src/app/settings/layout.tsx

@@ -1,7 +1,7 @@
 'use client'
 
 import { Button } from '@/components/ui/button'
-import { Images, Link, Palette } from 'lucide-react'
+import { Users, Link, Palette } from 'lucide-react'
 import NextLink from 'next/link'
 
 import { usePathname } from 'next/navigation'
@@ -16,12 +16,16 @@ export default function SettingsLayout({ children }: Readonly<{ children: React.
             <Palette className="h-5 w-5" /> Appearance
           </Button>
         </NextLink>
-        <Button variant={pathname?.includes('/settings/search') ? 'secondary' : 'ghost'} className="w-full items-center justify-start gap-2">
-          <Images className="h-5 w-5" /> Images
+        <NextLink href="/settings/credits/">
+          <Button variant={pathname?.includes('/settings/credits') ? 'secondary' : 'ghost'} className="w-full items-center justify-start gap-2">
+            <Users className="h-5 w-5" /> Credits
           </Button>
-        <Button variant={pathname?.includes('/settings/account') ? 'secondary' : 'ghost'} className="w-full items-center justify-start gap-2">
+        </NextLink>
+        <NextLink href="/settings/links/">
+          <Button variant={pathname?.includes('/settings/links') ? 'secondary' : 'ghost'} className="w-full items-center justify-start gap-2">
             <Link className="h-5 w-5" /> Social Links
           </Button>
+        </NextLink>
       </div>
       <div className="w-3/4 px-12 py-8">{children}</div>
     </div>

src/app/settings/links/page.tsx

@@ -0,0 +1,26 @@
+'use client'
+
+import NextLink from 'next/link'
+import { Separator } from '@/components/ui/separator'
+
+export default function SocialLinks() {
+  return (
+    <div>
+      <h1 className="text-4xl font-semibold">Socials</h1>
+      <Separator />
+      <div className="mt-4">
+        <p>Follow us on other platforms!</p>
+        <ul className="list-disc pl-5 mt-2 space-y-1">
+          <li>TikTok: @radiusproxy</li>
+          <li>YouTube: @RadiusProxy</li>
+          <li>
+            Discord:{' '}
+            <NextLink href="https://discord.gg/yourdiscordlink" target="_blank" className="text-blue-500 underline">
+              Join Now!
+            </NextLink>
+          </li>
+        </ul>
+      </div>
+    </div>
+  )
+}