migrated

Author: bhushanpardeshii

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;