Spaces:
Paused
Paused
File size: 5,561 Bytes
a0fda44 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 |
import React from "react";
import { useDispatch, useSelector } from "react-redux";
import Header from "../components/globals/Header";
import IconWrapper from "../components/globals/IconWrapper";
import { userProfileActions } from "../store/userProfileSlice";
import { modalActions } from "../store/modalSlice";
import useTime from "../hooks/useTime";
import Image from "../components/globals/Image";
function UserProfile() {
const { visible, profile } = useSelector((state) => state.userProfileReducer);
const dispatch = useDispatch();
const lastSeenTime = useTime(profile?.status?.lastSeen);
return (
<div
className={`bg-primary duration-200 ease-in-out ${
visible
? "w-[40rem] sm:w-full xl:translate-x-0"
: "w-0 xl:w-[40rem] xl:translate-x-[50rem]"
} h-full shrink-0 xl:absolute xl:top-0 xl:right-0 xl:z-20 xl:shadow-lg xl:shadow-box-shadow `}
>
{/* Header bar */}
<Header className="flex items-center px-[1rem]">
<IconWrapper
onClick={() => dispatch(userProfileActions.hideProfile())}
className=""
>
<svg
xmlns="http://www.w3.org/2000/svg"
width="1em"
height="1em"
preserveAspectRatio="xMidYMid meet"
viewBox="0 0 32 32"
className=""
>
<path
fill="currentColor"
d="M24 9.4L22.6 8L16 14.6L9.4 8L8 9.4l6.6 6.6L8 22.6L9.4 24l6.6-6.6l6.6 6.6l1.4-1.4l-6.6-6.6L24 9.4z"
strokeWidth={1}
className="fill-secondary-text stroke-secondary-text"
/>
</svg>
</IconWrapper>
<h2 className="text-[2rem] font-semibold ml-[2rem] mr-auto">Profile</h2>
{profile.name && (
<IconWrapper
onClick={() =>
dispatch(
modalActions.openModal({
type: "deleteContactModal",
payload: { profile },
})
)
}
>
<svg
xmlns="http://www.w3.org/2000/svg"
width="1em"
height="1em"
preserveAspectRatio="xMidYMid meet"
viewBox="0 0 24 24"
>
<path
fill="none"
stroke="currentColor"
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth="2"
d="M9 7v0a3 3 0 0 1 3-3v0a3 3 0 0 1 3 3v0M9 7h6M9 7H6m9 0h3m2 0h-2M4 7h2m0 0v11a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V7"
className="!fill-transparent !stroke-danger"
/>
</svg>
</IconWrapper>
)}
</Header>
{/* Avatar */}
<div className="h-[40rem] relative">
<Image
src={profile.avatar}
alt={profile.name || profile.username}
className="w-full h-full object-cover"
/>
<div className="absolute bottom-[2rem] left-[2rem]">
<p className="text-[2rem] font-semibold text-white">
{profile.name || profile.username}
</p>
<p className="text-secondary-text">
{profile.status?.online ? "Online" : `last seen at ${lastSeenTime}`}
</p>
</div>
</div>
{/* Details */}
<div className="p-[1rem] overflow-y-scroll custom-scrollbar">
{/* Username */}
<div className="flex items-center gap-[3rem] hover hover:bg-secondary-light-text p-[.5rem] rounded-md ">
{/* At icon */}
<svg
xmlns="http://www.w3.org/2000/svg"
width="1em"
height="1em"
preserveAspectRatio="xMidYMid meet"
viewBox="0 0 16 16"
>
<g
fill="none"
stroke="currentColor"
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth="1.5"
className="stroke-secondary-text"
>
<path d="M10.25 8c0 3.25 4 3.25 4 0A6.25 6.25 0 1 0 8 14.25c2.25 0 3.25-1 3.25-1" />
<circle cx="8" cy="8" r="2.25" />
</g>
</svg>
<div className="flex flex-col">
<span className="font-semibold">{profile.username}</span>
<span className="text-secondary-text">Username</span>
</div>
</div>
{/* Bio */}
{profile.bio && (
<div className="flex items-center gap-[3rem] hover hover:bg-secondary-light-text p-[.5rem] rounded-md ">
{/* Info icon */}
<svg
xmlns="http://www.w3.org/2000/svg"
width="1em"
height="1em"
preserveAspectRatio="xMidYMid meet"
viewBox="0 0 32 32"
className="shrink-0"
>
<g
fill="none"
stroke="currentColor"
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth="2"
className="stroke-secondary-text"
>
<path d="M16 14v9m0-15v2" />
<circle cx="16" cy="16" r="14" />
</g>
</svg>
<div className="flex flex-col flex-grow">
<p className="font-semibold break-words pr-[2rem]">
{profile.bio}
</p>
<span className="text-secondary-text">Bio</span>
</div>
</div>
)}
</div>
</div>
);
}
export default UserProfile;
|