feat: add translation links and styling to PostLayout

Author: rmariuzzo

src/layouts/PostLayout.styles.ts

@@ -54,6 +54,30 @@ export const PostContents = styled(TextBlock).attrs({
   as: 'article'
 })``
 
+export const TranslateBar = styled.div`
+  display: flex;
+  justify-content: center;
+  gap: 0.75rem;
+  margin: 1.5rem 0;
+`
+
+export const TranslateLink = styled.a`
+  font-size: ${$theme.fontSize.copy2}rem;
+  color: ${$theme.color.copyLight};
+  font-weight: ${$theme.fontWeight.semiBold};
+  text-decoration: none;
+  border: 1.5px solid ${$theme.color.copyLight};
+  border-radius: 999px;
+  padding: 0.25em 0.9em;
+  transition: ${$theme.transition.default};
+
+  &:hover {
+    color: ${$theme.color.copy};
+    border-color: ${$theme.color.copy};
+    background-color: ${$theme.color.copy}0D;
+  }
+`
+
 export const PostFooter = styled.footer`
   display: grid;
   grid-template-columns: max-content 1fr max-content;

src/layouts/PostLayout.tsx

@@ -37,6 +37,29 @@ export const PostLayout: React.FC<PostLayoutProps> = ({
           </S.PostOccurrence>
         )}
         <S.PostDate>{formatRFC7231(date)}</S.PostDate>
+        <S.TranslateBar>
+          <S.TranslateLink
+            href={`https://translate.google.com/translate?hl=es&sl=auto&u=${typeof window !== 'undefined' ? window.location.href : ''}`}
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            Traducir
+          </S.TranslateLink>
+          <S.TranslateLink
+            href={`https://translate.google.com/translate?hl=ht&sl=auto&u=${typeof window !== 'undefined' ? window.location.href : ''}`}
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            Tradwi
+          </S.TranslateLink>
+          <S.TranslateLink
+            href={`https://translate.google.com/translate?u=${typeof window !== 'undefined' ? window.location.href : ''}`}
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            Translate
+          </S.TranslateLink>
+        </S.TranslateBar>
         <S.PostContents dangerouslySetInnerHTML={{ __html: contents }} />
         <S.PostFooter>
           {previousSlug && (