Innstillingsside

<div className="bg-page p-4 w-full max-w-2xl mx-auto">
<div className="mb-6">
  <Heading as="h2" size="2xl">Innstillinger</Heading>
  <p className="text-sm text-muted mt-1">Administrer konto og preferanser.</p>
</div>
<Tabs defaultValue="general">
  <TabsList className="w-full">
    <TabsTrigger value="general">Generelt</TabsTrigger>
    <TabsTrigger value="notifications">Varsler</TabsTrigger>
    <TabsTrigger value="display">Visning</TabsTrigger>
  </TabsList>
  <TabsContent value="general" className="mt-6">
    <Card>
      <CardHeader>
        <CardTitle>Profil</CardTitle>
        <CardDescription>Oppdater profilinformasjonen din.</CardDescription>
      </CardHeader>
      <CardContent className="flex flex-col gap-4">
        <FormField>
          <Label htmlFor="display-name">Visningsnavn</Label>
          <Input id="display-name" value="Ola Nordmann" />
        </FormField>
        <FormField>
          <Label htmlFor="settings-email">E-post</Label>
          <Input id="settings-email" type="email" value="ola@bekk.no" />
          <FormDescription>Denne brukes for å logge inn.</FormDescription>
        </FormField>
        <FormField>
          <Label htmlFor="role">Rolle</Label>
          <Select defaultValue="developer">
            <SelectTrigger id="role">
              <SelectValue />
            </SelectTrigger>
            <SelectContent>
              <SelectItem value="developer">Utvikler</SelectItem>
              <SelectItem value="designer">Designer</SelectItem>
              <SelectItem value="manager">Prosjektleder</SelectItem>
              <SelectItem value="consultant">Rådgiver</SelectItem>
            </SelectContent>
          </Select>
        </FormField>
      </CardContent>
      <CardFooter className="flex justify-end">
        <Button>Lagre endringer</Button>
      </CardFooter>
    </Card>
  </TabsContent>
  <TabsContent value="notifications" className="mt-6">
    <Card>
      <CardHeader>
        <CardTitle>Varsler</CardTitle>
        <CardDescription>Velg hvilke varsler du vil motta.</CardDescription>
      </CardHeader>
      <CardContent className="flex flex-col gap-0">
        <div className="flex items-center justify-between py-4">
          <div>
            <p className="text-sm font-medium">E-postvarsler</p>
            <p className="text-sm text-muted">Motta varsler om nye meldinger på e-post.</p>
          </div>
          <Switch defaultChecked />
        </div>
        <Separator />
        <div className="flex items-center justify-between py-4">
          <div>
            <p className="text-sm font-medium">Prosjektoppdateringer</p>
            <p className="text-sm text-muted">Bli varslet når prosjekter du følger oppdateres.</p>
          </div>
          <Switch defaultChecked />
        </div>
        <Separator />
        <div className="flex items-center justify-between py-4">
          <div>
            <p className="text-sm font-medium">Markedsføring</p>
            <p className="text-sm text-muted">Motta nyhetsbrev og produktoppdateringer.</p>
          </div>
          <Switch />
        </div>
      </CardContent>
    </Card>
  </TabsContent>
  <TabsContent value="display" className="mt-6">
    <Card>
      <CardHeader>
        <CardTitle>Visning</CardTitle>
        <CardDescription>Tilpass hvordan appen ser ut for deg.</CardDescription>
      </CardHeader>
      <CardContent className="flex flex-col gap-4">
        <FormField>
          <Label htmlFor="language">Språk</Label>
          <Select defaultValue="no">
            <SelectTrigger id="language">
              <SelectValue />
            </SelectTrigger>
            <SelectContent>
              <SelectItem value="no">Norsk</SelectItem>
              <SelectItem value="en">English</SelectItem>
              <SelectItem value="sv">Svenska</SelectItem>
            </SelectContent>
          </Select>
        </FormField>
        <div className="flex items-center justify-between py-2">
          <div>
            <p className="text-sm font-medium">Kompakt visning</p>
            <p className="text-sm text-muted">Vis mer innhold med mindre mellomrom.</p>
          </div>
          <Switch />
        </div>
      </CardContent>
      <CardFooter className="flex justify-end">
        <Button>Lagre endringer</Button>
      </CardFooter>
    </Card>
  </TabsContent>
</Tabs>
</div>