From 2242494e2da182ed4424192a69a4148233369210 Mon Sep 17 00:00:00 2001
From: Bhushan Pardeshi <bhushanpardeshi549@gmail.com>
Date: Fri, 8 Nov 2024 17:38:54 +0530
Subject: [PATCH 1/3] migrated

---
 src/components/TutorialMetadata.tsx | 163 +++++++++++-----------------
 1 file changed, 62 insertions(+), 101 deletions(-)

diff --git a/src/components/TutorialMetadata.tsx b/src/components/TutorialMetadata.tsx
index bc081d90304..ae7dab2abca 100644
--- a/src/components/TutorialMetadata.tsx
+++ b/src/components/TutorialMetadata.tsx
@@ -1,22 +1,23 @@
-import { useRouter } from "next/router"
-import { useTranslation } from "next-i18next"
-import { Badge, Box, Flex, HStack, Text } from "@chakra-ui/react"
+import { useRouter } from "next/router";
+import { useTranslation } from "next-i18next";
+import { Badge } from "@chakra-ui/react";
 
-import type { Lang, TranslationKey } from "@/lib/types"
-import { TutorialFrontmatter } from "@/lib/interfaces"
+import type { Lang, TranslationKey } from "@/lib/types";
+import { TutorialFrontmatter } from "@/lib/interfaces";
 
-import CopyToClipboard from "@/components/CopyToClipboard"
-import Emoji from "@/components/Emoji"
-import InlineLink from "@/components/Link"
-import Translation from "@/components/Translation"
-import TutorialTags from "@/components/TutorialTags"
+import CopyToClipboard from "@/components/CopyToClipboard";
+import Emoji from "@/components/Emoji";
+import InlineLink from "@/components/Link";
+import Translation from "@/components/Translation";
+import TutorialTags from "@/components/TutorialTags";
 
-import { getLocaleTimestamp } from "@/lib/utils/time"
+import { getLocaleTimestamp } from "@/lib/utils/time";
+import { Flex } from "./ui/flex";
 
 export type TutorialMetadataProps = {
-  frontmatter: TutorialFrontmatter
-  timeToRead: number
-}
+  frontmatter: TutorialFrontmatter;
+  timeToRead: number;
+};
 
 export enum Skill {
   BEGINNER = "beginner",
@@ -25,120 +26,80 @@ export enum Skill {
 }
 
 export const getSkillTranslationId = (skill: Skill): TranslationKey =>
-  `page-developers-tutorials:page-tutorial-${
-    Skill[skill.toUpperCase() as keyof typeof Skill]
-  }`
+  `page-developers-tutorials:page-tutorial-${Skill[skill.toUpperCase() as keyof typeof Skill]
+  }`;
 
 const TutorialMetadata = ({
   frontmatter,
   timeToRead,
 }: TutorialMetadataProps) => {
-  const { locale } = useRouter()
-  const { t } = useTranslation("page-developers-tutorials")
+  const { locale } = useRouter();
+  const { t } = useTranslation("page-developers-tutorials");
 
-  const hasSource = frontmatter.source && frontmatter.sourceUrl
-  const published = frontmatter.published
-  const author = frontmatter.author
-  const address = frontmatter.address
+  const hasSource = frontmatter.source && frontmatter.sourceUrl;
+  const published = frontmatter.published;
+  const author = frontmatter.author;
+  const address = frontmatter.address;
 
   return (
-    <Flex
-      flexDirection="column"
-      justifyContent="space-between"
-      borderBottomWidth={{ base: 0, lg: "1px" }}
-      borderBottomColor="border"
-    >
-      <Flex justifyContent="space-between" alignItems="center" w="full" mb={8}>
-        <Flex flexWrap="wrap" w="full">
+    <Flex className=" flex-col justify-between pb-2  border-b-0 lg:border-b border-border">
+      <Flex className=" justify-between items-center w-full mb-8">
+        <div className="flex flex-wrap w-full">
           <TutorialTags tags={frontmatter.tags} />
-        </Flex>
-        <Flex
-          as={Badge}
-          variant="secondary"
-          alignSelf="flex-start"
-          mb={2}
-          whiteSpace="nowrap"
-        >
+        </div>
+        <Badge variant="secondary" className="self-start mb-2 whitespace-nowrap">
           {t(getSkillTranslationId(frontmatter.skill as Skill))}
-        </Flex>
+        </Badge>
       </Flex>
-      <HStack
-        mb={6}
-        flexWrap="wrap"
-        mt={-4}
-        fontSize="sm"
-        color="text300"
-        justifyContent="flex-start"
-        alignItems="flex-start"
-        spacing={4}
-      >
+      <div className="flex flex-wrap gap-4 mt-[-1rem] text-sm text-text300 mb-6">
         {author && (
-          <Box>
+          <div>
             <Emoji className="me-2 text-sm" text=":writing_hand:" />
             {author}
-          </Box>
+          </div>
         )}
         {hasSource && (
-          <Box>
+          <div >
             <Emoji className="me-2 text-sm" text=":books:" />
             <InlineLink href={frontmatter.sourceUrl}>
               {frontmatter.source}
             </InlineLink>
-          </Box>
+          </div>
         )}
         {published && (
-          <Box>
+          <div >
             <Emoji className="me-2 text-sm" text=":calendar:" />{" "}
             {getLocaleTimestamp(locale! as Lang, published)}
-          </Box>
+          </div>
         )}
-        <Box>
-          <Emoji className="me-2 text-sm" text=":stopwatch:" />
+        <div >
+          <Emoji className="me-2  text-sm" text=":stopwatch:" />
           {timeToRead} {t("comp-tutorial-metadata-minute-read")} minute read
-        </Box>
-      </HStack>
-      <HStack
-        mb={6}
-        flexWrap="wrap"
-        mt={-4}
-        fontSize="sm"
-        color="text300"
-        justifyContent="flex-start"
-      >
-        {address && (
-          <Flex flexWrap="wrap" w="full" me={4}>
-            <CopyToClipboard text={address}>
-              {(isCopied) => (
-                <Box
-                  color="primary.base"
-                  cursor="pointer"
-                  overflow="hidden"
-                  textOverflow="ellipsis"
-                  fontFamily="monospace"
-                  bg="ednBackground"
-                  px={1}
-                  fontSize="sm"
-                  _hover={{
-                    bg: "primary100",
-                  }}
-                >
-                  <Text
-                    as={Translation}
-                    textTransform="uppercase"
+        </div>
+      </div>
+      {address && (
+        <div className="flex flex-wrap mt-[-1rem] text-sm text-text300 mb-6">
+          <CopyToClipboard text={address}>
+            {(isCopied) => (
+              <div
+                className="text-primary cursor-pointer overflow-hidden text-ellipsis font-mono bg-ednBackground px-1 text-sm hover:bg-primary100"
+              >
+                <div className="uppercase">
+                  <Translation
                     id="comp-tutorial-metadata-tip-author"
                   />{" "}
-                  {address} {isCopied && <Translation id="copied" />}
-                  {isCopied && (
-                    <Emoji className="me-2 text-sm" text=":white_check_mark:" />
-                  )}
-                </Box>
-              )}
-            </CopyToClipboard>
-          </Flex>
-        )}
-      </HStack>
+                </div>
+                {address} {isCopied && <Translation id="copied" />}
+                {isCopied && (
+                  <Emoji className="mr-2 text-sm" text=":white_check_mark:" />
+                )}
+              </div>
+            )}
+          </CopyToClipboard>
+        </div>
+      )}
     </Flex>
-  )
-}
+  );
+};
 
-export default TutorialMetadata
+export default TutorialMetadata;

From 88b49aa976a16de161e67bebc2e912d2321b0e0c Mon Sep 17 00:00:00 2001
From: Bhushan Pardeshi <bhushanpardeshi549@gmail.com>
Date: Sat, 9 Nov 2024 17:59:03 +0530
Subject: [PATCH 2/3] used flex

---
 src/components/TutorialMetadata.tsx | 88 ++++++++++++++---------------
 1 file changed, 44 insertions(+), 44 deletions(-)

diff --git a/src/components/TutorialMetadata.tsx b/src/components/TutorialMetadata.tsx
index ae7dab2abca..78a486e11a8 100644
--- a/src/components/TutorialMetadata.tsx
+++ b/src/components/TutorialMetadata.tsx
@@ -1,23 +1,24 @@
-import { useRouter } from "next/router";
-import { useTranslation } from "next-i18next";
-import { Badge } from "@chakra-ui/react";
+import { useRouter } from "next/router"
+import { useTranslation } from "next-i18next"
+import { Badge } from "@chakra-ui/react"
 
-import type { Lang, TranslationKey } from "@/lib/types";
-import { TutorialFrontmatter } from "@/lib/interfaces";
+import type { Lang, TranslationKey } from "@/lib/types"
+import { TutorialFrontmatter } from "@/lib/interfaces"
 
-import CopyToClipboard from "@/components/CopyToClipboard";
-import Emoji from "@/components/Emoji";
-import InlineLink from "@/components/Link";
-import Translation from "@/components/Translation";
-import TutorialTags from "@/components/TutorialTags";
+import CopyToClipboard from "@/components/CopyToClipboard"
+import Emoji from "@/components/Emoji"
+import InlineLink from "@/components/Link"
+import Translation from "@/components/Translation"
+import TutorialTags from "@/components/TutorialTags"
 
-import { getLocaleTimestamp } from "@/lib/utils/time";
-import { Flex } from "./ui/flex";
+import { getLocaleTimestamp } from "@/lib/utils/time"
+
+import { Flex } from "./ui/flex"
 
 export type TutorialMetadataProps = {
-  frontmatter: TutorialFrontmatter;
-  timeToRead: number;
-};
+  frontmatter: TutorialFrontmatter
+  timeToRead: number
+}
 
 export enum Skill {
   BEGINNER = "beginner",
@@ -27,31 +28,34 @@ export enum Skill {
 
 export const getSkillTranslationId = (skill: Skill): TranslationKey =>
   `page-developers-tutorials:page-tutorial-${Skill[skill.toUpperCase() as keyof typeof Skill]
-  }`;
+  }`
 
 const TutorialMetadata = ({
   frontmatter,
   timeToRead,
 }: TutorialMetadataProps) => {
-  const { locale } = useRouter();
-  const { t } = useTranslation("page-developers-tutorials");
+  const { locale } = useRouter()
+  const { t } = useTranslation("page-developers-tutorials")
 
-  const hasSource = frontmatter.source && frontmatter.sourceUrl;
-  const published = frontmatter.published;
-  const author = frontmatter.author;
-  const address = frontmatter.address;
+  const hasSource = frontmatter.source && frontmatter.sourceUrl
+  const published = frontmatter.published
+  const author = frontmatter.author
+  const address = frontmatter.address
 
   return (
-    <Flex className=" flex-col justify-between pb-2  border-b-0 lg:border-b border-border">
-      <Flex className=" justify-between items-center w-full mb-8">
-        <div className="flex flex-wrap w-full">
+    <Flex className="flex-col justify-between border-b-0 border-border pb-2 lg:border-b">
+      <Flex className="mb-8 w-full items-center justify-between">
+        <Flex className="w-full flex-wrap">
           <TutorialTags tags={frontmatter.tags} />
-        </div>
-        <Badge variant="secondary" className="self-start mb-2 whitespace-nowrap">
+        </Flex>
+        <Badge
+          variant="secondary"
+          className="mb-2 self-start whitespace-nowrap"
+        >
           {t(getSkillTranslationId(frontmatter.skill as Skill))}
         </Badge>
       </Flex>
-      <div className="flex flex-wrap gap-4 mt-[-1rem] text-sm text-text300 mb-6">
+      <Flex className="text-text300 mb-6 mt-[-1rem] flex-wrap gap-4 text-sm">
         {author && (
           <div>
             <Emoji className="me-2 text-sm" text=":writing_hand:" />
@@ -59,7 +63,7 @@ const TutorialMetadata = ({
           </div>
         )}
         {hasSource && (
-          <div >
+          <div>
             <Emoji className="me-2 text-sm" text=":books:" />
             <InlineLink href={frontmatter.sourceUrl}>
               {frontmatter.source}
@@ -67,27 +71,23 @@ const TutorialMetadata = ({
           </div>
         )}
         {published && (
-          <div >
+          <div>
             <Emoji className="me-2 text-sm" text=":calendar:" />{" "}
             {getLocaleTimestamp(locale! as Lang, published)}
           </div>
         )}
-        <div >
-          <Emoji className="me-2  text-sm" text=":stopwatch:" />
+        <div>
+          <Emoji className="me-2 text-sm" text=":stopwatch:" />
           {timeToRead} {t("comp-tutorial-metadata-minute-read")} minute read
         </div>
-      </div>
+      </Flex>
       {address && (
-        <div className="flex flex-wrap mt-[-1rem] text-sm text-text300 mb-6">
+        <Flex className="text-text300 mb-6 mt-[-1rem] flex-wrap text-sm">
           <CopyToClipboard text={address}>
             {(isCopied) => (
-              <div
-                className="text-primary cursor-pointer overflow-hidden text-ellipsis font-mono bg-ednBackground px-1 text-sm hover:bg-primary100"
-              >
+              <div className="bg-ednBackground hover:bg-primary100 cursor-pointer overflow-hidden text-ellipsis px-1 font-mono text-sm text-primary">
                 <div className="uppercase">
-                  <Translation
-                    id="comp-tutorial-metadata-tip-author"
-                  />{" "}
+                  <Translation id="comp-tutorial-metadata-tip-author" />{" "}
                 </div>
                 {address} {isCopied && <Translation id="copied" />}
                 {isCopied && (
@@ -96,10 +96,10 @@ const TutorialMetadata = ({
               </div>
             )}
           </CopyToClipboard>
-        </div>
+        </Flex>
       )}
     </Flex>
-  );
-};
+  )
+}
 
-export default TutorialMetadata;
+export default TutorialMetadata
\ No newline at end of file

From 0e138a20fdeaf4dd97f9cad36956f1e061640583 Mon Sep 17 00:00:00 2001
From: Pablo <pettinarip@gmail.com>
Date: Tue, 24 Dec 2024 12:21:42 +0100
Subject: [PATCH 3/3] fix translation and placement of address text

---
 src/components/TutorialMetadata.tsx | 19 ++++++++++---------
 1 file changed, 10 insertions(+), 9 deletions(-)

diff --git a/src/components/TutorialMetadata.tsx b/src/components/TutorialMetadata.tsx
index 78a486e11a8..d2565a5cb0d 100644
--- a/src/components/TutorialMetadata.tsx
+++ b/src/components/TutorialMetadata.tsx
@@ -27,7 +27,8 @@ export enum Skill {
 }
 
 export const getSkillTranslationId = (skill: Skill): TranslationKey =>
-  `page-developers-tutorials:page-tutorial-${Skill[skill.toUpperCase() as keyof typeof Skill]
+  `page-developers-tutorials:page-tutorial-${
+    Skill[skill.toUpperCase() as keyof typeof Skill]
   }`
 
 const TutorialMetadata = ({
@@ -82,16 +83,16 @@ const TutorialMetadata = ({
         </div>
       </Flex>
       {address && (
-        <Flex className="text-text300 mb-6 mt-[-1rem] flex-wrap text-sm">
+        <Flex className="text-text300 -mt-4 mb-6 flex-wrap text-sm">
           <CopyToClipboard text={address}>
             {(isCopied) => (
-              <div className="bg-ednBackground hover:bg-primary100 cursor-pointer overflow-hidden text-ellipsis px-1 font-mono text-sm text-primary">
-                <div className="uppercase">
-                  <Translation id="comp-tutorial-metadata-tip-author" />{" "}
-                </div>
-                {address} {isCopied && <Translation id="copied" />}
+              <div className="cursor-pointer overflow-hidden text-ellipsis bg-background-highlight px-1 font-mono text-sm text-primary hover:bg-primary-hover hover:text-body-inverse">
+                <span className="uppercase">
+                  <Translation id="page-developers-tutorials:comp-tutorial-metadata-tip-author" />
+                </span>{" "}
+                {address} {isCopied && <Translation id="copied" />}{" "}
                 {isCopied && (
-                  <Emoji className="mr-2 text-sm" text=":white_check_mark:" />
+                  <Emoji className="text-sm" text=":white_check_mark:" />
                 )}
               </div>
             )}
@@ -102,4 +103,4 @@ const TutorialMetadata = ({
   )
 }
 
-export default TutorialMetadata
\ No newline at end of file
+export default TutorialMetadata