Add rejected user status

src/components/Befriend.tsx

@@ -10,6 +10,7 @@ import { DeleteUserIcon } from './ReactIcons/DeleteUserIcon';
 import { useToast } from '../hooks/use-toast';
 import { useAuth } from '../hooks/use-auth';
 import { AddedUserIcon } from './ReactIcons/AddedUserIcon';
+import {StopIcon} from "./ReactIcons/StopIcon";
 
 export type FriendshipStatus =
   | 'none'
@@ -243,11 +244,9 @@ export function Befriend() {
                   <button
                     className="ml-2 text-red-700 underline"
                     onClick={() => {
-                      deleteFriend(user.id, 'Friend removed').finally(
-                        () => {
-                          pageProgressMessage.set('');
-                        }
-                      );
+                      deleteFriend(user.id, 'Friend removed').finally(() => {
+                        pageProgressMessage.set('');
+                      });
                     }}
                   >
                     Yes
@@ -290,6 +289,15 @@ export function Befriend() {
             </>
           )}
 
+          {user.status === 'got_rejected' && (
+            <>
+              <span class="flex w-full flex-grow cursor-default items-center justify-center rounded-lg border border-red-500 px-3 py-2 text-center text-red-500">
+                <StopIcon additionalClasses="mr-2 h-4 w-4" />
+                Request Rejected
+              </span>
+            </>
+          )}
+
           {user.status === 'received' && (
             <>
               <button

src/components/ReactIcons/StopIcon.tsx

@@ -0,0 +1,25 @@
+type CheckIconProps = {
+  additionalClasses?: string;
+};
+
+export function StopIcon(props: CheckIconProps) {
+  const { additionalClasses = 'mr-2 w-[20px] h-[20px]' } = props;
+
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      stroke-width="2"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+      className={`relative ${additionalClasses}`}
+    >
+      <circle cx="12" cy="12" r="10" />
+      <path d="m4.9 4.9 14.2 14.2" />
+    </svg>
+  );
+}