neki/Enshi
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Blog creation and filling dialog completed #1

Merged
neki merged 10 commits from feature/blogCreationAndFilling into develop 2025-02-01 09:10:18 +00:00
Conversation 0 Commits 10 Files Changed 27 +82 -69
2 changed files with 82 additions and 69 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit 19ee51a739 - Show all commits

48
enshi/src/Components/Dialogs/BlogCreationDialog/BlogCreationDialog.tsx
View File

@ -1,37 +1,44 @@
import * as Dialog from "@radix-ui/react-dialog";
import { Cross2Icon, PlusIcon } from "@radix-ui/react-icons";
import { Box, Button } from "@radix-ui/themes";
import { Box, Button, Heading, Text, Theme } from "@radix-ui/themes";
import { useMutation } from "@tanstack/react-query";
import { useState } from "react";
import { axiosLocalhost } from "../../../api/axios/axios";
import queryClient from "../../../api/QueryClient/QueryClient";
import useToast from "../../../hooks/useToast";
export default function BlogCreationDialog() {
const createToast = useToast()
const createToast = useToast();
const [title, setTitle] = useState<string>("My blog");
const [description, setDescription] = useState<string>("");
const addMutation = useMutation({
onMutate: () => {
},
onMutate: () => {},
mutationFn: async () => {
await axiosLocalhost.post("/blogs", {
title,
description
})
description,
});
},
onSuccess: () => {
createToast({title: `Success!`, description: `Blog created successfully!`});
createToast({
title: `Success!`,
description: `Blog created successfully!`,
});
},
onError: (_error) => {
createToast({title: `Error!`, description: `Blog creation failed!`});
createToast({
title: `Error!`,
description: `Blog creation failed!`,
});
},
onSettled: () => {
}
queryClient.invalidateQueries({
queryKey: ["userBlogs"],
});
},
});
return (
<Box>
@ -42,20 +49,22 @@ export default function BlogCreationDialog() {
</Button>
</Dialog.Trigger>
<Dialog.Portal>
<Dialog.Overlay className="fixed inset-0 bg-blackA6 data-[state=open]:animate-overlayShow" />
<Dialog.Content className="fixed left-1/2 top-1/2 max-h-[85vh] w-[90vw] max-w-[450px] -translate-x-1/2 -translate-y-1/2 rounded-md bg-white p-[25px] shadow-[hsl(206_22%_7%_/_35%)_0px_10px_38px_-10px,_hsl(206_22%_7%_/_20%)_0px_10px_20px_-15px] focus:outline-none data-[state=open]:animate-contentShow">
<Box>
<Theme>
<Dialog.Overlay className="fixed inset-0 bg-black/40 backdrop-blur-sm data-[state=open]:animate-appear" />
<Dialog.Content className="fixed left-1/2 top-1/2 max-h-[85vh] w-[90vw] max-w-[600px] -translate-x-1/2 -translate-y-1/2 rounded-md bg-white p-[25px] shadow-[hsl(206_22%_7%_/_35%)_0px_10px_38px_-10px,_hsl(206_22%_7%_/_20%)_0px_10px_20px_-15px] focus:outline-none data-[state=open]:animate-appear">
<Dialog.Title className="m-0 text-[17px] font-medium text-mauve12">
Create blog
<Heading>Create blog</Heading>
</Dialog.Title>
<Dialog.Description className="mb-5 mt-2.5 text-[15px] leading-normal text-mauve11">
Create your new blog.
<Text>Create your new blog.</Text>
</Dialog.Description>
<fieldset className="mb-[15px] flex items-center gap-5">
<label
className="w-[90px] text-right text-[15px] text-violet11"
htmlFor="title"
>
Blog title
<Text>Blog title</Text>
</label>
<input
className="inline-flex h-[35px] w-full flex-1 items-center justify-center rounded px-2.5 text-[15px] leading-none text-violet11 shadow-[0_0_0_1px] shadow-violet7 outline-none focus:shadow-[0_0_0_2px] focus:shadow-violet8"
@ -71,7 +80,7 @@ export default function BlogCreationDialog() {
className="w-[90px] text-right text-[15px] text-violet11"
htmlFor="Description"
>
Description
<Text>Description</Text>
</label>
<textarea
className="pt-2 inline-flex h-[35px] w-full flex-1 items-center justify-center rounded px-2.5 text-[15px] leading-none text-violet11 shadow-[0_0_0_1px] shadow-violet7 outline-none focus:shadow-[0_0_0_2px] focus:shadow-violet8"
@ -83,7 +92,8 @@ export default function BlogCreationDialog() {
/>
</fieldset>
<div className="mt-[25px] flex justify-end">
<Dialog.Close asChild
<Dialog.Close
asChild
onClick={() => {
addMutation.mutate();
}}
@ -100,6 +110,8 @@ export default function BlogCreationDialog() {
</button>
</Dialog.Close>
</Dialog.Content>
</Theme>
</Box>
</Dialog.Portal>
</Dialog.Root>
</Box>

1
enshi/tailwind.config.js
View File

@ -34,6 +34,7 @@ export default {
}
},
appear: {
"0%": { opacity: "0" },
"100%": { opacity: "1" },
},
widthOut: {