Add MainPage style constants

This commit is contained in:
Igor Carvalho 2023-06-16 13:46:25 -03:00
commit af14c843d3
3 changed files with 42 additions and 18 deletions

View file

@ -148,3 +148,25 @@ export const EXPORT_CODE_DIALOG =
*/
export const INPUT_STYLE =
" focus:ring-1 focus:ring-offset-1 focus:ring-ring focus:outline-none ";
/**
* The base text for subtitle of code dialog
* @constant
*/
export const COLUMN_DIV_STYLE =
" w-full h-full flex overflow-auto flex-col bg-muted px-16 ";
/**
* The base text for subtitle of code dialog
* @constant
*/
export const NAV_DISPLAY_STYLE =
" w-full flex justify-between py-12 pb-2 px-6 ";
/**
* The base text for subtitle of code dialog
* @constant
*/
export const BUTTON_DIV_STYLE =
" flex gap-2 ";

View file

@ -82,7 +82,7 @@ const NodeToolbarComponent = (props) => {
</ShadTooltip>
)}
{/*
<Menu as="div" className="relative inline-block text-left z-100">
<button className="hover:dark:hover:bg-[#242f47] text-gray-700 transition-all duration-500 ease-in-out dark:bg-gray-800 dark:text-gray-300 shadow-md relative -ml-px inline-flex items-center bg-white px-2 py-2 ring-1 ring-inset ring-gray-300 hover:bg-muted focus:z-10 rounded-r-md">
<div>
@ -173,7 +173,7 @@ const NodeToolbarComponent = (props) => {
</Menu.Items>
</Transition>
</button>
</Menu> */}
</Menu>
</span>
</div>
</>

View file

@ -1,24 +1,26 @@
import { useContext, useEffect } from "react";
import { Download, Upload, Plus, Home, ExternalLink } from "lucide-react";
import { TabsContext } from "../../contexts/tabsContext";
import { Button } from "../../components/ui/button";
import { Link, useNavigate } from "react-router-dom";
import { CardComponent } from "../../components/cardComponent";
export default function HomePage() {
const { flows, setTabId, downloadFlows, uploadFlows, addFlow, removeFlow } =
import { COLUMN_DIV_STYLE, NAV_DISPLAY_STYLE } from "../../constants";
import { Download, Upload, Plus, Home, ExternalLink } from "lucide-react";
import { TabsContext } from "../../contexts/tabsContext";
import { Button } from "../../components/ui/button";
import { Link, useNavigate } from "react-router-dom";
import { CardComponent } from "../../components/cardComponent";
export default function HomePage() {
const { flows, setTabId, downloadFlows, uploadFlows, addFlow, removeFlow } =
useContext(TabsContext);
useEffect(() => {
setTabId("");
}, []);
const navigate = useNavigate();
useEffect(() => {
setTabId("");
}, []);
const navigate = useNavigate();
return (
<div className="w-full h-full flex overflow-auto flex-col bg-muted px-16">
<div className="w-full flex justify-between py-12 pb-2 px-6">
<span className="text-2xl flex items-center justify-center gap-2 font-semibold">
<Home className="w-6" />
<div className={`${ COLUMN_DIV_STYLE }`} >
<div className={`${ NAV_DISPLAY_STYLE }`}>
<span className=" text-2xl flex items-center justify-center gap-2 font-semibold ">
<Home className=" w-6 " />
My Projects
</span>
<div className="flex gap-2">
<div className="hi flex gap-2">
<Button
variant="primary"
onClick={() => {