refactor: start redesign of user page

app/components/Profile/Profile.Social.tsx

@@ -0,0 +1,20 @@
+interface UserSocialProps {
+  icon: string;
+  url?: string;
+  nickname: string;
+  color: string;
+}
+
+export const UserSocial = ({ nickname, icon, color }: UserSocialProps) => {
+  return (
+    <div
+      className={`border border-[var(--color)] rounded-md`}
+      style={{ "--color": `#${color}` } as React.CSSProperties}
+    >
+      <div className="flex gap-1 items-center px-1.5 py-1">
+          <span className={`iconify w-6 h-6 bg-[var(--color)] ${icon}`}></span>
+          <p>{nickname}</p>
+      </div>
+    </div>
+  );
+};