Teste Skypass

2 minutos de leitura

import { useState } from “react”;
import { Input } from “@/components/ui/input”;
import { Textarea } from “@/components/ui/textarea”;
import { Label } from “@/components/ui/label”;
import { supabase } from “@/lib/supabaseClient”;
import { Button } from “@/components/ui/button”;

export default function VisualSettings() {
const [salonName, setSalonName] = useState(“”);
const [salonDescription, setSalonDescription] = useState(“”);
const [logoUrl, setLogoUrl] = useState(“”);
const [isSaving, setIsSaving] = useState(false);
const [uploadError, setUploadError] = useState(“”);

const handleLogoUpload = async (e: React.ChangeEvent) => {
const file = e.target.files?.[0];
if (!file) return;

const filePath = `logos/${Date.now()}-${file.name}`;
const { error: uploadError } = await supabase.storage
  .from("salon-logos")
  .upload(filePath, file, {
    cacheControl: "3600",
    upsert: false,
  });

if (uploadError) {
  setUploadError("Erro ao fazer upload da logomarca");
  return;
}

const { data } = supabase.storage.from("salon-logos").getPublicUrl(filePath);
setLogoUrl(data.publicUrl);
setUploadError("");

};

const handleSave = async () => {
setIsSaving(true);
const { data: { user } } = await supabase.auth.getUser();

const { error } = await supabase
  .from("salon_settings")
  .update({
    salon_name: salonName,
    salon_description: salonDescription,
    logo_url: logoUrl,
  })
  .eq("salon_id", user.id); // Altere se estiver usando "salon_id"

if (error) {
  alert("Erro ao salvar: " + error.message);
} else {
  alert("Informações salvas com sucesso!");
}

setIsSaving(false);

};

return (
Logomarca do Salão

{uploadError &&

{uploadError}} {logoUrl && ( Prévia da Logo )}

  <div>
    <Label htmlFor="salon-name" className="text-sm font-medium mb-2 block">
      Nome do Salão
    </Label>
    <Input
      id="salon-name"
      placeholder="Digite o nome do seu salão"
      value={salonName}
      onChange={(e) => setSalonName(e.target.value)}
    />
  </div>

  <div>
    <Label htmlFor="salon-description" className="text-sm font-medium mb-2 block">
      Descrição
    </Label>
    <Textarea
      id="salon-description"
      placeholder="Breve descrição do seu salão"
      value={salonDescription}
      onChange={(e) => setSalonDescription(e.target.value)}
      rows={3}
    />
  </div>

  <Button
    onClick={handleSave}
    disabled={isSaving}
    className="w-full bg-[#16c1c8] hover:bg-[#0fa9ae] text-white"
  >
    {isSaving ? "Salvando..." : "Salvar Alterações"}
  </Button>
</div>

);
}

Atualizado em 3 de junho de 2025

Quais são seus sentimentos