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;
CodePudding user response:
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;