awesome ui changes

2025-04-07 19:58:58 +02:00
parent 0cec39717e
commit 2ddbef6627
52 changed files with 1965 additions and 484 deletions
@@ -0,0 +1,148 @@
+"use client";
+import React from "react";
+import FriendSelect from "../friend/friend-select";
+import { Button } from "@/components/ui/button";
+
+import type { Session } from "next-auth";
+import FriendCard from "../friend/friend-card";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import { Icons } from "@/components/icons";
+import {
+  splitTypeKeys,
+  type ExpenseSplitHook,
+  type SplitType,
+} from "@/hooks/use-expense-split";
+import PaidByInput from "./paid-by";
+import { Separator } from "@radix-ui/react-select";
+
+export default function ExpenseSplit({
+  expenseSplitHook,
+  session,
+}: {
+  expenseSplitHook: ExpenseSplitHook;
+  session: Session;
+}) {
+  const {
+    friends,
+    splitType,
+    setSplitType,
+    friendTarget,
+    setFriendTarget,
+    addParticipant,
+    removeParticipant,
+    participants,
+    splits,
+  } = expenseSplitHook;
+  return (
+    <div className="space-y-4">
+      <div className="flex items-center gap-2">
+        <PaidByInput
+          expenseSplitHook={expenseSplitHook}
+          sessionUser={session.user}
+        />
+      </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>
+      <div className="flex gap-2 items-center w-full">
+        <FriendSelect
+          className="grow"
+          onSelect={setFriendTarget}
+          initialValue={friendTarget}
+          excludeIds={participants.map((user) => user.id!)}
+        />
+        <Button
+          variant={"outline"}
+          size={"icon"}
+          onClick={(e) => {
+            e.preventDefault();
+            if (!friendTarget) return;
+            const newUser = friends.find(
+              (friend) => friend.user.id === friendTarget
+            )!;
+
+            addParticipant(newUser.user!);
+            setFriendTarget(undefined);
+          }}
+        >
+          <Icons.add className="size-4" />
+        </Button>
+      </div>
+      <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>
+  );
+}