Rename Anchor to Link

src/components/AddLink.tsx

@@ -1,10 +1,10 @@
 import React, { ComponentProps } from "react";
 import styled from "styled-components";
 import { colors }from "@theme/colors";
-import Anchor from "@components/Anchor";
+import { Link } from "@components/index";
 import AddIcon from "@assets/img/add-icon.png";
 
-const Link = styled(Anchor)`
+const StyledLink = styled(Link)`
   display: flex;
   flex-flow: row nowrap;
   align-items: center;
@@ -21,15 +21,15 @@ const Link = styled(Anchor)`
   }
 `;
 
-type AddLinkProps = ComponentProps<typeof Anchor> & {
+type AddLinkProps = ComponentProps<typeof Link> & {
   text: string;
 }
 
 const AddLink: React.FC<AddLinkProps> = ({ text, ...props }) => (
-  <Link {...props}>
+  <StyledLink {...props}>
     <img src={AddIcon} />
     {text}
-  </Link>
+  </StyledLink>
 )
 
 export default AddLink;

src/components/AdminSidebar.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 import styled from "styled-components";
-import Anchor from "@components/Anchor";
+import { Link } from "@components/index";
 import colors from "@theme/colors";
 import breakpoints from "@theme/breakpoints";
 
@@ -20,7 +20,7 @@ const SideBar = styled.nav`
   }
 `;
 
-const StyledLink = styled(Anchor)<{path: string}>`
+const StyledLink = styled(Link)<{path: string}>`
   padding: 1rem 3rem 1rem 1rem;
   letter-spacing: 3px;
   text-transform: uppercase;

src/components/Anchor.tsx

@@ -1,25 +0,0 @@
-import React from "react";
-import { Link } from "react-router-dom";
-import { HashLink } from "react-router-hash-link";
-
-interface AnchorProps extends React.HTMLAttributes<HTMLAnchorElement> {
-  to: string;
-}
-
-const Anchor: React.FC<AnchorProps> = ({ to, ...props }) => {
-  if (to.startsWith("/")) {
-    return (
-      <Link to={to} {...props} />
-    );
-  } else if (to.startsWith("#")) {
-    return (
-      <HashLink to={to} {...props} />
-    );
-  }
-  else {
-    return (
-      <a href={to} {...props} />
-    );
-  }
-}
-export default Anchor;

src/components/Card.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 import styled from "styled-components";
 import { colors } from "@theme/colors";
-import Anchor from "@components/Anchor";
+import { Link } from "@components/index";
 import breakpoints from "@theme/breakpoints";
 
 interface WrappedCardProps {
@@ -97,11 +97,11 @@ const WrappedCard: React.FC<WrappedCardProps> = ({ title, text, link, image, ima
   ) : null;
 
   const button = (
-    <Anchor to={link}>
+    <Link to={link}>
       <button onClick={buttonOnClick}>
       Lue lisää&nbsp;›
       </button>
-    </Anchor>
+    </Link>
   );
 
   return (

src/components/Footer/FooterContent.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 import styled from "styled-components";
-import Anchor from "../Anchor";
+import { Link } from "@components/index";
 import colors from "@theme/colors";
 import breakpoints from "@theme/breakpoints";
 
@@ -79,14 +79,14 @@ const FooterContent: React.FC = () => (
             <div>
               <p>Y-tunnus: 1627010-1</p>
               <p>sik-hallitus@list.ayy.fi</p>
-              <Anchor to="/yhteystiedot">Yhteystiedot</Anchor>
+              <Link to="/yhteystiedot">Yhteystiedot</Link>
             </div>
           </div>
           <div>
-            <Anchor to="/jaseneksi">Jäseneksi</Anchor>
-            <Anchor to="/palaute">Palaute</Anchor>
-            <Anchor to="https://static.sika.sik.party">Arkisto</Anchor>
-            <Anchor to="https://static.sika.sik.party">Materiaalipankki</Anchor>
+            <Link to="/jaseneksi">Jäseneksi</Link>
+            <Link to="/palaute">Palaute</Link>
+            <Link to="https://static.sika.sik.party">Arkisto</Link>
+            <Link to="https://static.sika.sik.party">Materiaalipankki</Link>
           </div>
         </Columns>
       </MarginSpace>

src/components/HeaderLogo.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 import styled from "styled-components";
-import { Link } from "react-router-dom";
+import { Link } from "@components/index";
 import TitleImage from "@assets/img/SIK_RGB_W_side.png";
 import breakpoints from "@theme/breakpoints";
 

src/components/Hero/HeroAside.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 import styled from "styled-components";
 import { colors } from "@theme/colors";
-import Anchor from "@components/Anchor";
+import { Link } from "@components/index";
 
 interface HeroAsideItemProps {
   header: string;
@@ -20,11 +20,11 @@ export const HeroAsideItem: React.FC<HeroAsideItemProps> = ({ header, text, link
     {text && (
       <p>{text}</p>
     )}
-    <Anchor to={link}>
+    <Link to={link}>
       <h6>
         {linkText}
       </h6>
-    </Anchor>
+    </Link>
   </Article>
 )
 

src/components/Link.tsx

@@ -0,0 +1,48 @@
+import React from "react";
+// import NextJSLink, { LinkProps } from "next/link";
+import { Link as RouterLink } from "react-router-dom";
+import { HashLink } from "react-router-hash-link";
+
+// interface Props extends Omit<LinkProps, "href"> {
+//   template?: string;
+//   to: string;
+// }
+
+interface Props extends React.HTMLAttributes<HTMLAnchorElement> {
+  to: string;
+}
+
+const Link: React.FC<Props> = ({ to, ...props }) => {
+// const Link: React.FC<Props> = ({ to, template, ...props }) => {
+//   if (template) {
+//     return (
+//       <NextJSLink href={template} as={to} {...props}  />
+//     )
+//   }
+//   if (to.startsWith("/") || to.startsWith("#")) {
+//     return (
+//       <NextJSLink href={to} {...props} />
+//     );
+//   }
+//   else {
+//     return (
+//       <a href={to} {...props} />
+//     );
+//   }
+  if (to.startsWith("/")) {
+    return (
+      <RouterLink to={to} {...props} />
+    );
+  } else if (to.startsWith("#")) {
+    return (
+      <HashLink to={to} {...props} />
+    );
+  }
+  else {
+    return (
+      <a href={to} {...props} />
+    );
+  }
+}
+
+export default Link;

src/components/NavbarChildLink.tsx

@@ -2,13 +2,13 @@ import React from "react";
 import styled from "styled-components";
 import colors from "@theme/colors";
 import breakpoints from "@theme/breakpoints";
-import Anchor from "./Anchor";
+import { Link } from "@components/index";
 
 interface NavbarChildLinkProps {
   to: string;
 }
 
-const StyledLink = styled(Anchor)`
+const StyledLink = styled(Link)`
   display: block;
   padding: 1rem;
   letter-spacing: 1.5px;

src/components/NavbarDropdownLink.tsx

@@ -1,7 +1,7 @@
 import React, { useState } from "react";
 import styled from "styled-components";
 import DropDownBox from "./DropDownBox";
-import Anchor from "./Anchor";
+import { Link } from "@components/index";
 import colors from "@theme/colors";
 import breakpoints from "@theme/breakpoints";
 
@@ -20,7 +20,7 @@ const Container = styled.div`
   }
 `;
 
-const StyledLink = styled(Anchor)`
+const StyledLink = styled(Link)`
   display: flex;
   flex-flow: row nowrap;
   justify-content: flex-start;

src/components/PageLink.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 import styled from "styled-components";
 import { colors } from "@theme/colors";
-import Anchor from "@components/Anchor";
+import { Link } from "@components/index";
 
 interface PageLinkProps {
   to: string;
@@ -43,7 +43,7 @@ const StyledPageLink = styled.div`
 const PageLink: React.FC<PageLinkProps> = ({ to, desc, children }) => (
   <StyledPageLink>
     <p>{children}</p>
-    <Anchor to={to}>{desc}</Anchor>
+    <Link to={to}>{desc}</Link>
   </StyledPageLink>
 );
 

src/components/Sections/CTASection.tsx

@@ -2,7 +2,7 @@
 import React from "react";
 import styled from "styled-components";
 import { colors } from "@theme/colors";
-import Anchor from "@components/Anchor";
+import { Link } from "@components/index";
 
 const Section = styled.section<{ colors: string }>`
   ${(p) => p.colors}
@@ -91,9 +91,9 @@ const CTASection: React.FC<CTASectionProps> = ({ bgColor = "orange1", link, link
   <Section colors={textColors(bgColor)} {...props}>
     <h1>{children}</h1>
     {link && (
-      <Anchor to={link}>
+      <Link to={link}>
         <h4>{linkText}</h4>
-      </Anchor>
+      </Link>
     )}
   </Section>
 );

src/components/index.tsx

@@ -8,3 +8,4 @@ export { default as TextSection } from "./Sections/TextSection";
 export { default as FullWidthSection } from "./Sections/FullWidthSection";
 export { default as InfoBox } from "./InfoBox";
 export { default as Accordion } from "./Accordion/Accordion";
+export { default as Link } from "./Link";