stort/src/components/Generic/Layout.tsx

import { Box, Button } from "@mui/material";
import { convertFileSrc } from "@tauri-apps/api/tauri";
import { useState } from "react";
import { FooterBar } from "../FooterBar";
import { HeaderBar } from "../HeaderBar/HeaderBar";
import { useSettings } from "../../contexts/SettingsContext";

export const Layout = () => {
  const { settings } = useSettings();

  const [imageUrl, setImageUrl] = useState<string | null>(null);

  const setBackground = async () => {
    const assetUrl = convertFileSrc("/home/vomitblood/Downloads/toothless-dance.gif");
    setImageUrl(assetUrl);
  };

  return (
    <Box
      sx={{
        // Use the URL function for background images
        backgroundColor: settings.background.background_color,
        backgroundImage: `url(${imageUrl})`,
        backgroundSize: "cover", // Cover the entire area
        backgroundPosition: "center", // Center the image
        backgroundRepeat: "no-repeat", // Do not repeat the image
        display: "flex",
        flexDirection: "column",
        height: "100vh",
      }}
    >
      <HeaderBar />
      <Box
        sx={{
          display: "flex",
          flexGrow: 1,
          overflow: "auto",
        }}
      >
        <Box>
          <Button
            onClick={() => {
              setBackground();
            }}
          >
            set background
          </Button>
        </Box>
      </Box>
      <FooterBar />
    </Box>
  );
};