From 69f62b8f009ed2bbe5bcbb1b94b783aa369de88d Mon Sep 17 00:00:00 2001 From: BFlat Date: Sun, 24 Mar 2024 11:23:17 +0700 Subject: [PATCH] tabs styling --- app/modules/SidePanel/SidePanel.tsx | 97 +++++++--------- app/modules/SidePanel/SidePanelInner.tsx | 54 ++++----- app/modules/Tabs/Tabs.tsx | 55 ++++----- package-lock.json | 23 +++- package.json | 1 + tailwind.config.ts | 136 ++++++++++++----------- 6 files changed, 177 insertions(+), 189 deletions(-) diff --git a/app/modules/SidePanel/SidePanel.tsx b/app/modules/SidePanel/SidePanel.tsx index 085700f34f..1bf4a0cfdf 100644 --- a/app/modules/SidePanel/SidePanel.tsx +++ b/app/modules/SidePanel/SidePanel.tsx @@ -1,67 +1,54 @@ -import { - Fragment, - useState -} from 'react' -import { Dialog, Transition } from '@headlessui/react' -import { - faGears, -} from '@fortawesome/pro-solid-svg-icons'; -import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; +import { Fragment, useState } from "react"; +import { Dialog, Transition } from "@headlessui/react"; +import { faGears } from "@fortawesome/pro-solid-svg-icons"; +import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; -import { Button } from '~/components/Button'; +import { Button } from "~/components/Button"; -import { SidePanelInner } from './SidePanelInner'; +import { SidePanelInner } from "./SidePanelInner"; -interface SidePanelPropsI{ +interface SidePanelPropsI { title?: string; children: React.ReactNode; } -export const SidePanel =({ - title, - children, -}:SidePanelPropsI)=>{ - +export const SidePanel = ({ title, children }: SidePanelPropsI) => { const [open, setOpen] = useState(false); - const handleOpen = ()=> setOpen(true); - const handleClose = ()=>setOpen(false); + const handleOpen = () => setOpen(true); + const handleClose = () => setOpen(false); - return (<> - - - -
+ return ( + <> + + + +
-
-
-
- - - - {children} - - - +
+
+
+ + + + {children} + + + +
-
-
- - ); -} \ No newline at end of file +
+ + + ); +}; diff --git a/app/modules/SidePanel/SidePanelInner.tsx b/app/modules/SidePanel/SidePanelInner.tsx index 260f98f1c7..3112e81c5d 100644 --- a/app/modules/SidePanel/SidePanelInner.tsx +++ b/app/modules/SidePanel/SidePanelInner.tsx @@ -1,35 +1,29 @@ -import { - useCallback, - useLayoutEffect, - useState -} from 'react'; -import { Dialog } from '@headlessui/react' +import { useCallback, useLayoutEffect, useState } from "react"; +import { Dialog } from "@headlessui/react"; -import { - faXmark, -} from '@fortawesome/pro-solid-svg-icons'; -import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; +import { faXmark } from "@fortawesome/pro-solid-svg-icons"; +import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; -import { TOP_BAR_HEIGHT } from '~/constants'; +import { TOP_BAR_HEIGHT } from "~/constants"; export const SidePanelInner = ({ title, children, - closeCallback -}:{ + closeCallback, +}: { title?: string; children: React.ReactNode; - closeCallback: ()=>void; -})=>{ + closeCallback: () => void; +}) => { const [height, setHeight] = useState(0); - const handleWindowResize = useCallback(()=>{ - if(window){ - setHeight (Math.ceil(window.innerHeight * 3 / 4) - TOP_BAR_HEIGHT); + const handleWindowResize = useCallback(() => { + if (window) { + setHeight(Math.ceil((window.innerHeight * 3) / 4) - TOP_BAR_HEIGHT); } return 0; - },[]) + }, []); - useLayoutEffect(()=>{ + useLayoutEffect(() => { handleWindowResize(); window.addEventListener("resize", handleWindowResize); return () => { @@ -37,19 +31,19 @@ export const SidePanelInner = ({ }; }, [handleWindowResize]); - return( + return (
- {!title && } - {title && + {!title && } + {title && ( {title} - } + )}
-
- {children} -
+
{children}
); -} \ No newline at end of file +}; diff --git a/app/modules/Tabs/Tabs.tsx b/app/modules/Tabs/Tabs.tsx index ba5a258bf6..8954db1f37 100644 --- a/app/modules/Tabs/Tabs.tsx +++ b/app/modules/Tabs/Tabs.tsx @@ -1,55 +1,44 @@ -import { useState } from 'react' -import { Tab } from '@headlessui/react' +import { useState } from "react"; +import { Tab } from "@headlessui/react"; +import { twMerge } from "tailwind-merge"; -import { joinClassNames } from '~/helpers'; - -export type Tab = { +export type TabType = { header: string; children: JSX.Element; -} +}; -export const Tabs = ({ - tabs: tabProps -}:{ - tabs:Tab[] -}) =>{ - const [tabs, setTabs] = useState(tabProps); +export const Tabs = ({ tabs: tabProps }: { tabs: TabType[] }) => { + const [tabs] = useState(tabProps); + + const tabHeaderClassName = (selected: boolean) => + twMerge( + "px-4 py-4 text-md font-medium leading-5 focus:outline-none transition duration-150 ease-in-out border-b-[3px] border-white/[.1]", + selected + ? "bg-ui-panel text-white border-brand-primary" + : "text-gray-400 hover:bg-ui-panel hover:text-white hover:border-white/[.2]", + ); return ( -
+
- + {tabs.map((tab, idx) => ( - joinClassNames( - 'w-full rounded-lg py-2.5 text-sm font-medium leading-5', - 'ring-white/60 ring-offset-2 ring-offset-blue-400 focus:outline-none focus:ring-2', - selected - ? 'bg-white text-blue-700 shadow' - : 'text-blue-100 hover:bg-white/[0.12] hover:text-white' - ) - } + className={({ selected }) => tabHeaderClassName(selected)} > {tab.header} ))} - + {tabs.map((tab, idx) => ( - + {tab.children} ))}
- ) -} \ No newline at end of file + ); +}; diff --git a/package-lock.json b/package-lock.json index 3b9da8ebb3..af9fdcb114 100644 --- a/package-lock.json +++ b/package-lock.json @@ -27,6 +27,7 @@ "isbot": "^4.1.0", "react": "^18.2.0", "react-dom": "^18.2.0", + "tailwind-merge": "^2.2.2", "three": "^0.162.0", "uuid": "^9.0.1", "webm-writer": "^1.0.0" @@ -722,10 +723,9 @@ } }, "node_modules/@babel/runtime": { - "version": "7.23.9", - "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.23.9.tgz", - "integrity": "sha512-0CX6F+BI2s9dkUqr08KFrAIZgNFj75rdBU/DjCyYLIaV/quFjkk6T+EJ2LkZHyZTbEV4L5p97mNkUsHl2wLFAw==", - "dev": true, + "version": "7.24.1", + "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.24.1.tgz", + "integrity": "sha512-+BIznRzyqBf+2wCTxcKE3wDjfGeCoVE61KSHGpkzqrLi8qxqFwBeUFyId2cxkTmm55fzDGnm0+yCxaxygrLUnQ==", "dependencies": { "regenerator-runtime": "^0.14.0" }, @@ -10600,8 +10600,7 @@ "node_modules/regenerator-runtime": { "version": "0.14.1", "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.14.1.tgz", - "integrity": "sha512-dYnhHh0nJoMfnkZs6GmmhFknAGRrLznOu5nc9ML+EJxGvrx6H7teuevqVqCuPcPK//3eDrrjQhehXVx9cnkGdw==", - "dev": true + "integrity": "sha512-dYnhHh0nJoMfnkZs6GmmhFknAGRrLznOu5nc9ML+EJxGvrx6H7teuevqVqCuPcPK//3eDrrjQhehXVx9cnkGdw==" }, "node_modules/regexp.prototype.flags": { "version": "1.5.2", @@ -11720,6 +11719,18 @@ "url": "https://github.com/sponsors/ljharb" } }, + "node_modules/tailwind-merge": { + "version": "2.2.2", + "resolved": "https://registry.npmjs.org/tailwind-merge/-/tailwind-merge-2.2.2.tgz", + "integrity": "sha512-tWANXsnmJzgw6mQ07nE3aCDkCK4QdT3ThPMCzawoYA2Pws7vSTCvz3Vrjg61jVUGfFZPJzxEP+NimbcW+EdaDw==", + "dependencies": { + "@babel/runtime": "^7.24.0" + }, + "funding": { + "type": "github", + "url": "https://github.com/sponsors/dcastil" + } + }, "node_modules/tailwindcss": { "version": "3.4.1", "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.4.1.tgz", diff --git a/package.json b/package.json index 471a92f1b6..a40f2b10c2 100644 --- a/package.json +++ b/package.json @@ -33,6 +33,7 @@ "isbot": "^4.1.0", "react": "^18.2.0", "react-dom": "^18.2.0", + "tailwind-merge": "^2.2.2", "three": "^0.162.0", "uuid": "^9.0.1", "webm-writer": "^1.0.0" diff --git a/tailwind.config.ts b/tailwind.config.ts index 4b8ad34260..31e8137280 100644 --- a/tailwind.config.ts +++ b/tailwind.config.ts @@ -1,5 +1,5 @@ -import type { Config } from 'tailwindcss'; -import colors from 'tailwindcss/colors'; +import type { Config } from "tailwindcss"; +import colors from "tailwindcss/colors"; export default { content: [ @@ -8,76 +8,84 @@ export default { "./app/*.{js,jsx,ts,tsx}", ], theme: { - // extend: {}, - colors:{ - transparent: 'transparent', - current: 'currentColor', + extend: { + fontFamily: { + "custom-font": ["Fira Sans", "sans-serif"], + }, + }, + colors: { + transparent: "transparent", + current: "currentColor", - 'brand-primary': { //sunglo - DEFAULT: '#e66462', //=500 - '50': '#fdf3f3', - '100': '#fce4e4', - '200': '#facfce', - '300': '#f6acab', - '400': '#ef7c7a', - '500': '#e66462', - '600': '#cf3533', - '700': '#ae2927', - '800': '#902624', - '900': '#782524', - '950': '#410f0e', + "brand-primary": { + //sunglo + DEFAULT: "#e66462", //=500 + "50": "#fdf3f3", + "100": "#fce4e4", + "200": "#facfce", + "300": "#f6acab", + "400": "#ef7c7a", + "500": "#e66462", + "600": "#cf3533", + "700": "#ae2927", + "800": "#902624", + "900": "#782524", + "950": "#410f0e", }, - 'brand-secondary': { //gunpowder - DEFAULT: '#39394c', //=950 - '50': '#f5f6f9', - '100': '#e8eaf1', - '200': '#d7dbe6', - '300': '#bbc1d5', - '400': '#9aa2c0', - '500': '#8188b0', - '600': '#6f74a1', - '700': '#636492', - '800': '#545579', - '900': '#464762', - '950': '#39394c', + "brand-secondary": { + //gunpowder + DEFAULT: "#39394c", //=950 + "50": "#f5f6f9", + "100": "#e8eaf1", + "200": "#d7dbe6", + "300": "#bbc1d5", + "400": "#9aa2c0", + "500": "#8188b0", + "600": "#6f74a1", + "700": "#636492", + "800": "#545579", + "900": "#464762", + "950": "#39394c", }, - danger: { //copper rust - DEFAULT: '#8f4951', //=700 - '50': '#fbf5f5', - '100': '#f7ecec', - '200': '#efdcdc', - '300': '#e2c0bf', - '400': '#d19b9c', - '500': '#bd7679', - '600': '#a5595f', - '700': '#8f4951', - '800': '#743d45', - '900': '#64373f', - '950': '#361b1e', + danger: { + //copper rust + DEFAULT: "#8f4951", //=700 + "50": "#fbf5f5", + "100": "#f7ecec", + "200": "#efdcdc", + "300": "#e2c0bf", + "400": "#d19b9c", + "500": "#bd7679", + "600": "#a5595f", + "700": "#8f4951", + "800": "#743d45", + "900": "#64373f", + "950": "#361b1e", }, - success:{ //apple - DEFAULT: '#40ad48', //=500 - '50': '#f2fbf2', - '100': '#e2f6e3', - '200': '#c5edc7', - '300': '#98dd9d', - '400': '#64c46b', - '500': '#40ad48', - '600': '#2f8a35', - '700': '#286d2e', - '800': '#245728', - '900': '#1f4823', - '950': '#0c270f', + success: { + //apple + DEFAULT: "#40ad48", //=500 + "50": "#f2fbf2", + "100": "#e2f6e3", + "200": "#c5edc7", + "300": "#98dd9d", + "400": "#64c46b", + "500": "#40ad48", + "600": "#2f8a35", + "700": "#286d2e", + "800": "#245728", + "900": "#1f4823", + "950": "#0c270f", }, - 'ui-background': '#1a1a27', - 'ui-panel': '#242433', - 'ui-panel-border': '#5e6097', + "ui-background": "#1a1a27", + "ui-panel": "#242433", + "ui-panel-border": "#5e6097", gray: colors.gray, - white: colors.white - } + white: colors.white, + }, }, plugins: [], -} satisfies Config \ No newline at end of file +} satisfies Config;