@fortawesome/free-solid-svg-icons#faShare TypeScript Examples

Primary = () => (
  <>
    <Button variant="blue" className="mr-2"> Blue </Button>
    <Button variant="blue" className="mr-2" disabled> Disabled Blue </Button>
    <Button variant="blue" className="mr-2" loading> Loading Blue </Button>
    <Button variant="blue" className="mr-2" bouncy> Bouncy Blue </Button>
    <Button variant="blue" className="mr-2" withIcon icon={faShare}> Blue with icon </Button>
    <Button variant="blue" outline> Outline Blue </Button>
  </>
)

Light = () => (
  <>
    <Button variant="light" className="mr-2"> Light Button </Button>
    <Button variant="light" className="mr-2" disabled> Disabled Light Button </Button>
    <Button variant="light" className="mr-2" loading> Loading Light Button </Button>
    <Button variant="light" className="mr-2" bouncy> Bouncy Light Button </Button>
    <Button variant="light" className="mr-2" withIcon icon={faShare}> Light Button with icon </Button>
    <Button variant="light" outline> Outline Light Button </Button>
  </>
)

Success = () => (
  <>
    <Button variant="success" className="mr-2"> Success </Button>
    <Button variant="success" className="mr-2" disabled> Disabled Success </Button>
    <Button variant="success" className="mr-2" loading> Loading Success </Button>
    <Button variant="success" className="mr-2" bouncy> Bouncy Success </Button>
    <Button variant="success" className="mr-2" withIcon icon={faShare}> Success with icon </Button>
    <Button variant="success" outline> Outline Success </Button>
  </>
)

Danger = () => (
  <>
    <Button variant="danger" className="mr-2"> Danger </Button>
    <Button variant="danger" className="mr-2" disabled> Disabled Danger </Button>
    <Button variant="danger" className="mr-2" loading> Loading Danger </Button>
    <Button variant="danger" className="mr-2" bouncy> Bouncy Danger </Button>
    <Button variant="danger" className="mr-2" withIcon icon={faShare}> Danger with icon </Button>
    <Button variant="danger" outline> Outline Danger </Button>
  </>
)

Yellow = () => (
  <>
    <Button variant="yellow" className="mr-2"> Yellow </Button>
    <Button variant="yellow" className="mr-2" disabled> Disabled Yellow </Button>
    <Button variant="yellow" className="mr-2" loading> Loading Yellow </Button>
    <Button variant="yellow" className="mr-2" bouncy> Bouncy Yellow </Button>
    <Button variant="yellow" className="mr-2" withIcon icon={faShare}> Yellow with icon </Button>
    <Button variant="yellow" outline> Outline Yellow </Button>
  </>
)

Grey = () => (
  <>
    <Button variant="grey" className="mr-2"> Grey </Button>
    <Button variant="grey" className="mr-2" disabled> Disabled Grey </Button>
    <Button variant="grey" className="mr-2" loading> Loading Grey </Button>
    <Button variant="grey" className="mr-2" bouncy> Bouncy Grey </Button>
    <Button variant="grey" className="mr-2" withIcon icon={faShare}> Grey with icon </Button>
    <Button variant="grey" outline> Outline Grey </Button>
  </>
)

Link = () => (
  <>
    <Button variant="link" className="mr-2"> Link </Button>
    <Button variant="link" className="mr-2" disabled> Disabled Link </Button>
    <Button variant="link" className="mr-2" loading> Loading Link </Button>
    <Button variant="link" className="mr-2" bouncy> Bouncy Link </Button>
    <Button variant="link" className="mr-2" withIcon icon={faShare}> Link with icon </Button>
    <Button variant="link" outline> Outline Link </Button>
  </>
)

Gradient = () => (
  <>
    <Button variant="gradient" className="mr-2" gradient={gradient}> Gradient </Button>
    <Button variant="gradient" className="mr-2" disabled gradient={gradient}> Disabled Gradient </Button>
    <Button variant="gradient" className="mr-2" loading gradient={gradient}> Loading Gradient </Button>
    <Button variant="gradient" className="mr-2" bouncy gradient={gradient}> Bouncy Gradient </Button>
    <Button variant="gradient" className="mr-2" withIcon icon={faShare} gradient={gradient}> Gradient with icon </Button>
    <Button variant="gradient" outline gradient={gradient}> Outline Gradient </Button>
  </>
)

function CommonCraftEssenceDescriptor(props: IPropsCommon & { face?: string; tab?: string }) {
    return (
        <Link
            to={
                `/${props.region}/craft-essence/${props.craftEssence.collectionNo}` + (props.tab ? `/${props.tab}` : "")
            }
            className="descriptor-link"
        >
            {props.face ? (
                <FaceIcon
                    type={Entity.EntityType.SERVANT_EQUIP}
                    rarity={props.craftEssence.rarity}
                    location={props.face}
                    height={props.iconHeight ?? "2em"}
                />
            ) : undefined}
            {props.face ? " " : undefined}
            <span className="hover-text">{props.overwriteName ?? props.craftEssence.name}</span>{" "}
            <FontAwesomeIcon icon={faShare} />
        </Link>
    );
}

Default = () => (
  <>
    <Button variant="transparent"> Default </Button>
    <Button variant="transparent" className="mr-2" disabled> Disabled Default </Button>
    <Button variant="transparent" className="mr-2" loading> Loading Default </Button>
    <Button variant="transparent" className="mr-2" bouncy> Bouncy Default </Button>
    <Button variant="transparent" className="mr-2" withIcon icon={faShare}> Default with icon </Button>
    <Button variant="transparent" outline> Outline Default </Button>
  </>
)

export function QuestDescriptorMap(props: {
    text?: string;
    region: Region;
    questId: number;
    questPhase?: number;
    questStage?: number;
    quests: Map<number, Quest.QuestBasic>;
    showType?: boolean;
}) {
    const quest = props.quests.get(props.questId);
    if (quest !== undefined && quest !== null) {
        return (
            <QuestDescriptionNoApi
                text={props.text}
                region={props.region}
                quest={quest}
                questPhase={props.questPhase ?? 1}
                questStage={props.questStage}
                showType={props.showType}
            />
        );
    } else {
        return (
            <Link to={`/${props.region}/quest/${props.questId}/${props.questPhase ?? 1}`}>
                Quest {props.questId} <FontAwesomeIcon icon={faShare} />
            </Link>
        );
    }
}

SupportCraftEssenseLink = (props: { region: Region; craftEssence: CraftEssence.CraftEssence }) => {
    const { region, craftEssence } = props;
    if (craftEssence.collectionNo === 0) {
        const faceUrl = craftEssence.extraAssets.equipFace.equip
                ? craftEssence.extraAssets.equipFace.equip[craftEssence.id]
                : undefined,
            title = `Story Support CE ${craftEssence.id}`;
        return (
            <Link to={`/${region}/craft-essence/${craftEssence.id}`} className="descriptor-link">
                {faceUrl !== undefined ? (
                    <>
                        <img src={faceUrl} style={{ height: "1.5em" }} alt={title} />{" "}
                    </>
                ) : null}
                <span className="hover-text">
                    {title} <FontAwesomeIcon icon={faShare} />
                </span>
            </Link>
        );
    }
    return <CraftEssenceDescriptor region={region} craftEssence={craftEssence} />;
}

render() {
        const region = this.props.region,
            func = this.props.func,
            dataVal = this.getDataVal(),
            followerDataVal = this.getFollowerDataVal();

        const sections = new FuncDescriptorSections();

        handleTeamSection(region, sections, func, dataVal);
        handleConditionSection(region, sections, func, dataVal);
        handleChanceSection(region, sections, func, dataVal);
        handleActionSection(region, sections, func, dataVal);
        handleAmountSection(region, sections, func, dataVal);
        handleOnFieldSection(region, sections, func, dataVal);
        handleAffectsSection(region, sections, func, dataVal);
        if (followerDataVal) {
            handleAmountSection(region, sections, func, followerDataVal, true);
        }
        handleTargetSection(region, sections, func, dataVal);
        handleDurationSection(region, sections, func, dataVal);
        handleScalingSection(region, sections, func, dataVal);

        let parts: Renderable[] = [];

        Object.values(sections).forEach((section) => {
            if (!section.showing) return;

            if (section.preposition) parts.push(section.preposition);

            parts = parts.concat(section.parts);
        });

        parts.push(
            <Link to={`/${region}/func/${func.funcId}`}>
                <FontAwesomeIcon icon={faShare} title={`Go to ${region} function ${func.funcId}`} />
            </Link>
        );

        parts = joinElements(parts, " ");

        return (
            <span>
                {parts.map((element, index) => {
                    return <React.Fragment key={index}>{element}</React.Fragment>;
                })}
            </span>
        );
    }

export default function BgmDescriptor(props: {
    region: Region;
    bgm: Bgm.Bgm;
    showName?: string;
    showLink?: boolean;
    style?: React.CSSProperties;
}) {
    const bgm = props.bgm;
    if (bgm.id === 0) {
        return null;
    } else if (bgm.audioAsset !== undefined) {
        const showName = getBgmName(bgm);
        const toLink = props.showLink ? (
            <>
                <Button variant="primary" as={Link} to={`/${props.region}/bgm/${bgm.id}`}>
                    <FontAwesomeIcon icon={faShare} title={`Go to ${props.region} BGM ${showName}`} />
                </Button>
            </>
        ) : null;
        const downloadButton = bgm.notReleased ? (
            <Button disabled variant="secondary" target="_blank" title={showName}>
                {showName}
            </Button>
        ) : (
            <Button variant={"info"} href={bgm.audioAsset} target="_blank" title={`Download ${showName}`}>
                {props.showName ?? showName}&nbsp;
                <FontAwesomeIcon icon={faFileAudio} />
            </Button>
        );
        return (
            <>
                <ButtonGroup size="sm" style={props.style}>
                    <VoiceLinePlayer audioAssetUrls={[bgm.audioAsset]} delay={[0]} title={bgm.name} />
                    {downloadButton}
                    {toLink}
                </ButtonGroup>
            </>
        );
    } else {
        return (
            <Button variant={"info"} disabled style={props.style}>
                {bgm.name}
            </Button>
        );
    }
}

export default function MissionConditionDescriptor(props: {
    region: Region;
    cond: Mission.MissionCondition;
    warIds?: number[];
    goToQuestSearchOnly?: boolean;
    servants?: Map<number, Servant.ServantBasic>;
    quests?: Map<number, Quest.QuestBasic>;
    missions?: Map<number, Mission.Mission>;
    items?: Map<number, Item.Item>;
    enums?: EnumList;
    handleNavigateMissionId?: (id: number) => void;
}) {
    const cond = props.cond;
    let progressType = cond.missionProgressType.toString();
    switch (cond.missionProgressType) {
        case Mission.ProgressType.OPEN_CONDITION:
            progressType = "Unlock condition";
            break;
        case Mission.ProgressType.START:
            progressType = "Show condition";
            break;
        case Mission.ProgressType.CLEAR:
            progressType = "Clear condition";
    }
    return (
        <>
            <i>{progressType}:</i>
            <ul style={{ margin: 0 }}>
                <li className="newline">{props.cond.conditionMessage}</li>
                <li>
                    <CondTargetNumDescriptor
                        region={props.region}
                        cond={cond.condType}
                        targets={cond.targetIds}
                        num={cond.targetNum}
                        detail={cond.detail}
                        servants={props.servants}
                        quests={props.quests}
                        missions={props.missions}
                        items={props.items}
                        enums={props.enums}
                        handleNavigateMissionId={props.handleNavigateMissionId}
                    />
                </li>
                {cond.condType === CondType.MISSION_CONDITION_DETAIL &&
                cond.detail !== undefined &&
                [
                    Mission.DetailCondType.DEFEAT_ENEMY_INDIVIDUALITY,
                    Mission.DetailCondType.ENEMY_INDIVIDUALITY_KILL_NUM,
                ].includes(cond.detail?.missionCondType) ? (
                    props.goToQuestSearchOnly ? (
                        <Link
                            to={`/${props.region}/quests?${getURLSearchParams({
                                type: Quest.QuestType.FREE,
                                enemyTrait: cond.detail.targetIds,
                            }).toString()}`}
                        >
                            Search applicable quests <FontAwesomeIcon icon={faShare} />
                        </Link>
                    ) : (
                        <CollapsibleLight
                            title="Applicable Quests"
                            content={
                                <QuestSearchDescriptor
                                    region={props.region}
                                    warId={props.warIds}
                                    enemyTrait={cond.detail.targetIds}
                                    hideSearchLink={true}
                                    returnList={true}
                                />
                            }
                            eventKey={`${props.region}-${props.warIds}-enemyTraits:${cond.detail.targetIds}`}
                            defaultActiveKey={""}
                        />
                    )
                ) : null}
            </ul>
        </>
    );
}

export function QuestDescriptionNoApi(props: {
    region: Region;
    quest: Quest.QuestBasic;
    questPhase: number;
    text?: string;
    questStage?: number;
    showType?: boolean;
    showPhase?: boolean;
}) {
    const quest = props.quest;
    if (props.text !== undefined && props.text !== "") {
        return (
            <Link to={`/${props.region}/quest/${quest.id}/${props.questPhase}`}>
                {props.text} <FontAwesomeIcon icon={faShare} />
            </Link>
        );
    } else {
        const prefix = Math.floor(quest.id / 1000000);
        let type = "";

        switch (prefix) {
            case 91:
                type = "Interlude/Rank Up Quest";
                break;
            case 94:
                type = "Event Quest";
                break;
        }

        if (quest.warId >= 100 && quest.warId < 200) {
            type = "Part I Quest";
        } else if (quest.warId >= 200 && quest.warId < 300) {
            type = "EOR Quest";
        } else if (quest.warId >= 300 && quest.warId < 400) {
            type = "LB Quest";
        }

        if (quest.type === Quest.QuestType.FRIENDSHIP || quest.warId === 1003) {
            type = "Interlude Quest";
        }

        if (quest.warId === 1001) {
            if (quest.name.startsWith("Rank Up")) {
                type = "";
            } else {
                type = "Rank Up Quest";
            }
        }

        const showType = props.showType ?? true;
        const stageUri = props.questStage ? `/stage-${props.questStage}` : "";
        const phase = props.showPhase ? ` – phase ${props.questPhase}` : "";
        return (
            <Link to={`/${props.region}/quest/${quest.id}/${props.questPhase}${stageUri}`}>
                {showType && type !== "" ? `${type} ` : ""}
                {quest.name}
                {phase} <FontAwesomeIcon icon={faShare} />
            </Link>
        );
    }
}

OptionsDrawer.args = {
  trigger: {
    text: 'Share',
    icon: faShare,
  },
};

export default function QuestSearchDescriptor(props: IProps) {
    const [quests, setQuests] = useState<Quest.QuestPhaseBasic[]>([]);
    useEffect(() => {
        Api.searchQuestPhase(
            props.name,
            props.spotName,
            props.warId,
            props.type,
            props.flag,
            props.fieldIndividuality,
            props.battleBgId,
            props.bgmId,
            props.fieldAiId,
            props.enemySvtId,
            props.enemySvtAiId,
            props.enemyTrait,
            props.enemyClassName
        )
            .then((s) => setQuests(s))
            .catch(() => {});
    }, [
        props.name,
        props.spotName,
        props.warId,
        props.type,
        props.flag,
        props.fieldIndividuality,
        props.battleBgId,
        props.bgmId,
        props.fieldAiId,
        props.enemySvtId,
        props.enemySvtAiId,
        props.enemyTrait,
        props.enemyClassName,
    ]);
    if (quests.length === 0) {
        return null;
    }

    const maxShowResults = props.hideSearchLink ? quests.length : props.maxNumQuestsShown ?? 10,
        remainingCount = quests.length - maxShowResults,
        queryString = getURLSearchParams({
            name: props.name,
            spotName: props.spotName,
            warId: props.warId,
            type: props.type,
            flag: props.flag,
            fieldIndividuality: props.fieldIndividuality,
            battleBgId: props.battleBgId,
            bgmId: props.bgmId,
            fieldAiId: props.fieldAiId,
            enemySvtId: props.enemySvtId,
            enemySvtAiId: props.enemySvtAiId,
            enemyTrait: props.enemyTrait,
            enemyClassName: props.enemyClassName,
        }).toString();

    const questDescriptions = quests
        .slice(0, maxShowResults)
        .map((quest) => <QuestDescriptionNoApi region={props.region} quest={quest} questPhase={quest.phase} />);

    return (
        <>
            {props.returnList ? (
                <ul style={{ marginBottom: 0 }}>
                    {questDescriptions.map((quest, i) => (
                        <li key={i}>{quest}</li>
                    ))}
                </ul>
            ) : (
                <>
                    {questDescriptions.map((quest, i) => (
                        <div key={i}>
                            {quest}
                            <br />
                        </div>
                    ))}
                </>
            )}
            {remainingCount > 0 ? `and ${remainingCount} other quests. ` : ""}
            {props.hideSearchLink ? null : (
                <Link to={`/${props.region}/quests?${queryString}`}>
                    Go to the quest search page <FontAwesomeIcon icon={faShare} />
                </Link>
            )}
        </>
    );
}

ScriptBracketRow = (props: {
    region: Region;
    component: ScriptBracketComponent;
    refs: RowBgmRefMap;
    lineNumber?: number;
    wideScreen?: boolean;
}) => {
    const { region, component, refs, lineNumber, wideScreen } = props,
        { windowWidth } = useWindowDimensions(),
        showScriptLine = useContext(ShowScriptLineContext);

    const getGoToLabel = (labelName: string) => {
        return (
            <Button
                variant="link"
                onClick={() => {
                    const rowRef = refs.get(labelName);
                    if (rowRef !== undefined && rowRef.current !== null) {
                        rowRef.current.scrollIntoView({
                            behavior: "smooth",
                        });
                    }
                }}
            >
                <FontAwesomeIcon icon={faShare} title={`Go to label ${labelName}`} />
            </Button>
        );
    };

    switch (component.type) {
        case ScriptComponentType.BGM:
            return (
                <tr ref={refs.get(component.bgm.audioAsset)}>
                    <td>BGM</td>
                    <td>
                        <BgmDescriptor region={region} bgm={component.bgm} />
                    </td>
                    {showScriptLine && <td>{lineNumber}</td>}
                </tr>
            );
        case ScriptComponentType.CRI_MOVIE:
            return (
                <tr>
                    <td>Movie</td>
                    <td>
                        <video controls width={getVideoWidth(windowWidth, wideScreen)}>
                            <source src={component.movieUrl} type="video/mp4" />
                        </video>
                    </td>
                </tr>
            );
        case ScriptComponentType.SOUND_EFFECT:
            return (
                <tr ref={refs.get(component.soundEffect.audioAsset)}>
                    <td>Sound Effect</td>
                    <td>
                        <BgmDescriptor region={region} bgm={component.soundEffect} />
                    </td>
                    {showScriptLine && <td>{lineNumber}</td>}
                </tr>
            );
        case ScriptComponentType.FLAG:
            return (
                <tr>
                    <td>Flag</td>
                    <td>
                        Set flag <code>{component.name}</code> to <code>{component.value}</code>
                    </td>
                    {showScriptLine && <td>{lineNumber}</td>}
                </tr>
            );
        case ScriptComponentType.BRANCH:
            const condition =
                component.flag === undefined ? null : (
                    <>
                        {" "}
                        if <code>{component.flag.name}</code> is <code>{component.flag.value}</code>
                    </>
                );
            return (
                <tr>
                    <td>Branch</td>
                    <td>
                        Go to label <code>{component.labelName}</code>
                        {condition} {getGoToLabel(component.labelName)}
                    </td>
                    {showScriptLine && <td>{lineNumber}</td>}
                </tr>
            );
        case ScriptComponentType.BRANCH_QUEST_NOT_CLEAR:
            return (
                <tr>
                    <td>Branch</td>
                    <td>
                        Go to label <code>{component.labelName}</code> if quest{" "}
                        <QuestDescriptor region={region} questId={component.questId} /> hasn't been cleared{" "}
                        {getGoToLabel(component.labelName)}
                    </td>
                    {showScriptLine && <td>{lineNumber}</td>}
                </tr>
            );
        case ScriptComponentType.BRANCH_MASTER_GENDER:
            return (
                <tr>
                    <td>Branch</td>
                    <td>
                        Go to label <code>{component.maleLabelName}</code> {getGoToLabel(component.maleLabelName)} if
                        chosen gender is male or <code>{component.femaleLabelName}</code>{" "}
                        {getGoToLabel(component.femaleLabelName)} if female
                    </td>
                    {showScriptLine && <td>{lineNumber}</td>}
                </tr>
            );
        case ScriptComponentType.LABEL:
            return (
                <tr ref={refs.get(component.name)}>
                    <td>Label</td>
                    <td>
                        <code>{component.name}</code>
                    </td>
                    {showScriptLine && <td>{lineNumber}</td>}
                </tr>
            );
        default:
            return null;
    }
}

export default function AboutUsContent() {
  const router = useRouter();
  const [urlToShare, setUrlToShare] = useState(router.pathname);

  const lessonInfo = getLessonById('despre-noi');

  useEffect(() => {
    setUrlToShare(`${window.location.origin}${router.asPath}`);
  }, []);

  return (
    <>
      <LessonCover resizeOffset={100}>
        {/* eslint-disable-next-line react/no-danger */}
        <div dangerouslySetInnerHTML={{
          __html: coverSvg,
        }}
        />

      </LessonCover>
      <section>
        <LessonHeading as="h2" id={lessonInfo.chapters[0].id}>
          {lessonInfo.chapters[0].title}
        </LessonHeading>
        <p>
          FrontEnd.ro este o comunitate de oameni ce învață FrontEnd de la zero.
        </p>
        <p>
          Comunitatea gravitează în jurul unei serii de lecții și exerciții
          gratuite ce constituie - în opinia noastră - fundamentele unei cariere moderne
          în FrontEnd Development. Deși abia la
          {' '}
          <span className="line-through">prima</span>
          {' '}
          a doua iterație, acestea vor fi
          re-scrise, re-re-scrise și re-re-re-scrise în funcție de feedback-ul vostru
          până când vor ajunge una din cele mai calitative resurse de acest fel din România.
        </p>
      </section>
      <section>
        <LessonHeading as="h2" id={lessonInfo.chapters[1].id}>
          {lessonInfo.chapters[1].title}
        </LessonHeading>
        <p>
          Noi suntem convinși că:
        </p>
        <LessonQuote variant="centered">
          Nu contează la câte tutoriale te uiți, ci cât de mult codezi
        </LessonQuote>
        <p>
          Însă când înveți singur e puțin mai greu să-ți dai seama dacă rezolvarea
          găsită de tine este cea mai bună. Așa că ne vei trimite aici rezolvările
          la exerciții, iar noi - developeri cu experiență din comunitate -  îți
          vom da feedback pentru fiecare.
        </p>
      </section>
      <section>
        <LessonHeading as="h2" id={lessonInfo.chapters[2].id}>
          {lessonInfo.chapters[2].title}
        </LessonHeading>
        <p>
          De la început ne-am dorit ca FrontEnd.ro să fie un
          {' '}
          <strong>
            efort de comunitate,
            pentru comunitate
          </strong>
          . Lecțiile, exercițiile, acest site cât și feedback-ul
          pe care voi îl veți primi reprezintă o contribuție voluntară a unor
          developeri cu inimă mare din România.
        </p>
        <p>
          Vrem să oferim șansa la cât
          mai mulți oameni să învețe și să lucreze în acest domeniu, unul din cele mai
          faine din lume, de aceea nu vom pune un preț pe această experiență.
        </p>
      </section>
      <section>
        <LessonHeading as="h2" id={lessonInfo.chapters[3].id}>
          {lessonInfo.chapters[3].title}
        </LessonHeading>
        <p>
          Dacă folosești platforma să
          {' '}
          <strong>înveți FrontEnd</strong>
          {' '}
          și simți că te-a ajutat, atunci s-ar putea să fie de folos și prietenilor
          tăi. Am aprecia mult un share, așa putem avea un impact cât mai mare:
        </p>
        <div className="d-flex justify-content-center my-5">
          <OptionsDrawer trigger={{ text: 'Share', icon: faShare }}>
            <OptionsDrawer.Element>
              <CopyLinkButton text={urlToShare} />
            </OptionsDrawer.Element>
            <OptionsDrawer.Element>
              <FacebookButton url={urlToShare} />
            </OptionsDrawer.Element>
            <OptionsDrawer.Element>
              <LinkedInButton url={urlToShare} />
            </OptionsDrawer.Element>
            <OptionsDrawer.Element>
              <WhatsAppButton url={urlToShare} />
            </OptionsDrawer.Element>
          </OptionsDrawer>
        </div>
        <p>
          Iar după ce avansezi în skill-uri și capeți mai multă experiență, chiar ne-am bucura
          dacă vei reveni aici, de data aceasta din postura de mentor și să oferi
          înapoi comunității. ?
        </p>
        <p>
          Dacă
          {' '}
          <strong>ești FrontEnd Developer</strong>
          , atunci ne poți ajuta prin oferirea de
          feedback cursanților, crearea de exerciții și lecții sau dezvoltarea
          acestei platforme al cărei cod este
          {' '}
          <a target="_blank" rel="noreferrer" href={GITHUB_URL}>open-source pe GitHub</a>
          .
          {/* Mai mult despre acest proces gasesti in capitolul
                {' '}
                <a href="/intro/implica-te">Cum ajut</a>
                . */}
        </p>
        <p>
          Iar dacă
          {' '}
          <strong>ești o firmă tech și-ți place ce încercăm să facem aici</strong>
          ,
          poate găsim un mod să colaborăm și să ne ajutăm reciproc și comunitatea
          în același timp.
          {/*
            Aruncă un ochi
            {' '}
            <a href="/intro/implica-te">aici</a>
            {' '}
            pentru mai multe detalii.
             */}
        </p>
      </section>
      <div className="dots" />
      <section>
        <LessonHeading as="h2" id={lessonInfo.chapters[4].id}>
          {lessonInfo.chapters[4].title}
        </LessonHeading>
        <p>
          FrontEnd-ul, de fapt programarea în general, este un domeniu în continuă
          dezvoltare și schimbare.
          În fiecare lună apar lucruri noi, iar în cațiva ani tool-urile pe care
          noi le folosim pot fi complet diferite. Ceea ce face
          lucrurile extrem de interesante, dar și puțin complicate
          când vrei să înveți acest domeniu...
        </p>

        <p>
          Totuși, fundamentele FrontEnd-ului nu se schimbă, și le vei folosi fie că
          construiești un site de prezentare, un magazin online sau următorul
          Instagram. De aceea, aici ne vom ocupa de fundamentele celor
          3 limbaje de programare ce compun FrontEnd-ul:
          {' '}
          <strong>HTML</strong>
          ,
          {' '}
          <strong>CSS</strong>
          {' '}
          și
          {' '}
          <strong>JavaScript</strong>
          . Deocamdată avem lecții și exerciții doar pentru
          primul, cel de HTML, însa după o rundă de feedback de la
          comunitate vom continua și cu celelalte două.
        </p>
      </section>
      <div className="dots" />
      <section>
        <LessonHeading as="h2" id={lessonInfo.chapters[5].id}>
          {lessonInfo.chapters[5].title}
        </LessonHeading>
        <p>
          Focusul nostru este pe exerciții și feedback, acolo investim cel
          mai mult timp. Există deja o mulțime de articole și tutoriale
          extrem de bune pe internet, așa că am decis ca lecțiile să reprezinte
          doar un
          {' '}
          <strong>scurt rezumat</strong>
          ,  care la final va avea
          {' '}
          <strong>
            link-uri către resurse
            mai detaliate
          </strong>
          . Din această cauză, principala responsabilitate
          la partea de învățare este a ta.
          {' '}
        </p>
        <LessonQuote>
          Ne așteptăm să fii motivat
          și autodidact, să poți înțelege în mare conceptele de unul singur.
        </LessonQuote>
        <p>
          Pentru a învăța cât mai mult, începe cu lecția 0 (cea pe care o citești acum)
          și continuă pe rând cu fiecare lecție nouă. Citește rezumatul nostru, iar
          apoi aruncă un ochi pe resursele suplimentare, înainte să te apuci
          de exerciții.
          {' '}
        </p>
        <p>
          <strong>
            Este foarte important să rezolvi toate exercițiile
            de la fiecare lecție.
          </strong>
          {' '}
          Ai răbdare și încredere în noi, nu am încărcat site-ul cu exerciții inutile.
        </p>
        <p>
          Apoi, după ce ne trimiți soluția ta vom ajunge la
          {' '}
          <strong>partea de feedback</strong>
          .
          Fiind începător probabil vor fi undeva la 3-4-5 runde,
          în care-ți vom explica de ce anumite lucruri nu sunt
          bune și te vom ruga să le schimbi.
        </p>
        <p>
          E extrem de important
          să
          {' '}
          <strong>ai răbdare cu acest proces, și să nu fii prea dur cu tine</strong>
          .
          Bucură-te că ai pe cineva care-ți face Code Review și de la
          care poți să înveți. Mulți dintre noi nu am avut șansa asta.
          Și din nou:
        </p>
        <LessonQuote variant="centered">
          Don't be too hard on yourself.
          Don't take it personal.
          Noi suntem aici să te ajutăm. ?
        </LessonQuote>
      </section>
      <section>
        <LessonHeading as="h2" id={lessonInfo.chapters[6].id}>
          {lessonInfo.chapters[6].title}
        </LessonHeading>
        <p>
          Unul dintre cele mai faine lucruri la FrontEnd development
          este faptul că nu avem nevoie de prea multe lucruri înainte să începem.
          În primul rând, un
          {' '}
          <strong>calculator</strong>
          {' '}
          și o
          {' '}
          <strong>conexiune la internet</strong>
          .
        </p>
        <p> Apoi, specific pentru acest domeniu ai nevoie de:</p>
        <List as="ol" variant="count">
          <li>
            <strong>un browser modern și cross-platform </strong>
            (ce poate fi instalat pe
            Windows, MacOS și Linux).
            <p>
              Noi recomandăm unul dintre
              {' '}
              <a target="_blank" rel="noreferrer" href="https://www.google.com/chrome/">
                Google Chrome
              </a>
              ,
              {' '}
              <a target="_blank" rel="noreferrer" href="https://www.mozilla.org/en-US/firefox/new/">Mozilla Firefox</a>
              {'  '}
              sau
              {' '}
              <a target="_blank" rel="noreferrer" href="https://www.microsoft.com/en-us/edge">Microsoft Edge</a>
              .
              {' '}
              Nu prea contează pe care din cele 3 îl instalezi, toate sunt bune.
            </p>
          </li>
          <li>
            <a target="_blank" rel="noreferrer" href="https://code.visualstudio.com/download">Visual Studio Code</a>
            : programul unde vom scrie efectiv codul.

            <p>
              {' '}
              Acest editor este
              extrem de popular printre developeri, așa că hai să-l folosim chiar de la
              început pentru a ne familiariza cu el.
              De asemenea, înainte să începi
              {' '}
              <a href="/html/despre-html">Lecția 1</a>
              {' '}
              te invităm să arunci un ochi pe acest
              {' '}
              <a href="/intro/vs-code">mini-tutorial despre VSCode</a>
              .
            </p>
          </li>
        </List>
      </section>
      <div className="dots" />
      <section>
        <LessonHeading as="h2" id={lessonInfo.chapters[7].id}>
          {lessonInfo.chapters[7].title}
        </LessonHeading>
        <p>
          Pe partea de resurse, vom adăuga la finalul fiecărei lecții link-uri de
          unde poți învăța mai multe. Totuși, nu putem să nu menționăm două site-uri extrem de
          utile și fără de care job-ul de FrontEnd developer ar fi mult mai frustrant:
        </p>
        <List as="ol" variant="count">
          <li>
            <a target="_blank" rel="noreferrer" href="https://developer.mozilla.org/en-US/" className="text-bold">MDN - Mozilla Developer Network</a>
            {' '}
            este locul unde găsim cele mai calitative și detaliate documentații despre HTML,
            CSS și JavaScript - cele 3 limbaje ce compun FrontEnd development-ul.
            <p>
              Domeniul e atât de complex încât e perfect normal să nu ținem minte totul.
              E mult mai comun decât ai crede ca developeri cu experiență să uite
              lucruri de sintaxă, adică ce bucată de cod trebuie să folosească pentru
              a ajunge la un anumit rezultat.
            </p>
            <p>
              De exemplu, poate am uitat cum schimbăm culoarea de fundal
              a unui element din pagină, caz în care vom căuta
              {' '}
              <FormattedText as="span">background color MDN</FormattedText>
              .
              Recomandăm să pui “MDN” la final pentru ca pagina căutată
              să apară printre primele rezultate.
            </p>
            <LessonFigure
              withBorder
              src="/images/lesson-0__google-search.png"
              alt="Cautând `background-color MDN` pe Google"
            />
            <p>
              And voilà! Am ajuns la documentație,
              unde putem vedea toate opțiunile posibile și cum le putem folosi:
            </p>
            <LessonFigure
              withBorder
              src="/images/lesson-0__mdn.png"
              alt="Documentația `background-color` pe MDN"
            />
          </li>
          <li>
            <a target="_blank" rel="noreferrer" href="https://stackoverflow.com/" className="text-bold">Stack Overflow</a>
            {' '}
            este o comunitate de developeri ce învață și codează împreună.
            <p>
              Mai exact, este cea mai populară platformă de întrebări și
              răspunsuri de programare, folosită de mai toți developerii din lume.
              Fără acest site ne-ar lua mult
              mai mult timp să gasim soluții la diversele
              buguri/probleme pe care le întâlnim când codăm.
            </p>
            <p>
              {' '}
              Iar dacă ești curios, poți arunca un ochi pe ultimele întrebări adăugate pentru
              limbajele ce le vom învăța aici:
              {' '}
              <a target="_blank" rel="noreferrer" href="https://stackoverflow.com/questions/tagged/html">HTML</a>
              ,
              {' '}
              <a target="_blank" rel="noreferrer" href="https://stackoverflow.com/questions/tagged/css">CSS</a>
              {' '}
              si
              {' '}
              <a target="_blank" rel="noreferrer" href="https://stackoverflow.com/questions/tagged/javascript">JavaScript</a>
              .
            </p>
          </li>
        </List>
      </section>
      {/* FIXME: uncomment this */}
      {/* <div className="text-center my-5">
          <a href="/" className="cta-button">
            Să continuăm cu prima lecție
            {' '}
            <br />
            {' '}
            despre HTML
          </a>
        </div> */}
    </>
  );
}

function RegisterEventCard({
  userInfo,
  id,
  title,
  cover,
  url,
  duration,
  description,
  location,
  eventDates,
  className,
}: ConnectedProps<typeof connector> & Props) {
  const [error, setError] = useState(null);
  const [isLoading, setIsLoading] = useState(false);
  const [urlToShare, setUrlToShare] = useState(url);

  const isPastEvent = eventDates.every(({ parts }) => {
    return parts[0].timestamp < Date.now();
  });

  useEffect(() => {
    // If we have the `url` prop then let's use that
    // as the share url. Otherwise default to the current page.
    if (url) {
      setUrlToShare(`${window.location.origin}${url}`);
    } else {
      setUrlToShare(`${window.location.origin}${window.location.pathname}`);
    }
  }, []);

  const onSubmit = async (formData: {
    name: string;
    email: string;
    tel: string;
    timestamp: number;
  }) => {
    setIsLoading(true);
    let shouldResetForm = true;

    if (!formData.timestamp) {
      formData.timestamp = formData.timestamp || eventDates[0].parts[0].timestamp;
    }

    try {
      const seatsInfo = await EventService.getSeatsInfo(id);

      if (seatsInfo.free > 0) {
        await EventService.register(id, formData);

        SweetAlertService.toast({
          type: 'success',
          text: 'Felicitări! Vei primi un email cu mai multe informații!',
        });
      } else {
        SweetAlertService.content(
          () => <WaitlistConfirmation id={id} userData={formData} />,
          'Listă de așteptare',
          {
            onSuccess() {
              SweetAlertService.closePopup();
            },
          },
        );
      }
    } catch (err) {
      shouldResetForm = false;
      setError(err.message || 'Nu am putut să te înregistrăm. Încearcă din nou!');
    } finally {
      setIsLoading(false);
    }
    return shouldResetForm;
  };

  return (
    <div className={`${styles['register-event-card']} ${className || ''} d-flex justify-content-between align-items-center`}>
      {cover && <img className={styles['cover--row']} src={cover} alt={`${title} cover`} />}
      <Form onSubmit={onSubmit} onInput={() => setError(null)}>
        {title && (
          <h2 className={styles.title}>
            {title}
          </h2>
        )}
        {cover && <img className={styles['cover--column']} src={cover} alt={`${title} cover`} />}
        <div className="d-flex justify-content-between flex-wrap">
          <div>
            <p className="m-0">
              Durată:
              {' '}
              <strong>
                {duration}
              </strong>
            </p>
            {eventDates.length === 1 && (
              <p className="m-0">
                Dată:
                {' '}
                {eventDates[0].parts.map((p, index) => (
                  <React.Fragment key={p.timestamp}>
                    <strong>
                      <time dateTime={format(p.timestamp, 'yyyy-MM-dd')}>{p.label}</time>
                    </strong>
                    {index < eventDates[0].parts.length - 1 && <>{' și '}</>}
                  </React.Fragment>
                ))}
              </p>
            )}

          </div>
          <div>
            <p className="m-0">
              Preț:
              {' '}
              <span className="text-blue text-bold">
                Gratuit
              </span>
            </p>
            <p className="m-0">
              Locație:
              {' '}
              <span className="text-blue text-bold">
                {location}
              </span>
            </p>
          </div>
        </div>
        <p className="my-5">{description}</p>
        {!isPastEvent && (
          <>
            <FormGroup className="mb-4">
              <label>
                <span className="label text-bold mb-2">
                  Nume si prenume
                </span>
                {userInfo && <input type="text" name="name" defaultValue={userInfo.name} required />}

              </label>
            </FormGroup>

            <FormGroup className="mb-4">
              <label>
                <span className="label text-bold mb-2">
                  Adresa de email
                </span>
                {userInfo && <input type="email" defaultValue={userInfo.email} name="email" required />}

              </label>
            </FormGroup>

            <FormGroup>
              <label>
                <span className="label text-bold mb-2">
                  Număr de telefon
                </span>
                <span className="text-xs text-grey d-flex align-items-center">
                  Te vom contacta cu o zi înainte de eveniment a confirma participarea
                </span>
                <input type="tel" name="tel" required />
              </label>
            </FormGroup>
          </>
        )}

        {eventDates.length > 1 && (
          <ReactSelect
            isSearchable
            placeholder="Alege data si ora la care vrei sa participi"
            className={styles.select}
            options={eventDates}
            name="timestamp"
          />
        )}

        {error && (
          <p className="text-red text-bold">
            {error}
          </p>
        )}
        {!isPastEvent && (
          <footer className="d-flex my-5 justify-content-between flex-wrap">
            <Button type="submit" variant="blue" loading={isLoading}>
              Înscrie-te
            </Button>
            <OptionsDrawer variant="light" trigger={{ text: 'Share', icon: faShare }}>
              <OptionsDrawer.Element>
                <CopyLinkButton text={urlToShare} />
              </OptionsDrawer.Element>
              <OptionsDrawer.Element>
                <FacebookButton url={urlToShare} />
              </OptionsDrawer.Element>
              <OptionsDrawer.Element>
                <LinkedInButton url={urlToShare} />
              </OptionsDrawer.Element>
              <OptionsDrawer.Element>
                <WhatsAppButton url={urlToShare} />
              </OptionsDrawer.Element>
            </OptionsDrawer>
          </footer>

        )}
        {url && (
          <div className="text-right my-5">
            <Link href={url}>
              <a>
                Află mai multe
              </a>
            </Link>
          </div>
        )}
      </Form>
    </div>
  );
}

Diploma = ({
  student, tutorial, certification, variant = 'large', shareControls = true,
}: Props) => {
  const [fullCertificationUrl, setFullCertificationUrl] = useState(certification.url);
  useEffect(() => {
    setFullCertificationUrl(`${window.location.origin}${certification.url}`);
  }, []);

  return (
    // If we ever change this attribute ID, make sure we also change
    // the `diploma-screenshot` Lambda Function
    // https://github.com/FrontEnd-ro/frontend.ro/issues/449
    <section data-diploma className={`${styles.Diploma} ${styles[`Diploma-${variant}`]} relative`}>
      <div className={`${styles.meta} absolute d-flex justify-content-between align-items-center mb-4`}>
        <a href="https://FrontEnd.ro">
          FrontEnd.ro
        </a>
        <time dateTime={format(certification.date.getTime(), 'yyyy-MM-dd')}>
          {formatDate(certification.date)}
        </time>
      </div>
      <div className={`${styles.main} text-center`}>
        <a
          href={`/${student.username}`}
          className={`${styles.student} no-underline inline-flex align-items-center text-left`}
        >
          <div className={`${styles['student-info']} mx-4`}>
            {student.name && (
              <p className="m-0 text-bold">{student.name}</p>
            )}
            <p className={`${styles.username} text-xs m-0 truncate`}>
              {`@${student.username}`}
            </p>
          </div>
          <img
            width="200"
            height="200"
            src={student.avatar}
            alt={`${student.name} avatar`}
          />
        </a>
        <p>
          a completat
          <a className="mt-4 mb-4 d-block text-bold" href={`/${tutorial.tutorialId}`}>
            {tutorial.name}
          </a>
          rezolvând cu succes toate cele
          {' '}
          {certification.exerciseCount}
          {' '}
          exerciții.
        </p>
      </div>
      <footer className="relative d-flex justify-content-between align-items-end">
        <Signature className="mr-2" />
        <QRCode
          width={140}
          background="#f8f8f8"
          className={styles.qrcode}
          url={fullCertificationUrl}
        />

        {shareControls && (
        // This attribute means we'll remove this element when generating
        // the OG:IMAGE and PDF for the Diploma
        // https://github.com/FrontEnd-ro/frontend.ro/issues/449
        <div data-diploma-hidden className={`${styles['share-button-wrapper']} absolute`}>
          <OptionsDrawer
            trigger={{
              text: 'Share',
              icon: faShare,
            }}
            direction="up"
          >
            <OptionsDrawer.Element>
              <CopyLinkButton text={fullCertificationUrl} />
            </OptionsDrawer.Element>
            {certification.pdf && (
            <OptionsDrawer.Element>
              <a
                href={certification.pdf}
                className="btn btn--light no-underline btn--with-icon"
              >
                <FontAwesomeIcon icon={faDownload} height="24" className="mr-2" />
                Download PDF
              </a>
            </OptionsDrawer.Element>
            )}
            <OptionsDrawer.Element>
              <FacebookButton url={fullCertificationUrl} />
            </OptionsDrawer.Element>
            <OptionsDrawer.Element>
              <LinkedInButton url={fullCertificationUrl} />
            </OptionsDrawer.Element>
          </OptionsDrawer>
        </div>
        )}
      </footer>
    </section>
  );
}