optimized

app/about/page.tsx

@@ -1,5 +1,11 @@
 'use client';
 
+import '@wevisdemo/ui/styles/container.css';
+import '@wevisdemo/ui/styles/paragraph-group.css';
+import '@wevisdemo/ui/styles/button-group.css';
+import '@wevisdemo/ui/styles/button.css';
+import '@wevisdemo/ui/styles/sharer.css';
+import '@wevisdemo/ui/styles/footer.css';
 import WvContainer from '@wevisdemo/ui/react/container';
 import WvParagraphGroup from '@wevisdemo/ui/react/paragraph-group';
 import WvButtonGroup from '@wevisdemo/ui/react/button-group';

app/layout.tsx

@@ -1,5 +1,5 @@
 import type { Metadata } from 'next';
-import '@wevisdemo/ui/styles/index.css';
+import '@wevisdemo/ui/styles/typography.css';
 import '../styles/globals.scss';
 import NavbarApp from '@/components/NavbarApp';
 import { Providers } from './providers';

components/Avatar.tsx

@@ -1,4 +1,4 @@
-import { Tooltip } from '@nextui-org/react';
+import { Tooltip } from '@nextui-org/tooltip';
 import CustomImg from './CustomImg';
 import { twMerge } from 'tailwind-merge';
 import { useBreakpoint } from '@/hooks/useBreakpoint';

components/BarCard.tsx

@@ -1,7 +1,7 @@
 import { TBarChartCard } from '@/models';
 import { twMerge } from 'tailwind-merge';
 import CustomImg from './CustomImg';
-import { useDisclosure } from '@nextui-org/react';
+import { useDisclosure } from '@nextui-org/use-disclosure';
 import { useState } from 'react';
 import BarChartModal from './BarChartModal';
 

components/BarScaled.tsx

@@ -1,7 +1,7 @@
 import { TBarChartCard } from '@/models';
 import { twMerge } from 'tailwind-merge';
 import CustomImg from './CustomImg';
-import { useDisclosure } from '@nextui-org/react';
+import { useDisclosure } from '@nextui-org/use-disclosure';
 import { useState } from 'react';
 import BarChartModal from './BarChartModal';
 

components/ChartGroup.tsx

@@ -3,21 +3,15 @@
 import { TChart } from '@/models';
 import Legends from './Legends';
 import { useChart } from '@/hooks/useChart';
-import {
-  Modal,
-  ModalBody,
-  ModalContent,
-  Popover,
-  PopoverContent,
-  PopoverTrigger,
-  useDisclosure,
-} from '@nextui-org/react';
+import { Modal, ModalBody, ModalContent } from '@nextui-org/modal';
+import { Popover, PopoverContent, PopoverTrigger } from '@nextui-org/popover';
+import { useDisclosure } from '@nextui-org/use-disclosure';
 import CustomImg from './CustomImg';
 import Bracket from './Bracket';
 import { twMerge } from 'tailwind-merge';
 import Avatar from './Avatar';
 import BarStacked from './BarStacked';
-import { last } from 'lodash';
+import last from 'lodash/last';
 import { useEffect, useState } from 'react';
 import BarCard from './BarCard';
 import BarScaled from './BarScaled';

components/NavbarApp.tsx

@@ -1,5 +1,6 @@
 'use client';
 
+import '@wevisdemo/ui/styles/navbar.css';
 import WvNavbar from '@wevisdemo/ui/react/navbar';
 import { usePage } from '@/hooks/usePage';
 import { useSnapshot } from 'valtio';
@@ -9,8 +10,8 @@ import {
   DropdownItem,
   DropdownMenu,
   DropdownTrigger,
-  Navbar,
-} from '@nextui-org/react';
+} from '@nextui-org/dropdown';
+import { Navbar } from '@nextui-org/navbar';
 import { genArrayByNum } from '@/utils/array';
 
 export default function NavbarApp() {

components/SectionPartEnd.tsx

@@ -1,6 +1,7 @@
 'use client';
 
 import BorderBox from './BorderBox';
+import '@wevisdemo/ui/styles/sharer.css';
 import WvSharer from '@wevisdemo/ui/react/sharer';
 
 export default function SectionPartEnd() {

components/SectionTodo.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import { Popover, PopoverContent, PopoverTrigger } from '@nextui-org/react';
+import { Popover, PopoverContent, PopoverTrigger } from '@nextui-org/popover';
 import CustomImg from './CustomImg';
 import IconWithBg from './IconWithBg';
 import ScrollHint from './ScrollHint';
@@ -13,7 +13,7 @@ export default function SectionTodo() {
       name: 'หน้าที่ตรวจสอบกฎหมายให้ตรงตามเงื่อนไขในรัฐธรรมนูญ',
       color: '#6BB8FF',
       icon: '/images/icon_inspect_blue.webp',
-      bg: 'images/bg_inspect.webp',
+      bg: '/images/bg_inspect.webp',
       items: [
         {
           name: 'ตรวจสอบ “ร่างกฎหมาย” ก่อนประกาศใช้',
@@ -37,7 +37,7 @@ export default function SectionTodo() {
       name: 'หน้าที่ตรวจสอบสถาบันทางการเมือง',
       color: '#FFC164',
       icon: '/images/icon_protect_orange.webp',
-      bg: 'images/bg_protect.webp',
+      bg: '/images/bg_protect.webp',
       items: [
         {
           name: 'ตรวจสอบคุณสมบัติและวินิจฉัยสถานะ ของ สส. สว. และคณะรัฐมนตรี',
@@ -61,7 +61,7 @@ export default function SectionTodo() {
       name: 'หน้าที่คุ้มครองสิทธิเสรีภาพของประชาชนและความมั่นคงของรัฐ',
       color: '#E0AEFF',
       icon: '/images/icon_why_purple.webp',
-      bg: 'images/bg_why.webp',
+      bg: '/images/bg_why.webp',
       items: [
         {
           name: ' ให้สิทธิประชาชนยื่นคำร้องเมื่อถูกละเมิดสิทธิหรือเสรีภาพ',
@@ -190,11 +190,8 @@ export default function SectionTodo() {
       <div className="mt-6 grid gap-6 lg:grid-cols-3 lg:gap-8">
         {todoList.map((t) => (
           <div key={t.name}>
-            <div
-              style={{ backgroundImage: `url(${t.bg})` }}
-              className="wv-h8 relative flex h-[200px] items-center justify-center overflow-hidden rounded-md bg-cover font-bold text-black lg:h-[236px]"
-            >
-              <div className="absolute inset-0 bg-white/50"></div>
+            <div className="wv-h8 relative flex h-[200px] items-center justify-center overflow-hidden rounded-md bg-white font-bold text-black lg:h-[236px]">
+              <CustomImg src={t.bg} className="absolute h-full w-full" />
               <div
                 style={{ backgroundColor: t.color }}
                 className="absolute inset-0 mix-blend-screen"

components/SituationDetail.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import { Accordion, AccordionItem } from '@nextui-org/react';
+import { Accordion, AccordionItem } from '@nextui-org/accordion';
 import CustomImg from './CustomImg';
 import { useState } from 'react';
 import { twMerge } from 'tailwind-merge';

components/WhyWhatDetail.tsx

@@ -5,13 +5,9 @@ import IconWithBg from './IconWithBg';
 import PaperBox from './PaperBox';
 import CustomImg from './CustomImg';
 import Quote from './Quote';
-import {
-  Modal,
-  ModalContent,
-  ModalBody,
-  Button,
-  useDisclosure,
-} from '@nextui-org/react';
+import { Modal, ModalContent, ModalBody } from '@nextui-org/modal';
+import { Button } from '@nextui-org/button';
+import { useDisclosure } from '@nextui-org/use-disclosure';
 
 type Props = {};
 

hooks/useChart.tsx

@@ -7,7 +7,8 @@ import {
 } from '@/models';
 import { state } from '@/stores';
 import { filterByKeys } from '@/utils/array';
-import { flatten, throttle } from 'lodash';
+import flatten from 'lodash/flatten';
+import throttle from 'lodash/throttle';
 import { useEffect, useMemo, useState } from 'react';
 import { useSnapshot } from 'valtio';