@mindly/ui-components 0.1.7 → 0.1.8

package/dist/therapist-card/TherapistCard.style.ts

@@ -1,140 +0,0 @@
-import {
-    IonCard,
-    IonCardContent,
-    IonCardHeader,
-    IonCardSubtitle,
-    IonCardTitle,
-    IonCol,
-    IonIcon, IonSkeletonText,
-} from '@ionic/react';
-import styled from 'styled-components';
-import {colorConstants} from '../Theme/mindly_constants';
-
-export const IonColWithoutPadding = styled(IonCol)`
-  padding: 0;
-  margin: 0;
-`;
-
-interface ContainerProps {
-    isIos: boolean
-}
-
-export const Container = styled.div<ContainerProps>`
-  margin: 0 16px 24px;
-  border-radius: 8px;
-  box-shadow: 0 6px 8px rgba(0, 0, 0, 0.1);
-
-  &:first-child {
-    margin-top: ${(props) => (props.isIos ? '28px' : '20px')};
-  }
-
-  &:last-of-type {
-    margin-bottom: 80px;
-  }
-`;
-
-type SkeletonProps = {
-    isLoading: boolean
-}
-
-export const Skeleton = styled.div<SkeletonProps>`
-  visibility: ${(props) => (props.isLoading ? 'visible' : 'hidden')};
-  position: absolute;
-  width: 100%;
-  top: 0;
-`;
-
-type HideProps = {
-    isLoading: boolean
-}
-
-export const Hide = styled.div<HideProps>`
-  visibility: ${(props) => (props.isLoading ? 'hidden' : 'visible')};
-`;
-
-export const PsychologistCardIonCard = styled(IonCard)`
-  height: 100%;
-  border-radius: 8px;
-  margin: 0;
-  position: relative;
-  box-shadow: none;
-
-  img {
-    height: 222px;
-    width: 100%;
-    object-fit: cover;
-  }
-`;
-
-export const PsychologistCardIonCardHeader = styled(IonCardHeader)`
-  padding: 16px 16px 0;
-`;
-
-export const PsychologistCardIonCardSubtitle = styled(IonCardSubtitle)`
-  display: flex;
-  align-items: flex-start;
-  text-transform: none;
-  letter-spacing: 0;
-  margin: 4px 0 16px;
-  color: ${colorConstants.primaryTextColor};
-`;
-
-export const PsychologistCardIonCardTitle = styled(IonCardTitle)`
-  color: ${colorConstants.secondaryTextColor};
-  margin: 0;
-`;
-
-export const PsychologistCardIonCardContent = styled(IonCardContent)`
-  padding: 0 16px 16px;
-`;
-
-export const PsychologistCardIcons = styled(IonIcon)`
-  color: ${colorConstants.primaryColor};
-  width: 20px;
-  height: 20px;
-  margin: 0;
-    
-  @media (max-width: 320px) {
-    width: 19px;
-  }
-`;
-
-export const IconsContainer = styled.div`
-  display: flex;
-  align-items: center;
-  padding: 0;
-  margin: 0;
-
-  p {
-    color: ${colorConstants.secondaryTextColor};
-    font-size: 14px;
-    padding-left: 5px;
-    margin: 0;
-      
-    @media (max-width: 320px) {
-      font-size: 11.5px;
-    }
-  }
-`;
-
-export const InfoContainer = styled.div`
-  display: flex;
-    justify-content: space-between;
-`;
-
-interface SkeletonTextProps{
-    height: number
-}
-
-export const SkeletonText = styled(IonSkeletonText)<SkeletonTextProps>`
-    width: 100%;
-    height: ${(props) => props.height + 'px'};
-    
-    &:first-child {
-        margin-bottom: 16px;
-    }
-    
-    &:last-child{
-        margin-top: 16px;
-    }
-`;

package/dist/therapist-card/TherapistCard.tsx

@@ -1,97 +0,0 @@
-import React, {useState} from 'react';
-import {timeOutline, cardOutline, briefcaseOutline} from 'ionicons/icons';
-import {
-    PsychologistCardIonCardContent,
-    PsychologistCardIonCardHeader,
-    PsychologistCardIonCardSubtitle,
-    PsychologistCardIonCardTitle,
-    PsychologistCardIcons,
-    PsychologistCardIonCard,
-    IconsContainer,
-    Container,
-    Skeleton,
-    Hide,
-    InfoContainer,
-    SkeletonText,
-} from './TherapistCard.style';
-import {isPlatform} from '@ionic/react';
-
-interface TherapistCardProps {
-    psychologistName: string
-    psychologistLastName: string
-    psychologistType: string
-    psychologistPhoto: string
-    psychologistPrice: number
-    psychologistDuration: number
-    psychologistExperience: number
-    handleClick: React.MouseEventHandler,
-}
-
-
-const TherapistCard: React.FC<TherapistCardProps> = ({
-    psychologistName,
-    psychologistLastName,
-    psychologistType,
-    psychologistPhoto,
-    psychologistPrice,
-    psychologistDuration,
-    psychologistExperience,
-    handleClick,
-}) => {
-    const [isLoading, setIsLoading] = useState<boolean>(true);
-
-    return (
-        <Container isIos={isPlatform('ios')}>
-            <PsychologistCardIonCard onClick={handleClick}>
-                <Hide isLoading={isLoading}>
-                    <img src={psychologistPhoto}
-                        onLoad={() => setIsLoading(false)}
-                        alt='psychologistPhoto'
-                    />
-                    <PsychologistCardIonCardHeader>
-                        <PsychologistCardIonCardTitle>
-                            <h1 className='bold'>
-                                {`${psychologistName} ${psychologistLastName}`}
-                            </h1>
-                        </PsychologistCardIonCardTitle>
-                        <PsychologistCardIonCardSubtitle>
-                            <h3 className='semiBold'>
-                                {psychologistType}
-                            </h3>
-                        </PsychologistCardIonCardSubtitle>
-                    </PsychologistCardIonCardHeader>
-                    <PsychologistCardIonCardContent>
-                        <InfoContainer>
-                            <IconsContainer>
-                                <PsychologistCardIcons icon={timeOutline} />
-                                <p className='semiBold'>{`${psychologistDuration} минут`}</p>
-                            </IconsContainer>
-                            <IconsContainer>
-                                <PsychologistCardIcons icon={cardOutline} />
-                                <p className='semiBold'>{`${psychologistPrice} грн`}</p>
-                            </IconsContainer>
-                            <IconsContainer>
-                                <PsychologistCardIcons icon={briefcaseOutline} />
-                                <p className='semiBold'>
-                                    {psychologistExperience >= 5 ?
-                                        `${psychologistExperience} лет опыта` :
-                                        psychologistExperience === 1 ?
-                                            `${psychologistExperience} год опыта` :
-                                            `${psychologistExperience} года опыта`}
-                                </p>
-                            </IconsContainer>
-                        </InfoContainer>
-                    </PsychologistCardIonCardContent>
-                </Hide>
-
-                <Skeleton isLoading={isLoading}>
-                    <SkeletonText height={222} animated/>
-                    <SkeletonText animated height={60} />
-                    <SkeletonText animated height={22} />
-                </Skeleton>
-            </PsychologistCardIonCard>
-        </Container>
-    );
-};
-
-export default TherapistCard;