How to convert TSX file into JS file

Question

I have a file which is being used to display logo on my website written in .TSX format, I am unable to figure out how to write this in .JS file with pertaining same functionality.

import React, { FC } from "react";
import { Link } from "react-router-dom";
import styled from "styled-components";
import { Breakpoints } from "../../GlobalStyle";
import useMediaQuery from "./useMediaQuery";

const StyledImage = styled.img<Props>`
    height: ${({ height }) => (height ? height : "40px")};
    width: auto;
    cursor: pointer;
    @media (max-width: ${Breakpoints.mobile}px) {
        height: 28px;
    }
`;

type Props = {
    id: string;
    height?: string;
};

const ResponsiveLogo: FC<Props> = ({ id, height }) => {
    const isMobile = useMediaQuery(`(max-width: ${Breakpoints.mobile}px)`);

    let Url = isMobile
        ? "image1_link"
        : "image2_link" ;

    return (
        <>
            <Link to="/">
                <StyledImage id={id} height={height} alt={"logo"} src={Url} />
            </Link>
        </>
    );
};

export default ResponsiveLogo;

Answer 1

import React, { FC } from "react";
import { Link } from "react-router-dom";
import styled from "styled-components";
import { Breakpoints } from "../../GlobalStyle";
import useMediaQuery from "./useMediaQuery";

const StyledImage = styled.img`
    height: ${({ height }) => (height ? height : "40px")};
    width: auto;
    cursor: pointer;
    @media (max-width: ${Breakpoints.mobile}px) {
        height: 28px;
    }
`;
const ResponsiveLogo= ({ id, height }) => {
    const isMobile = useMediaQuery(`(max-width: ${Breakpoints.mobile}px)`);

    let Url = isMobile
        ? "image1_link"
        : "image2_link" ;

    return (
        <>
            <Link to="/">
                <StyledImage id={id} height={height} alt="logo" src={Url} />
            </Link>
        </>
    );
};

export default ResponsiveLogo;