Skip to content

Commit

Permalink
Merge pull request #14335 from bhushanpardeshii/migrate_tutorialmetadata
Browse files Browse the repository at this point in the history
migrated `TutorialMetadata.tsx` to shadcn/tailwind
  • Loading branch information
pettinarip authored Dec 24, 2024
2 parents d042f4a + 0e138a2 commit 6552f4e
Showing 1 changed file with 36 additions and 74 deletions.
110 changes: 36 additions & 74 deletions src/components/TutorialMetadata.tsx
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import { useRouter } from "next/router"
import { useTranslation } from "next-i18next"
import { Badge, Box, Flex, HStack, Text } from "@chakra-ui/react"
import { Badge } from "@chakra-ui/react"

import type { Lang, TranslationKey } from "@/lib/types"
import { TutorialFrontmatter } from "@/lib/interfaces"
Expand All @@ -13,6 +13,8 @@ import TutorialTags from "@/components/TutorialTags"

import { getLocaleTimestamp } from "@/lib/utils/time"

import { Flex } from "./ui/flex"

export type TutorialMetadataProps = {
frontmatter: TutorialFrontmatter
timeToRead: number
Expand Down Expand Up @@ -42,101 +44,61 @@ const TutorialMetadata = ({
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 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} />
</Flex>
<Flex
as={Badge}
<Badge
variant="secondary"
alignSelf="flex-start"
mb={2}
whiteSpace="nowrap"
className="mb-2 self-start 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}
>
<Flex className="text-text300 mb-6 mt-[-1rem] flex-wrap gap-4 text-sm">
{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>
<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"
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>
</Flex>
{address && (
<Flex className="text-text300 -mt-4 mb-6 flex-wrap text-sm">
<CopyToClipboard text={address}>
{(isCopied) => (
<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="text-sm" text=":white_check_mark:" />
)}
</div>
)}
</CopyToClipboard>
</Flex>
)}
</Flex>
)
}
Expand Down

0 comments on commit 6552f4e

Please sign in to comment.