Merge pull request #608 from isucon/frontend/decolate-city-color

[FE] 街の領域に色を付けるように
isucon · Dec 4, 2024 · 2f5261e · 2f5261e
2 parents ed81bb8 + 8f85f3c
commit 2f5261e
Show file tree

Hide file tree

Showing 3 changed files with 9 additions and 3 deletions.
diff --git a/frontend/app/components/modules/map/map-data.ts b/frontend/app/components/modules/map/map-data.ts
@@ -11,6 +11,7 @@ type Town = {
   name: string;
   image: Image;
   centerCoordinate: Coordinate;
+  color: string;
 };
 
 const CityObjectImages = [
@@ -56,10 +57,12 @@ export const TownList = [
     name: "チェアタウン",
     centerCoordinate: { latitude: 0, longitude: 0 },
     image: { src: "/images/town.svg", width: 500, height: 500 },
+    color: "#FF3600",
   },
   {
     name: "コシカケシティ",
     centerCoordinate: { latitude: 300, longitude: 300 },
     image: { src: "/images/town.svg", width: 500, height: 500 },
+    color: "#0089A2",
   },
 ] satisfies Town[];
diff --git a/frontend/app/components/modules/map/map.tsx b/frontend/app/components/modules/map/map.tsx
@@ -263,7 +263,7 @@ const ChairLayer: FC<{
 const TownLayer = memo(function TownLayer() {
   return (
     <div className="flex w-full h-full absolute top-0 left-0 select-none">
-      {TownList.map(({ centerCoordinate, name, image }) => {
+      {TownList.map(({ centerCoordinate, name, image, color }) => {
         const pos = coordinateToPos(centerCoordinate);
         return (
           <div
@@ -282,12 +282,13 @@ const TownLayer = memo(function TownLayer() {
             >
               <div
                 role="presentation"
-                className="absolute rounded-full bg-neutral-100 bg-opacity-40 border-2 border-neutral-200"
+                className="absolute rounded-full bg-neutral-100 bg-opacity-40 border-4 border-neutral-200"
                 style={{
                   width: image.width + 20,
                   height: image.width + 20,
                   top: -10,
                   left: -10,
+                  borderColor: color,
                 }}
               ></div>
               <img
@@ -300,7 +301,8 @@ const TownLayer = memo(function TownLayer() {
               <div className="absolute bottom-[-54px] w-full text-center">
                 <Text
                   tagName="span"
-                  className="px-3 py-1 bg-neutral-400 text-white rounded-md"
+                  className="px-3 py-1 text-white rounded-md"
+                  style={{ backgroundColor: color }}
                   size="sm"
                 >
                   {name}

diff --git a/frontend/app/components/primitives/text/text.tsx b/frontend/app/components/primitives/text/text.tsx
@@ -11,6 +11,7 @@ type TextProps = PropsWithChildren<{
   size?: Size;
   variant?: Variant;
   className?: string;
+  style?: React.CSSProperties;
 }>;
 
 const getSizeClass = (size?: Size) => {