Add arrow next to ghost in address list #781

the-clothing-loop · Oct 7, 2024 · 91b06e4 · 91b06e4
1 parent 1a9dd79
commit 91b06e4
Show file tree

Hide file tree

Showing 2 changed files with 38 additions and 18 deletions.
diff --git a/app/src/components/AddressList/AddressListItem.tsx b/app/src/components/AddressList/AddressListItem.tsx
@@ -1,7 +1,7 @@
 import { IonItem, IonText, IonIcon } from "@ionic/react";
-import { shield, pauseCircleSharp, flag } from "ionicons/icons";
+import { shield, pauseCircleSharp, flag, arrowUpSharp } from "ionicons/icons";
 import { Bag, User } from "../../api/types";
-import TinyBagSvg from "./TinyBagSvg";
+import TinyBagSvg, { getBagType } from "./TinyBagSvg";
 
 export interface AddressListItemProps {
   user: User;
@@ -100,18 +100,28 @@ export default function AddressListItem({
               )}, minmax(0, 1fr))`,
             }}
           >
-            {bags.map((b) => (
-              <div
-                className={"tw-w-4 tw-h-4".concat(
-                  isMe ? " tw-shadow-bags" : "",
-                )}
-                key={b.id}
-              >
-                <div className="-tw-translate-y-px">
-                  <TinyBagSvg bag={b} />
+            {bags.map((b) => {
+              const bagType = getBagType(b);
+              return (
+                <div
+                  className={"tw-w-4 tw-h-4".concat(
+                    isMe ? " tw-shadow-bags" : "",
+                  )}
+                  key={b.id}
+                >
+                  <div className="relative -tw-translate-y-px">
+                    <TinyBagSvg bag={b} type={bagType} />
+                    {bagType === "👻" ? (
+                      <IonIcon
+                        key="ghostarrow"
+                        icon={arrowUpSharp}
+                        className="tw-absolute tw-text-xs tw-bottom-0 tw-right-0 tw-translate-x-1 tw-translate-y-1"
+                      />
+                    ) : null}
+                  </div>
                 </div>
-              </div>
-            ))}
+              );
+            })}
           </div>
         </div>
       </div>

diff --git a/app/src/components/AddressList/TinyBagSvg.tsx b/app/src/components/AddressList/TinyBagSvg.tsx
@@ -1,12 +1,22 @@
 import { Bag } from "../../api/types";
 import BagSVG from "../Bags/Svg";
 
+type BagType = "" | "👻" | "🐰" | "👟" | "📖";
 interface Props {
   bag: Bag;
+  type: BagType;
 }
 
-export default function TinyBagSvg({ bag }: Props) {
-  if (bag.number.includes("👻")) {
+export function getBagType(bag: Bag): BagType {
+  if (bag.number.includes("👻")) return "👻";
+  if (bag.number.includes("🐰")) return "🐰";
+  if (bag.number.includes("👟")) return "👟";
+  if (bag.number.includes("📖")) return "📖";
+  return "";
+}
+
+export default function TinyBagSvg({ bag, type }: Props) {
+  if (type === "👻") {
     return (
       <svg
         fill={bag.color}
@@ -32,7 +42,7 @@ export default function TinyBagSvg({ bag }: Props) {
       </svg>
     );
   }
-  if (bag.number.includes("🐰")) {
+  if (type === "🐰") {
     return (
       <svg
         fill={bag.color}
@@ -67,7 +77,7 @@ export default function TinyBagSvg({ bag }: Props) {
       </svg>
     );
   }
-  if (bag.number.includes("👟")) {
+  if (type === "👟") {
     return (
       <svg
         fill={bag.color}
@@ -91,7 +101,7 @@ export default function TinyBagSvg({ bag }: Props) {
     );
   }
 
-  if (bag.number.includes("📖")) {
+  if (type === "📖") {
     return (
       <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -2 24 26">
         <path