production test

src/app/_components/expense/expense-split.tsx

@@ -1,22 +1,10 @@
 "use client";
 import React from "react";
-import FriendSelect from "../friend/friend-select";
-import { Button } from "@/components/ui/button";
-
-import { Icons } from "@/components/icons";
-import { useExpenseStore } from "@/lib/store/expense-store";
 import PaidByInput from "./paid-by";
-import { api } from "@/trpc/react";
-import SplitTo from "./split-to";
+import SplitBetweenInput from "./split-between-input";
 import type { User } from "@/server/db/schema";
 
 export default function ExpenseSplit({ sessionUser }: { sessionUser: User }) {
-  const [friends] = api.friend.getAll.useSuspenseQuery();
-
-  const friendTarget = useExpenseStore((state) => state.friendTarget);
-  const setFriendTarget = useExpenseStore((state) => state.setFriendTarget);
-  const addParticipant = useExpenseStore((state) => state.addParticipant);
-
   return (
     <div className="space-y-4 ">
       <div className="flex items-center justify-center gap-2">
@@ -25,81 +13,8 @@ export default function ExpenseSplit({ sessionUser }: { sessionUser: User }) {
       </div>
       <div className="flex items-center justify-center gap-2">
         <span>and spliited</span>
-        <SplitTo />
+        <SplitBetweenInput />
       </div>
-      {/* <Separator className=" bg-primary w-full h-px my-12" />
-      <Select
-        value={splitType}
-        onValueChange={(currentValue) =>
-          setSplitType(currentValue as SplitType)
-        }
-      >
-        <SelectTrigger className="w-full">
-          <SelectValue placeholder="Select Split" />
-        </SelectTrigger>
-        <SelectContent>
-          {splitTypeKeys.map((splitType) => (
-            <SelectItem key={splitType} value={splitType}>
-              Split {splitType}
-            </SelectItem>
-          ))}
-        </SelectContent>
-      </Select>
-     
-      <h4 className="text-lg">Owed to</h4>
-      <ul className="space-y-2">
-        {participants.map((user) => (
-          <li key={user.id}>
-            <FriendCard
-              user={user}
-              className="border bg-background relative pr-6"
-            >
-              {session.user.id !== user.id ? (
-                <Button
-                  variant={"destructive"}
-                  className="p-0 w-6 h-6 rounded-full absolute top-1/2 -translate-y-1/2 transform -right-2"
-                  onClick={(e) => {
-                    e.preventDefault();
-                    removeParticipant(user.id!);
-                  }}
-                >
-                  <Icons.trash className="size-4" />
-                </Button>
-              ) : null}
-              <div className="flex ml-auto">
-                <p className="text-muted-foreground">{splits[user.id!]}</p>
-              </div>
-            </FriendCard>
-          </li>
-        ))}
-      </ul>
-      <h4 className="text-lg">Paid from</h4>
-      <ul className="space-y-2">
-        {participants.map((user) => (
-          <li key={user.id}>
-            <FriendCard
-              user={user}
-              className="border bg-background relative pr-6"
-            >
-              {session.user.id !== user.id ? (
-                <Button
-                  variant={"destructive"}
-                  className="p-0 w-6 h-6 rounded-full absolute top-1/2 -translate-y-1/2 transform -right-2"
-                  onClick={(e) => {
-                    e.preventDefault();
-                    removeParticipant(user.id!);
-                  }}
-                >
-                  <Icons.trash className="size-4" />
-                </Button>
-              ) : null}
-              <div className="flex ml-auto">
-                <p className="text-muted-foreground">{splits[user.id!]}</p>
-              </div>
-            </FriendCard>
-          </li>
-        ))}
-      </ul> */}
     </div>
   );
 }