@customafk/lunas-ui 0.0.21 → 0.0.23

package/packages/components/data-display/country.tsx

@@ -1,31 +1,29 @@
-import React from "react";
-import ReactCountryFlag from "react-country-flag";
+import React from 'react'
+import ReactCountryFlag from 'react-country-flag'
 
-import { ECountry } from "@/types";
+import { ECountry } from '@/types'
 
-import { Flex } from "../layouts/flex";
-import { Paragraph } from "../typography/paragraph";
+import { Flex } from '../layouts/flex'
+import { Paragraph } from '../typography/paragraph'
 
 type Props = {
-  country?: ECountry | null;
-};
-export const CountryDisplay: React.FC<React.PropsWithChildren<Props>> = ({
-  country,
-}) => {
+  country?: ECountry | null
+}
+export const CountryDisplay: React.FC<React.PropsWithChildren<Props>> = ({ country }) => {
   const code = React.useMemo(() => {
     return {
-      [ECountry.VIETNAM]: "VN",
-      [ECountry.USA]: "US",
-      [ECountry.JAPAN]: "JP",
-      [ECountry.CHINA]: "CN",
-      [ECountry.KOREA]: "KR",
-      [ECountry.SINGAPORE]: "SG",
-      [ECountry.MALAYSIA]: "MY",
-      [ECountry.INDONESIA]: "ID",
-      [ECountry.TAIWAN]: "TW",
-      [ECountry.THAILAND]: "TH",
-    };
-  }, []);
+      [ECountry.VIETNAM]: 'VN',
+      [ECountry.USA]: 'US',
+      [ECountry.JAPAN]: 'JP',
+      [ECountry.CHINA]: 'CN',
+      [ECountry.KOREA]: 'KR',
+      [ECountry.SINGAPORE]: 'SG',
+      [ECountry.MALAYSIA]: 'MY',
+      [ECountry.INDONESIA]: 'ID',
+      [ECountry.TAIWAN]: 'TW',
+      [ECountry.THAILAND]: 'TH',
+    }
+  }, [])
   if (!country) {
     return (
       <Flex padding="none" className="h-4 px-1">
@@ -33,27 +31,23 @@ export const CountryDisplay: React.FC<React.PropsWithChildren<Props>> = ({
           No country
         </Paragraph>
       </Flex>
-    );
+    )
   }
   return (
     <Flex padding="none" className="h-4 px-1">
-      <ReactCountryFlag
-        svg
-        countryCode={country ? code[country] : "VN"}
-        className="emojiFlag border"
-      />
+      <ReactCountryFlag svg countryCode={country ? code[country] : 'VN'} className="emojiFlag border" />
       <Paragraph variant="sm">
-        {country === ECountry.VIETNAM && "Vietnam"}
-        {country === ECountry.USA && "America"}
-        {country === ECountry.JAPAN && "Japan"}
-        {country === ECountry.CHINA && "China"}
-        {country === ECountry.KOREA && "Korea"}
-        {country === ECountry.SINGAPORE && "Singapore"}
-        {country === ECountry.MALAYSIA && "Malaysia"}
-        {country === ECountry.INDONESIA && "Indonesia"}
-        {country === ECountry.TAIWAN && "Taiwan"}
-        {country === ECountry.THAILAND && "Thailand"}
+        {country === ECountry.VIETNAM && 'Vietnam'}
+        {country === ECountry.USA && 'America'}
+        {country === ECountry.JAPAN && 'Japan'}
+        {country === ECountry.CHINA && 'China'}
+        {country === ECountry.KOREA && 'Korea'}
+        {country === ECountry.SINGAPORE && 'Singapore'}
+        {country === ECountry.MALAYSIA && 'Malaysia'}
+        {country === ECountry.INDONESIA && 'Indonesia'}
+        {country === ECountry.TAIWAN && 'Taiwan'}
+        {country === ECountry.THAILAND && 'Thailand'}
       </Paragraph>
     </Flex>
-  );
-};
+  )
+}

package/packages/components/data-display/data-list.tsx

@@ -1,38 +1,29 @@
-import React from "react";
-
-import { Flex } from "../layouts/flex";
+import { Flex } from '@/components/layouts/flex'
 
 type DataListProps = {
-  title?: string;
-};
-export const DataList: React.FC<React.PropsWithChildren<DataListProps>> = ({
-  children,
-}) => {
+  title?: string
+}
+export const DataList: React.FC<React.PropsWithChildren<DataListProps>> = ({ children }) => {
   return (
     <Flex vertical padding="none" gap="md" width="full">
       {children}
     </Flex>
-  );
-};
+  )
+}
 
 type DataListItemProps = {
-  label: string;
-  value: string | number | React.ReactNode;
-  minLabelWidth?: string;
-};
+  label: string
+  value: string | number | React.ReactNode
+  minLabelWidth?: string
+}
 
-export const DataListItem: React.FC<
-  React.PropsWithChildren<DataListItemProps>
-> = ({ label, value, minLabelWidth = "120px" }) => {
+export const DataListItem: React.FC<React.PropsWithChildren<DataListItemProps>> = ({ label, value, minLabelWidth = '120px' }) => {
   return (
     <Flex align="center" justify="start" width="full" padding="none" gap="md">
-      <div
-        style={{ minWidth: minLabelWidth }}
-        className="text-muted-foreground text-sm"
-      >
+      <div style={{ minWidth: minLabelWidth }} className="text-text-positive-weak text-sm">
         {label}
       </div>
-      <div className="text-secondary-foreground text-sm">{value}</div>
+      <div className="text-text-positive text-sm">{value}</div>
     </Flex>
-  );
-};
+  )
+}

package/packages/components/data-display/date-tooltip.tsx

@@ -1,37 +1,23 @@
-import { DateDisplay } from "./date";
-import { Badge } from "../ui/badge";
-import {
-  Tooltip,
-  TooltipContent,
-  TooltipProvider,
-  TooltipTrigger,
-} from "../ui/tooltip";
+import { DateDisplay } from './date'
+import { Badge } from '../ui/badge'
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '../ui/tooltip'
 
 type Props = {
-  date: Date | string | number;
-};
+  date: Date | string | number
+}
 export const DateTooltip: React.FC<Props> = ({ date }) => {
   return (
     <TooltipProvider>
       <Tooltip>
         <TooltipTrigger asChild>
           <Badge>
-            <DateDisplay
-              date={date}
-              format="medium"
-              className="font-normal text-white"
-            />
+            <DateDisplay date={date} format="medium" className="font-normal text-white" />
           </Badge>
         </TooltipTrigger>
         <TooltipContent>
-          <DateDisplay
-            date={date}
-            format="full"
-            showTime
-            className="text-secondary !font-[Inter] font-medium"
-          />
+          <DateDisplay date={date} format="full" showTime className="text-secondary !font-[Inter] font-medium" />
         </TooltipContent>
       </Tooltip>
     </TooltipProvider>
-  );
-};
+  )
+}

package/packages/components/data-display/date.tsx

@@ -1,215 +1,157 @@
-import React from "react";
-import {
-  format,
-  isThisMonth,
-  isThisWeek,
-  isThisYear,
-  isToday,
-  isTomorrow,
-  isValid,
-  isYesterday,
-  parseISO,
-} from "date-fns";
-
-import {
-  TIME_IN_SECONDS,
-  vietnameseHolidays,
-  vietnameseLocale,
-} from "@/constants";
-import { cn } from "@/lib/utils";
+import React from 'react'
+import { format, isThisMonth, isThisWeek, isThisYear, isToday, isTomorrow, isValid, isYesterday, parseISO } from 'date-fns'
+
+import { TIME_IN_SECONDS, vietnameseHolidays, vietnameseLocale } from '@/constants'
+import { cn } from '@/lib/utils'
 
 interface Props {
-  date: Date | string | number;
+  date: Date | string | number
   format?:
-    | "short" // 15/03/24
-    | "medium" // 15/03/2024
-    | "long" // 15 tháng 3, 2024
-    | "full" // Thứ Sáu, ngày 15 tháng 3 năm 2024
-    | "relative" // 2 giờ trước
-    | "datetime" // 15/03/2024 14:30
-    | "time" // 14:30
-    | "smart"; // Tự động chọn format phù hợp
-  showHoliday?: boolean;
-  showTime?: boolean;
-  className?: string;
-  title?: string; // Tooltip khi hover
+    | 'short' // 15/03/24
+    | 'medium' // 15/03/2024
+    | 'long' // 15 tháng 3, 2024
+    | 'full' // Thứ Sáu, ngày 15 tháng 3 năm 2024
+    | 'relative' // 2 giờ trước
+    | 'datetime' // 15/03/2024 14:30
+    | 'time' // 14:30
+    | 'smart' // Tự động chọn format phù hợp
+  showHoliday?: boolean
+  showTime?: boolean
+  className?: string
+  title?: string // Tooltip khi hover
 }
 
-export const DateDisplay: React.FC<Props> = ({
-  date,
-  format: formatType = "medium",
-  showHoliday = false,
-  showTime = false,
-  className = "",
-  title,
-}) => {
+export const DateDisplay: React.FC<Props> = ({ date, format: formatType = 'medium', showHoliday = false, showTime = false, className = '', title }) => {
   const parsedDate = React.useMemo(() => {
     try {
       if (date instanceof Date) {
-        return isValid(date) ? date : null;
+        return isValid(date) ? date : null
       }
-      if (typeof date === "string") {
-        const parsed = parseISO(date);
-        return isValid(parsed) ? parsed : new Date(date);
+      if (typeof date === 'string') {
+        const parsed = parseISO(date)
+        return isValid(parsed) ? parsed : new Date(date)
       }
-      if (typeof date === "number") {
-        const parsed = new Date(date);
-        return isValid(parsed) ? parsed : null;
+      if (typeof date === 'number') {
+        const parsed = new Date(date)
+        return isValid(parsed) ? parsed : null
       }
-      return null;
+      return null
     } catch {
-      return null;
+      return null
     }
-  }, [date]);
+  }, [date])
 
   // Format relative time in Vietnamese
   const formatRelativeTime = React.useCallback((date: Date): string => {
-    const now = new Date();
-    const diffInSeconds = Math.floor((now.getTime() - date.getTime()) / 1000);
-
-    if (diffInSeconds < 60) return "Vừa xong";
-    if (diffInSeconds < 3600)
-      return `${Math.floor(diffInSeconds / TIME_IN_SECONDS.MINUTE)} phút trước`;
-    if (diffInSeconds < 86400)
-      return `${Math.floor(diffInSeconds / TIME_IN_SECONDS.HOUR)} giờ trước`;
-    if (diffInSeconds < 604800)
-      return `${Math.floor(diffInSeconds / TIME_IN_SECONDS.DAY)} ngày trước`;
-    if (diffInSeconds < 2592000)
-      return `${Math.floor(diffInSeconds / TIME_IN_SECONDS.WEEK)} tuần trước`;
-    if (diffInSeconds < 31536000)
-      return `${Math.floor(diffInSeconds / TIME_IN_SECONDS.MONTH)} tháng trước`;
-    return `${Math.floor(diffInSeconds / TIME_IN_SECONDS.YEAR)} năm trước`;
-  }, []);
+    const now = new Date()
+    const diffInSeconds = Math.floor((now.getTime() - date.getTime()) / 1000)
+
+    if (diffInSeconds < 60) return 'Vừa xong'
+    if (diffInSeconds < 3600) return `${Math.floor(diffInSeconds / TIME_IN_SECONDS.MINUTE)} phút trước`
+    if (diffInSeconds < 86400) return `${Math.floor(diffInSeconds / TIME_IN_SECONDS.HOUR)} giờ trước`
+    if (diffInSeconds < 604800) return `${Math.floor(diffInSeconds / TIME_IN_SECONDS.DAY)} ngày trước`
+    if (diffInSeconds < 2592000) return `${Math.floor(diffInSeconds / TIME_IN_SECONDS.WEEK)} tuần trước`
+    if (diffInSeconds < 31536000) return `${Math.floor(diffInSeconds / TIME_IN_SECONDS.MONTH)} tháng trước`
+    return `${Math.floor(diffInSeconds / TIME_IN_SECONDS.YEAR)} năm trước`
+  }, [])
 
   // Vietnamese weekday
-  const getVietnameseWeekday = React.useCallback(
-    (date: Date, short: boolean = false): string => {
-      const dayIndex = date.getDay();
-      return short
-        ? vietnameseLocale.weekdaysShort[dayIndex]
-        : vietnameseLocale.weekdays[dayIndex];
-    },
-    [],
-  );
+  const getVietnameseWeekday = React.useCallback((date: Date, short: boolean = false): string => {
+    const dayIndex = date.getDay()
+    return short ? vietnameseLocale.weekdaysShort[dayIndex] : vietnameseLocale.weekdays[dayIndex]
+  }, [])
 
   // Vietnamese month
-  const getVietnameseMonth = React.useCallback(
-    (date: Date, short: boolean = false): string => {
-      const monthIndex = date.getMonth();
-      return short
-        ? vietnameseLocale.monthsShort[monthIndex]
-        : vietnameseLocale.months[monthIndex];
-    },
-    [],
-  );
+  const getVietnameseMonth = React.useCallback((date: Date, short: boolean = false): string => {
+    const monthIndex = date.getMonth()
+    return short ? vietnameseLocale.monthsShort[monthIndex] : vietnameseLocale.months[monthIndex]
+  }, [])
 
   // Check holiday
   const getHoliday = React.useCallback((date: Date): string | null => {
-    const monthDay = format(date, "MM-dd") as keyof typeof vietnameseHolidays;
-    return vietnameseHolidays[monthDay] || null;
-  }, []);
+    const monthDay = format(date, 'MM-dd') as keyof typeof vietnameseHolidays
+    return vietnameseHolidays[monthDay] || null
+  }, [])
 
   // Smart format - choose appropriate format based on date
   const getSmartFormat = React.useCallback(
     (date: Date): string => {
       if (isToday(date)) {
-        return showTime ? `Hôm nay ${format(date, "HH:mm")}` : "Hôm nay";
+        return showTime ? `Hôm nay ${format(date, 'HH:mm')}` : 'Hôm nay'
       }
       if (isYesterday(date)) {
-        return showTime ? `Hôm qua ${format(date, "HH:mm")}` : "Hôm qua";
+        return showTime ? `Hôm qua ${format(date, 'HH:mm')}` : 'Hôm qua'
       }
       if (isTomorrow(date)) {
-        return showTime ? `Ngày mai ${format(date, "HH:mm")}` : "Ngày mai";
+        return showTime ? `Ngày mai ${format(date, 'HH:mm')}` : 'Ngày mai'
       }
       if (isThisWeek(date)) {
-        const weekday = getVietnameseWeekday(date);
-        return showTime ? `${weekday} ${format(date, "HH:mm")}` : weekday;
+        const weekday = getVietnameseWeekday(date)
+        return showTime ? `${weekday} ${format(date, 'HH:mm')}` : weekday
       }
       if (isThisMonth(date)) {
-        const day = format(date, "d");
-        return showTime
-          ? `${day}/${format(date, "M")} ${format(date, "HH:mm")}`
-          : `${day}/${format(date, "M")}`;
+        const day = format(date, 'd')
+        return showTime ? `${day}/${format(date, 'M')} ${format(date, 'HH:mm')}` : `${day}/${format(date, 'M')}`
       }
       if (isThisYear(date)) {
-        return showTime ? format(date, "d/M HH:mm") : format(date, "d/M");
+        return showTime ? format(date, 'd/M HH:mm') : format(date, 'd/M')
       }
-      return showTime
-        ? format(date, "d/M/yyyy HH:mm")
-        : format(date, "d/M/yyyy");
+      return showTime ? format(date, 'd/M/yyyy HH:mm') : format(date, 'd/M/yyyy')
     },
     [getVietnameseWeekday, showTime],
-  );
+  )
 
   // Main formatting function
   const formatDate = React.useCallback(
     (date: Date, type: string): string => {
-      const timeStr = showTime ? format(date, ", HH:mm") : "";
+      const timeStr = showTime ? format(date, ', HH:mm') : ''
 
       switch (type) {
-        case "short":
-          return format(date, "d/M/yy") + timeStr;
+        case 'short':
+          return format(date, 'd/M/yy') + timeStr
 
-        case "medium":
-          return format(date, "dd/MM/yyyy") + timeStr;
+        case 'medium':
+          return format(date, 'dd/MM/yyyy') + timeStr
 
-        case "long":
-          return (
-            `${format(date, "d")} ${getVietnameseMonth(date)} ${format(date, "yyyy")}` +
-            timeStr
-          );
+        case 'long':
+          return `${format(date, 'd')} ${getVietnameseMonth(date)} ${format(date, 'yyyy')}` + timeStr
 
-        case "full": {
-          const data = `${getVietnameseWeekday(date)}, ngày ${format(date, "d")} ${getVietnameseMonth(date)} năm ${format(date, "yyyy")}`;
-          return data + timeStr;
+        case 'full': {
+          const data = `${getVietnameseWeekday(date)}, ngày ${format(date, 'd')} ${getVietnameseMonth(date)} năm ${format(date, 'yyyy')}`
+          return data + timeStr
         }
 
-        case "relative":
-          return formatRelativeTime(date);
+        case 'relative':
+          return formatRelativeTime(date)
 
-        case "datetime":
-          return format(date, "d/M/yyyy HH:mm");
+        case 'datetime':
+          return format(date, 'd/M/yyyy HH:mm')
 
-        case "time":
-          return format(date, "HH:mm");
+        case 'time':
+          return format(date, 'HH:mm')
 
-        case "smart":
-          return getSmartFormat(date);
+        case 'smart':
+          return getSmartFormat(date)
 
         default:
-          return format(date, "d/M/yyyy") + timeStr;
+          return format(date, 'd/M/yyyy') + timeStr
       }
     },
-    [
-      getSmartFormat,
-      getVietnameseMonth,
-      getVietnameseWeekday,
-      formatRelativeTime,
-      showTime,
-    ],
-  );
+    [getSmartFormat, getVietnameseMonth, getVietnameseWeekday, formatRelativeTime, showTime],
+  )
 
   if (!parsedDate) {
-    return (
-      <span className={cn("text-muted-foreground text-sm", className)}>
-        --/--/----
-      </span>
-    );
+    return <span className={cn('text-muted-foreground text-sm', className)}>--/--/----</span>
   }
 
-  const formattedDate = formatDate(parsedDate, formatType);
-  const holiday = showHoliday ? getHoliday(parsedDate) : null;
-  const displayText = holiday ? `${formattedDate} (${holiday})` : formattedDate;
-  const tooltipTitle =
-    title || format(parsedDate, "EEEE, d MMMM yyyy HH:mm:ss");
+  const formattedDate = formatDate(parsedDate, formatType)
+  const holiday = showHoliday ? getHoliday(parsedDate) : null
+  const displayText = holiday ? `${formattedDate} (${holiday})` : formattedDate
+  const tooltipTitle = title || format(parsedDate, 'EEEE, d MMMM yyyy HH:mm:ss')
 
   return (
-    <time
-      dateTime={parsedDate.toISOString()}
-      className={cn("text-accent-foreground font-number text-sm", className)}
-      title={tooltipTitle}
-    >
+    <time dateTime={parsedDate.toISOString()} className={cn('text-accent-foreground font-number text-sm', className)} title={tooltipTitle}>
       {displayText}
     </time>
-  );
-};
+  )
+}

package/packages/components/data-display/empty.tsx

@@ -1,25 +1,13 @@
-"use client";
-import { PackageOpenIcon } from "lucide-react";
+'use client'
+import { PackageOpenIcon } from 'lucide-react'
 
-import { Flex } from "../layouts/flex";
+import { Flex } from '../layouts/flex'
 
 export const EmptyDisplay = () => {
   return (
-    <Flex
-      vertical
-      justify="center"
-      align="center"
-      gap="sm"
-      className="size-full"
-    >
-      <PackageOpenIcon
-        size={52}
-        strokeWidth={1}
-        className="text-muted-foreground"
-      />
-      <p className="text-muted-foreground text-sm">
-        Không có dữ liệu nào để hiển thị.
-      </p>
+    <Flex vertical justify="center" align="center" gap="sm" className="text-text-positive-muted size-full">
+      <PackageOpenIcon size={52} strokeWidth={1} />
+      <p className="text-sm">Không có dữ liệu nào để hiển thị.</p>
     </Flex>
-  );
-};
+  )
+}

package/packages/components/data-display/name.tsx

@@ -1,15 +1,13 @@
-import React from "react";
+import React from 'react'
 
-import { Paragraph } from "../typography/paragraph";
-import { Tooltip, TooltipContent, TooltipTrigger } from "../ui/tooltip";
+import { Paragraph } from '../typography/paragraph'
+import { Tooltip, TooltipContent, TooltipTrigger } from '../ui/tooltip'
 
 type NameDisplayProps = {
-  name: string;
-};
+  name: string
+}
 
-export const NameDisplay: React.FC<
-  React.PropsWithChildren<NameDisplayProps>
-> = ({ name }) => {
+export const NameDisplay: React.FC<React.PropsWithChildren<NameDisplayProps>> = ({ name }) => {
   return (
     <Tooltip>
       <TooltipTrigger>
@@ -17,9 +15,9 @@ export const NameDisplay: React.FC<
           {name}
         </Paragraph>
       </TooltipTrigger>
-      <TooltipContent className="max-w-80 text-wrap break-keep whitespace-pre-line">
+      <TooltipContent align="start" className="max-w-80 text-wrap break-keep whitespace-pre-line">
         {name}
       </TooltipContent>
     </Tooltip>
-  );
-};
+  )
+}

package/packages/components/data-display/phone-number.tsx

@@ -1,22 +1,14 @@
-import { Tooltip, TooltipContent, TooltipTrigger } from "../ui/tooltip";
+import { Tooltip, TooltipContent, TooltipTrigger } from '../ui/tooltip'
 
-export const PhoneNumberDisplay: React.FC<
-  React.PropsWithChildren<{ value: string }>
-> = ({ value }) => {
+export const PhoneNumberDisplay: React.FC<React.PropsWithChildren<{ value: string }>> = ({ value }) => {
   return (
     <Tooltip>
       <TooltipTrigger asChild>
-        <p className="font-number text-secondary-foreground text-sm">
-          {value.replace(/(\d{3})(\d{3})(\d{4})/, "($1) $2-$3")}
-        </p>
+        <p className="font-number text-secondary-foreground text-sm">{value.replace(/(\d{3})(\d{3})(\d{4})/, '($1) $2-$3')}</p>
       </TooltipTrigger>
-      <TooltipContent>
-        <p>
-          {value
-            .slice(1)
-            .replace(/(\d{2})(\d{3})(\d{4})/, "(00) (+84) ($1) $2-$3")}
-        </p>
+      <TooltipContent align="start">
+        <p>{value.slice(1).replace(/(\d{2})(\d{3})(\d{4})/, '(00) (+84) ($1) $2-$3')}</p>
       </TooltipContent>
     </Tooltip>
-  );
-};
+  )
+}

package/packages/components/data-display/role-badge.tsx

@@ -1,33 +1,29 @@
-import React from "react";
+import React from 'react'
 
-import { ERole } from "@/types";
+import { ERole } from '@/types'
 
-import { Badge } from "../ui/badge";
+import { Badge } from '../ui/badge'
 
 type Props = {
-  status: ERole;
-};
-export const RoleBadge: React.FC<React.PropsWithChildren<Props>> = ({
-  status,
-}) => {
-  const colors = React.useMemo<
-    Record<ERole, React.ComponentProps<typeof Badge>["color"]>
-  >(() => {
+  status: ERole
+}
+export const RoleBadge: React.FC<React.PropsWithChildren<Props>> = ({ status }) => {
+  const colors = React.useMemo<Record<ERole, React.ComponentProps<typeof Badge>['color']>>(() => {
     return {
-      [ERole.ADMIN]: "red",
-      [ERole.SUPER_ADMIN]: "purple",
-      [ERole.MODERATOR]: "indigo",
-      [ERole.STAFF]: "green",
-      [ERole.USER]: "blue",
-    };
-  }, []);
+      [ERole.ADMIN]: 'red',
+      [ERole.SUPER_ADMIN]: 'purple',
+      [ERole.MODERATOR]: 'indigo',
+      [ERole.STAFF]: 'green',
+      [ERole.USER]: 'blue',
+    }
+  }, [])
   return (
     <Badge color={colors[status]} className="min-w-24 justify-center">
-      {status === ERole.SUPER_ADMIN && "Super Admin"}
-      {status === ERole.ADMIN && "Admin"}
-      {status === ERole.MODERATOR && "Moderator"}
-      {status === ERole.STAFF && "Staff"}
-      {status === ERole.USER && "User"}
+      {status === ERole.SUPER_ADMIN && 'Super Admin'}
+      {status === ERole.ADMIN && 'Admin'}
+      {status === ERole.MODERATOR && 'Moderator'}
+      {status === ERole.STAFF && 'Staff'}
+      {status === ERole.USER && 'User'}
     </Badge>
-  );
-};
+  )
+}