feat: 修改翻译

apps/user/app/(main)/(content)/(user)/layout.tsx

@@ -7,8 +7,7 @@ import { SidebarLeft } from './sidebar-left';
 
 export default async function DashboardLayout({ children }: { children: React.ReactNode }) {
   const cookieStore = await cookies();
-  const defaultOpen = cookieStore.get('sidebar:state')?.value === 'true';
-
+  const defaultOpen = cookieStore.get('sidebar:state')?.value !== 'false'; // 默认 true，除非明确为 'false'
   return (
     <SidebarProvider className='' defaultOpen={defaultOpen}>
       <SidebarLeft className='w-[288px] border-r-0 bg-transparent lg:flex' />

apps/user/app/auth/LoginDialogContext.tsx

@@ -1,8 +1,6 @@
 'use client';
 import EmailAuthForm from '@/app/auth/email/auth-form';
-import CloseSvg from '@/components/CustomIcon/icons/close.svg';
 import { Dialog, DialogContent, DialogTitle } from '@workspace/airo-ui/components/dialog';
-import Image from 'next/image';
 import {
   createContext,
   forwardRef,
@@ -66,11 +64,7 @@ const LoginDialog = forwardRef<LoginDialogRef>((props, ref) => {
 
   return (
     <Dialog open={open} onOpenChange={setOpen}>
-      <DialogContent
-        className='rounded-0 h-full w-full px-12 py-[4.5rem] sm:h-auto sm:w-[496px] sm:!rounded-[50px]'
-        closeIcon={<Image src={CloseSvg} alt='close' />}
-        closeClassName='right-[40px] top-[30px] font-bold text-black opacity-100 focus:ring-0 focus:ring-offset-0'
-      >
+      <DialogContent className='rounded-0 h-full w-full px-12 py-[4.5rem] sm:h-auto sm:w-[496px] sm:!rounded-[50px]'>
         <DialogTitle className='sr-only'>Login</DialogTitle>
         <div className='min-h-[524px]'>
           <EmailAuthForm hide={hide} isRedirect={isRedirect} />

apps/user/components/SvgIcon.tsx

@@ -1,3 +1,4 @@
+'use client';
 import { useEffect, useState } from 'react';
 
 const SvgIcon = ({ name, ...props }) => {
@@ -6,7 +7,7 @@ const SvgIcon = ({ name, ...props }) => {
   useEffect(() => {
     let isMounted = true;
 
-    import(`public/svg-icon/${name}.svg`)
+    import(`@/assets/svg-icon/${name}.svg`)
       .then((module) => {
         if (isMounted) {
           setIcon(() => module.default);

apps/user/components/main/HomeContent.tsx

@@ -1,21 +1,23 @@
 'use client';
 
 import { Button } from '@workspace/airo-ui/components/button';
+import { useTranslations } from 'next-intl';
 import { useRef } from 'react';
 import OfferDialog, { OfferDialogRef } from './OfferDialog/index';
 
 export default function HomeContent() {
   const dialogRef = useRef<OfferDialogRef>(null);
+  const t = useTranslations('components.home');
 
   return (
     <div className='flex min-h-[calc(100vh-73px)] flex-col items-center justify-center pt-8'>
       {/* 大标题 */}
       <h1 className='mb-6 self-start text-4xl font-bold !leading-tight text-white sm:mb-10 sm:self-center sm:text-6xl'>
-        连接
+        {t('connect')}
         <br />
-        任何时间
+        {t('anytime')}
         <br />
-        任何地点
+        {t('anywhere')}
       </h1>
       {/* 副标题 */}
       <div className='mb-12 text-left text-[17px] leading-normal text-white sm:mb-16 sm:text-center sm:font-bold'>
@@ -23,16 +25,16 @@ export default function HomeContent() {
           <span className='mr-2 text-white'>
             Airo<sup className='text-[8px]'>™</sup>Port
           </span>
-          <span>提供极稳，极简，极速的网络服务</span>
+          <span>{t('serviceSlogan')}</span>
         </p>
-        <p className={'mt-1 w-[255px] sm:mt-0 sm:w-full'}>获取订阅地址，开始顶级的私密网络体验</p>
+        <p className={'mt-1 w-[255px] sm:mt-0 sm:w-full'}>{t('getSubscription')}</p>
       </div>
       {/* 按钮 */}
       <Button
         onClick={() => dialogRef.current?.show()}
         className='mb-8 h-auto rounded-full border-2 border-white bg-white/10 px-8 py-2 text-lg font-bold text-white transition hover:bg-white/25 sm:py-4 sm:text-2xl'
       >
-        查看订阅套餐
+        {t('viewSubscriptionPlans')}
       </Button>
 
       <OfferDialog ref={dialogRef} />

apps/user/components/main/OfferDialog/TabContent.tsx

@@ -1,3 +1,4 @@
+import { useTranslations } from 'next-intl';
 import React from 'react';
 import { PlanList } from './index';
 import { ProcessedPlanData } from './types';
@@ -23,6 +24,7 @@ export const TabContent: React.FC<TabContentProps> = ({
   onSubscribe,
   firstPlanCardRef,
 }) => {
+  const t = useTranslations('components.offerDialog');
   return (
     <div>
       {tabValue === 'year' && (
@@ -32,7 +34,7 @@ export const TabContent: React.FC<TabContentProps> = ({
           tabValue={tabValue}
           error={error}
           onRetry={onRetry}
-          emptyMessage='暂无年付套餐'
+          emptyMessage={t('noYearlyPlan')}
           onSubscribe={onSubscribe}
           firstPlanCardRef={firstPlanCardRef}
         />
@@ -44,7 +46,7 @@ export const TabContent: React.FC<TabContentProps> = ({
           isLoading={isLoading}
           error={error}
           onRetry={onRetry}
-          emptyMessage='暂无月付套餐'
+          emptyMessage={t('noMonthlyPlan')}
           onSubscribe={onSubscribe}
           firstPlanCardRef={firstPlanCardRef}
         />

apps/user/components/main/OfferDialog/index.tsx

@@ -1,11 +1,9 @@
-import CloseSvg from '@/components/CustomIcon/icons/close.svg';
 import { getSubscription } from '@/services/user/portal';
 import { useQuery } from '@tanstack/react-query';
 import { Dialog, DialogContent, DialogTitle } from '@workspace/airo-ui/components/dialog';
 import { ScrollArea } from '@workspace/airo-ui/components/scroll-area';
 import { Tabs, TabsList, TabsTrigger } from '@workspace/airo-ui/components/tabs';
 import { unitConversion } from '@workspace/airo-ui/utils';
-import Image from 'next/image';
 import {
   forwardRef,
   useCallback,
@@ -20,25 +18,31 @@ import { TabContent } from './TabContent';
 import { ProcessedPlanData } from './types';
 
 // 加载状态组件
-const LoadingState = () => (
-  <div className='py-12 text-center'>
-    <div className='mx-auto h-12 w-12 animate-spin rounded-full border-b-2 border-[#0F2C53]'></div>
-    <p className='mt-4 text-gray-600'>加载中...</p>
-  </div>
-);
+const LoadingState = () => {
+  const t = useTranslations('components.offerDialog');
+  return (
+    <div className='py-12 text-center'>
+      <div className='mx-auto h-12 w-12 animate-spin rounded-full border-b-2 border-[#0F2C53]'></div>
+      <p className='mt-4 text-gray-600'>{t('loading')}</p>
+    </div>
+  );
+};
 
 // 错误状态组件
-const ErrorState = ({ onRetry }: { onRetry: () => void }) => (
-  <div className='py-12 text-center'>
-    <p className='text-lg text-red-500'>加载失败，请重试</p>
-    <button
-      onClick={onRetry}
-      className='mt-4 rounded-lg bg-[#0F2C53] px-6 py-2 text-white transition-colors hover:bg-[#0A2C47]'
-    >
-      重新加载
-    </button>
-  </div>
-);
+const ErrorState = ({ onRetry }: { onRetry: () => void }) => {
+  const t = useTranslations('components.offerDialog');
+  return (
+    <div className='py-12 text-center'>
+      <p className='text-lg text-red-500'>{t('loadFailed')}</p>
+      <button
+        onClick={onRetry}
+        className='mt-4 rounded-lg bg-[#0F2C53] px-6 py-2 text-white transition-colors hover:bg-[#0A2C47]'
+      >
+        {t('reload')}
+      </button>
+    </div>
+  );
+};
 
 // 空状态组件
 const EmptyState = ({ message }: { message: string }) => (
@@ -48,34 +52,41 @@ const EmptyState = ({ message }: { message: string }) => (
 );
 
 // 价格显示组件
-const PriceDisplay = ({ plan }: { plan: ProcessedPlanData }) => (
-  <div className='mb-2 sm:mb-4'>
-    <div className='mb-1 flex items-baseline gap-2'>
-      {plan.origin_price && (
-        <span className='text-2xl font-bold leading-[1.125em] text-[#666666] line-through'>
-          ${plan.origin_price}
+const PriceDisplay = ({ plan }: { plan: ProcessedPlanData }) => {
+  const t = useTranslations('components.offerDialog');
+  return (
+    <div className='mb-2 sm:mb-4'>
+      <div className='mb-1 flex items-baseline gap-2'>
+        {plan.origin_price && (
+          <span className='text-2xl font-bold leading-[1.125em] text-[#666666] line-through'>
+            ${plan.origin_price}
+          </span>
+        )}
+        <span className='text-2xl font-bold leading-[1.125em] text-[#091B33]'>
+          ${plan.discount_price}
         </span>
+        <span className='text-sm font-normal leading-[1.8em] text-[#4D4D4D] sm:text-[15px]'>
+          {t('perYear')}
+        </span>
+      </div>
+      {plan.origin_price && (
+        <p className='text-left text-[10px] font-normal text-black'>{t('yearlyDiscount')}</p>
       )}
-      <span className='text-2xl font-bold leading-[1.125em] text-[#091B33]'>
-        ${plan.discount_price}
-      </span>
-      <span className='text-sm font-normal leading-[1.8em] text-[#4D4D4D] sm:text-[15px]'>/年</span>
     </div>
-    {plan.origin_price && (
-      <p className='text-left text-[10px] font-normal text-black'>年付享受8折优惠</p>
-    )}
-  </div>
-);
+  );
+};
 
 import { useLoginDialog } from '@/app/auth/LoginDialogContext';
 import { Display } from '@/components/display';
 import Purchase from '@/components/subscribe/purchase';
 import useGlobalStore from '@/config/use-global';
 import { useTranslations } from 'next-intl';
+
 // 订阅按钮组件
 const SubscribeButton = ({ onClick }: { onClick?: () => void }) => {
   const { user } = useGlobalStore();
   const { openLoginDialog } = useLoginDialog();
+  const t = useTranslations('components.offerDialog');
 
   function handleClick() {
     console.log('click', user);
@@ -92,7 +103,7 @@ const SubscribeButton = ({ onClick }: { onClick?: () => void }) => {
       onClick={handleClick}
       className='h-10 w-full rounded-full bg-[#0F2C53] text-sm font-medium text-white shadow-md transition-all duration-300 hover:bg-[#225BA9] sm:h-10 sm:text-sm md:h-[40px] md:text-[14px]'
     >
-      订阅
+      {t('subscribe')}
     </button>
   );
 };
@@ -111,7 +122,8 @@ const StarRating = ({ rating, maxRating = 5 }: { rating: number; maxRating?: num
 // 功能列表组件
 const FeatureList = ({ plan }: { plan: ProcessedPlanData }) => {
   const t = useTranslations('subscribe.detail');
-  const features = [{ label: '可用节点', value: plan.features?.nodes || '11' }];
+  const tOffer = useTranslations('components.offerDialog');
+  const features = [{ label: tOffer('availableNodes'), value: plan.features?.nodes || '11' }];
 
   return (
     <div className='mt-6 space-y-0 sm:mt-6'>
@@ -154,7 +166,7 @@ const FeatureList = ({ plan }: { plan: ProcessedPlanData }) => {
         <li className='py-1'>
           <div className={'flex items-start justify-between'}>
             <span className='text-xs font-light leading-[1.8461538461538463em] text-black sm:text-[13px]'>
-              网络稳定指数:
+              {tOffer('networkStabilityIndex')}
             </span>
             <StarRating rating={plan.features?.stability || 4} />
           </div>
@@ -246,6 +258,7 @@ export interface OfferDialogRef {
 }
 
 const OfferDialog = forwardRef<OfferDialogRef>((props, ref) => {
+  const t = useTranslations('components.offerDialog');
   const [open, setOpen] = useState(false);
   const [tabValue, setTabValue] = useState('year');
   const [selectedPlan, setSelectedPlan] = useState<ProcessedPlanData | null>(null);
@@ -379,17 +392,13 @@ const OfferDialog = forwardRef<OfferDialogRef>((props, ref) => {
       <DialogContent
         ref={dialogRef}
         className='rounded-0 !container h-full w-full gap-0 px-8 py-8 sm:h-auto sm:!rounded-[32px] sm:px-12 sm:py-12 md:w-[1000px]'
-        closeIcon={<Image src={CloseSvg} alt={'close'} />}
-        closeClassName={
-          'right-6 top-6 font-bold text-black opacity-100 focus:ring-0 focus:ring-offset-0'
-        }
       >
         <DialogTitle className={'sr-only'}></DialogTitle>
         <div className={'text-4xl font-bold text-[#0F2C53] md:mb-4 md:text-center md:text-5xl'}>
-          选择套餐
+          {t('selectPlan')}
         </div>
         <div className={'text-lg font-medium text-[#666666] md:text-center'}>
-          选择最适合您的服务套餐
+          {t('selectYourPlan')}
         </div>
         <div>
           <Tabs
@@ -421,7 +430,7 @@ const OfferDialog = forwardRef<OfferDialogRef>((props, ref) => {
                 }
                 value='year'
               >
-                年付套餐
+                {t('yearlyPlan')}
               </TabsTrigger>
               <TabsTrigger
                 className={
@@ -429,7 +438,7 @@ const OfferDialog = forwardRef<OfferDialogRef>((props, ref) => {
                 }
                 value='month'
               >
-                月付套餐
+                {t('monthlyPlan')}
               </TabsTrigger>
             </TabsList>
           </Tabs>

apps/user/components/subscribe/billing.tsx

@@ -1,79 +1,49 @@
 'use client';
 
-import { Display } from '@/components/display';
-import { Separator } from '@workspace/airo-ui/components/separator';
+import { Card, CardContent, CardHeader, CardTitle } from '@workspace/ui/components/card';
+import { Separator } from '@workspace/ui/components/separator';
 import { useTranslations } from 'next-intl';
 
-interface SubscribeBillingProps {
-  order?: Partial<
-    API.OrderDetail & {
-      unit_price: number;
-      unit_time: number;
-      subscribe_discount: number;
-    }
-  >;
-}
-
-export function SubscribeBilling({ order }: Readonly<SubscribeBillingProps>) {
-  const t = useTranslations('subscribe');
-
+export function SubscribeBilling({ order }: { order: API.Order }) {
+  const t = useTranslations('subscribe.billing');
+  const t_c = useTranslations('components.billing');
   return (
-    <>
-      <div className='mb-1 font-semibold text-[#225BA9]'>{t('billing.billingTitle')}</div>
-      <ul className='grid grid-cols-1 gap-1 text-[15px] font-light text-[#666] *:flex *:items-center *:justify-between lg:grid-cols-1'>
-        <li>
-          <span className=''>套餐时长</span>
-          <span>
-            {order?.quantity === 1 ? '30天' : ''}
-            {order?.quantity === 12 ? '365天' : ''}
-          </span>
-        </li>
-        {order?.type && [1, 2].includes(order?.type) && (
-          <li>
-            <span className=''>{t('billing.duration')}</span>
-            <span>
-              {order?.quantity || 1} {t(order?.unit_time || 'Month')}
+    <Card>
+      <CardHeader>
+        <CardTitle>{t('billingTitle')}</CardTitle>
+      </CardHeader>
+      <CardContent>
+        <div className={'grid gap-4'}>
+          <div className={'flex items-center justify-between'}>
+            <span className={'text-muted-foreground'}>{t('productDiscount')}</span>
+            <span className={''}>-¥ {order?.discount_amount}</span>
+          </div>
+          <div className={'flex items-center justify-between'}>
+            <span className={'text-muted-foreground'}>{t('couponDiscount')}</span>
+            <span className={''}>-¥ {order?.coupon_discount_amount}</span>
+          </div>
+          <div className={'flex items-center justify-between'}>
+            <span className={'text-muted-foreground'}>{t_c('planDuration')}</span>
+            <span className={''}>
+              {order?.quantity === 1 ? t_c('30days') : ''}
+              {order?.quantity === 12 ? t_c('365days') : ''}
             </span>
-          </li>
-        )}
-        <li>
-          <span className=''>{t('billing.price')}</span>
-          <span>
-            <Display type='currency' value={order?.price || order?.unit_price} />
-          </span>
-        </li>
-        <li>
-          <span className=''>{t('billing.productDiscount')}</span>
-          <span>
-            <Display type='currency' value={order?.discount} />
-          </span>
-        </li>
-        <li>
-          <span className=''>{t('billing.couponDiscount')}</span>
-          <span>
-            <Display type='currency' value={order?.coupon_discount} />
-          </span>
-        </li>
-        <li>
-          <span className='text-muted-foreground'>{t('billing.fee')}</span>
-          <span>
-            <Display type='currency' value={order?.fee_amount} />
-          </span>
-        </li>
-        <li>
-          <span className='text-muted-foreground'>{t('billing.gift')}</span>
-          <span>
-            <Display type='currency' value={order?.gift_amount} />
-          </span>
-        </li>
-      </ul>
-      <Separator className={'mb-3 mt-4 bg-[#225BA9]'} />
-      <div className='flex items-center justify-between font-semibold text-[#666]'>
-        <span className=''>支付金额</span>
-        <span>
-          <Display type='currency' value={order?.amount} />
-        </span>
-      </div>
-    </>
+          </div>
+          <div className={'flex items-center justify-between'}>
+            <span className={'text-muted-foreground'}>{t('gift')}</span>
+            <span className={''}>-¥ {order?.gift_balance_deduction_amount}</span>
+          </div>
+          <div className={'flex items-center justify-between'}>
+            <span className={'text-muted-foreground'}>{t('fee')}</span>
+            <span className={''}>¥ {order?.fee}</span>
+          </div>
+          <Separator />
+          <div className={'flex items-center justify-between font-medium'}>
+            <span className={'text-muted-foreground'}>{t('total')}</span>
+            <span className={''}>¥ {order?.total_amount}</span>
+          </div>
+        </div>
+      </CardContent>
+    </Card>
   );
 }

apps/user/components/user-nav.tsx

@@ -10,6 +10,7 @@ import {
   DropdownMenuItem,
   DropdownMenuTrigger,
 } from '@workspace/airo-ui/components/dropdown-menu';
+import { useSidebar } from '@workspace/airo-ui/components/sidebar';
 import { Icon } from '@workspace/airo-ui/custom-components/icon';
 import { useIsMobile } from '@workspace/airo-ui/hooks/use-mobile';
 import { useTranslations } from 'next-intl';
@@ -20,7 +21,7 @@ export function UserNav({ from = '' }: { from?: string }) {
   const { user, setUser } = useGlobalStore();
   const router = useRouter();
   const pathname = usePathname();
-  // const { toggleSidebar } = useSidebar();
+  const { toggleSidebar } = useSidebar();
   const isMobile = useIsMobile();
   if (user) {
     return (
@@ -97,7 +98,7 @@ export function UserNav({ from = '' }: { from?: string }) {
               data-active={pathname === item.url}
               onClick={() => {
                 if (pathname === item.url) return;
-                /* toggleSidebar();*/
+                toggleSidebar();
                 router.push(`${item.url}`);
               }}
               className='flex cursor-pointer items-center gap-3 rounded-full bg-white px-5 py-2 text-base font-medium focus:bg-[#0F2C53] focus:text-white data-[active=true]:bg-[#0F2C53] data-[active=true]:text-white md:text-xl'

apps/user/locales/en-US/components.json

@@ -0,0 +1,36 @@
+{
+  "billing": {
+    "planDuration": "Plan Duration",
+    "30days": "30 Days",
+    "365days": "365 Days",
+    "paymentAmount": "Payment Amount"
+  },
+  "home": {
+    "connect": "Connect",
+    "anytime": "Anytime",
+    "anywhere": "Anywhere",
+    "serviceSlogan": "Providing extremely stable, simple, and fast network services",
+    "getSubscription": "Get your subscription URL and start your premium private network experience",
+    "viewSubscriptionPlans": "View Subscription Plans"
+  },
+  "language": {
+    "japanese": "日本語",
+    "simplifiedChinese": "Simplified Chinese"
+  },
+  "offerDialog": {
+    "loading": "Loading...",
+    "loadFailed": "Failed to load, please try again",
+    "reload": "Reload",
+    "perYear": "/year",
+    "yearlyDiscount": "Enjoy a 20% discount on annual payment",
+    "subscribe": "Subscribe",
+    "availableNodes": "Available Nodes",
+    "networkStabilityIndex": "Network Stability Index:",
+    "selectPlan": "Select Plan",
+    "selectYourPlan": "Select the service plan that suits you best",
+    "yearlyPlan": "Yearly Plan",
+    "monthlyPlan": "Monthly Plan",
+    "noYearlyPlan": "No yearly plans available",
+    "noMonthlyPlan": "No monthly plans available"
+  }
+}

apps/user/locales/request.ts

@@ -24,6 +24,7 @@ export default getRequestConfig(async () => {
     ticket: (await import(`./${locale}/ticket.json`)).default,
     document: (await import(`./${locale}/document.json`)).default,
     affiliate: (await import(`./${locale}/affiliate.json`)).default,
+    components: (await import(`./${locale}/components.json`)).default,
   };
 
   return {

apps/user/locales/zh-CN/components.json

@@ -0,0 +1,36 @@
+{
+  "billing": {
+    "planDuration": "套餐时长",
+    "30days": "30天",
+    "365days": "365天",
+    "paymentAmount": "支付金额"
+  },
+  "home": {
+    "connect": "连接",
+    "anytime": "任何时间",
+    "anywhere": "任何地点",
+    "serviceSlogan": "提供极稳，极简，极速的网络服务",
+    "getSubscription": "获取订阅地址，开始顶级的私密网络体验",
+    "viewSubscriptionPlans": "查看订阅套餐"
+  },
+  "language": {
+    "japanese": "日本語",
+    "simplifiedChinese": "简体中文"
+  },
+  "offerDialog": {
+    "loading": "加载中...",
+    "loadFailed": "加载失败，请重试",
+    "reload": "重新加载",
+    "perYear": "/年",
+    "yearlyDiscount": "年付享受8折优惠",
+    "subscribe": "订阅",
+    "availableNodes": "可用节点",
+    "networkStabilityIndex": "网络稳定指数:",
+    "selectPlan": "选择套餐",
+    "selectYourPlan": "选择最适合您的服务套餐",
+    "yearlyPlan": "年付套餐",
+    "monthlyPlan": "月付套餐",
+    "noYearlyPlan": "暂无年付套餐",
+    "noMonthlyPlan": "暂无月付套餐"
+  }
+}

apps/user/next.config.ts

@@ -21,9 +21,34 @@ const nextConfig: NextConfig = {
       },
     ],
   },
+  webpack(config) {
+    // Grab the existing rule that handles SVG imports
+    const fileLoaderRule = config.module.rules.find((rule) => rule.test?.test?.('.svg'));
+
+    config.module.rules.push(
+      // Reapply the existing rule, but only for svg imports ending in ?url
+      {
+        ...fileLoaderRule,
+        test: /\.svg$/i,
+        resourceQuery: /url/, // *.svg?url
+      },
+      // Convert all other *.svg imports to React components
+      {
+        test: /\.svg$/i,
+        issuer: fileLoaderRule.issuer,
+        resourceQuery: { not: [...fileLoaderRule.resourceQuery.not, /url/] }, // exclude if *.svg?url
+        use: ['@svgr/webpack'],
+      },
+    );
+
+    // Modify the file loader rule to ignore *.svg, since we have it handled now.
+    fileLoaderRule.exclude = /\.svg$/i;
+
+    return config;
+  },
   turbopack: {
     rules: {
-      './public/svg-icon/*.svg': {
+      '*.svg': {
         loaders: ['@svgr/webpack'],
         as: '*.js',
       },

packages/airo-ui/src/components/dialog.tsx

@@ -3,9 +3,8 @@
 import * as DialogPrimitive from '@radix-ui/react-dialog';
 import * as React from 'react';
 
-import CloseSvg from '@/components/CustomIcon/icons/close.svg';
 import { cn } from '@workspace/airo-ui/lib/utils';
-import Image from 'next/image';
+import CloseSvg from './close.svg';
 
 const Dialog = DialogPrimitive.Root;
 
@@ -50,10 +49,12 @@ const DialogContent = React.forwardRef<
       {children}
       <DialogPrimitive.Close
         className={cn(
-          'ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute right-6 top-6 rounded-sm font-bold text-black opacity-100 transition-opacity hover:opacity-100 focus:outline-none focus:ring-0 focus:ring-offset-0 disabled:pointer-events-none',
+          'ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute right-4 top-6 rounded-sm font-bold text-black opacity-100 transition-opacity hover:opacity-100 focus:outline-none focus:ring-0 focus:ring-offset-0 disabled:pointer-events-none',
         )}
       >
-        <Image src={CloseSvg} alt={'close'} />
+        <div>
+          <CloseSvg />
+        </div>
         <span className='sr-only'>Close</span>
       </DialogPrimitive.Close>
     </DialogPrimitive.Content>