wip

src/components/UserSearchInfos/UserSearchInfos.css

@@ -0,0 +1,60 @@
+.overlayContainer {
+
+	display: flex;
+	flex-direction: column;
+	/* // align-items: center;
+	// align-content: center; */
+
+	padding: 1rem;
+
+	width: 12rem;
+	height: fit-content;
+	background-color: white;
+
+	border-radius: 5px;
+
+	box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
+}
+
+.overlayContainer ion-card-subtitle {
+
+	font-size: 0.7rem;
+	color: black;
+}
+
+.overlayContainer ion-note {
+
+	font-size: 0.6rem;
+	margin-bottom: 0.5rem;
+}
+
+.overlayContainer ion-badge {
+
+	margin-bottom: 1.5rem;
+}
+
+.overlayContainer p {
+	color: black;
+	padding: 0;
+	margin: 0;
+	margin-bottom: 0.3rem;
+	font-size: 0.6rem;
+	display: flex;
+	flex-direction: row;
+	align-items: center;
+	align-content: center;
+}
+
+.overlayContainer:after { 
+
+	content:'';
+    position: absolute;
+    top: 100%;
+    left: 70%;
+    margin-left: -50px;
+    width: 0;
+    height: 0;
+    border-top: solid 10px white;
+    border-left: solid 10px transparent;
+    border-right: solid 10px transparent;
+}

src/components/UserSearchInfos/UserSearchInfos.tsx

@@ -0,0 +1,65 @@
+import {
+  IonBadge,
+  IonButton,
+  IonCardSubtitle,
+  IonCol,
+  IonIcon,
+  IonNote,
+  IonRow,
+} from "@ionic/react";
+import {
+  arrowForward,
+  call,
+  callOutline,
+  navigateOutline,
+} from "ionicons/icons";
+import "./UserSearchInfos.css";
+
+export const UserSearchInfos = (record: any) => {
+  console.log(record.record);
+  return (
+    <div className="overlayContainer">
+      <IonCardSubtitle>{record.record.user.name}</IonCardSubtitle>
+      {/* <IonNote color="medium">{ record.record.addressFrom }</IonNote> */}
+      <IonBadge color="dark">
+        {record.record.user.star_rating
+          ? `${record.record.user.star_rating} estrelas`
+          : "Sem avaliações"}
+      </IonBadge>
+
+      <p>
+        <IonIcon icon={navigateOutline} size='large' />
+        &nbsp;{record.record.address_to}
+      </p>
+
+      {record.record.user.phone_number && (
+        <p>
+          <IonIcon icon={call} />
+          &nbsp;{record.record.user.phone_number}
+        </p>
+      )}
+
+      <IonRow className="ion-no-padding ion-no-margin ion-margin-top">
+        <IonCol size="12" className="ion-no-padding ion-no-margin">
+          <IonButton
+            color="primary"
+            fill="solid"
+            size="small"
+            expand="block"
+            routerLink={`/perfil/${record.record.user.id_user}`}
+          >
+            Ver mais informações &rarr;
+          </IonButton>
+        </IonCol>
+      </IonRow>
+
+      <IonRow className="ion-no-padding ion-no-margin">
+        <IonCol size="12" className="ion-no-padding ion-no-margin">
+          <IonButton color="primary" fill="outline" size="small" expand="block">
+            <IonIcon icon={callOutline} />
+          </IonButton>
+        </IonCol>
+      </IonRow>
+    </div>
+  );
+};