fix: Textの修正

isucon · Dec 4, 2024 · a23f27d · a23f27d
1 parent d2a5734
commit a23f27d
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 14 deletions.
diff --git a/frontend/app/components/modules/simulator-chair-status/simulator-chair-status.tsx b/frontend/app/components/modules/simulator-chair-status/simulator-chair-status.tsx
@@ -1,26 +1,35 @@
 import { ComponentProps, FC } from "react";
 import { twMerge } from "tailwind-merge";
+import colors from "tailwindcss/colors";
 import { RideStatus } from "~/api/api-schemas";
 import { Text } from "~/components/primitives/text/text";
 
 const StatusList = {
-  MATCHING: ["空車", "text-sky-500"],
-  ENROUTE: ["迎車", "text-amber-500"],
-  PICKUP: ["乗車待ち", "text-amber-500"],
-  CARRYING: ["賃走", "text-red-500"],
-  ARRIVED: ["到着", "text-emerald-500"],
-  COMPLETED: ["完了", "text-emerald-500"],
+  MATCHING: ["空車", colors.sky["500"]],
+  ENROUTE: ["迎車", colors.amber["500"]],
+  PICKUP: ["乗車待ち", colors.amber["500"]],
+  CARRYING: ["賃走", colors.red["500"]],
+  ARRIVED: ["到着", colors.emerald["500"]],
+  COMPLETED: ["完了", colors.emerald["500"]],
 } as const;
 
 export const SimulatorChairRideStatus: FC<
   ComponentProps<"div"> & {
     currentStatus: RideStatus;
   }
 > = ({ currentStatus, className, ...props }) => {
-  const [labelName, colorClass] = StatusList[currentStatus];
+  const [labelName, color] = StatusList[currentStatus];
   return (
-    <div className={twMerge("font-bold", colorClass, className)} {...props}>
-      <Text className="before:content-['●'] before:mr-1.5" size="sm">
+    <div
+      className={twMerge("font-bold flex items-center space-x-1", className)}
+      {...props}
+    >
+      <div
+        role="presentation"
+        className="w-3 h-3 rounded-full"
+        style={{ backgroundColor: color }}
+      />
+      <Text size="sm" style={{ color }}>
         {labelName}
       </Text>
     </div>

diff --git a/frontend/app/components/primitives/text/text.tsx b/frontend/app/components/primitives/text/text.tsx
@@ -1,17 +1,20 @@
-import { FC, PropsWithChildren } from "react";
+import { ComponentPropsWithoutRef, FC, PropsWithChildren } from "react";
 import { twMerge } from "tailwind-merge";
 
 type Size = "2xl" | "xl" | "lg" | "sm" | "xs";
 
-type Variant = "danger";
+type Variant = "danger" | "normal";
+
+type Tag = "p" | "span" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6";
 
 type TextProps = PropsWithChildren<{
-  tagName?: "p" | "div" | "span";
+  tagName?: Tag;
   bold?: boolean;
   size?: Size;
   variant?: Variant;
   className?: string;
-}>;
+}> &
+  ComponentPropsWithoutRef<Tag>;
 
 const getSizeClass = (size?: Size) => {
   switch (size) {
@@ -52,7 +55,7 @@ export const Text: FC<TextProps> = ({
   return (
     <Tag
       className={twMerge([
-        bold ? "font-bold" : "",
+        bold && "font-bold",
         getSizeClass(size),
         getVariantClass(variant),
         className,