Skip to content

Commit

Permalink
Merge pull request #14372 from Baystef/migrate/stablecoinaccordionindex
Browse files Browse the repository at this point in the history 
Migrate StableCoinAccordion/index to tailwind/shadcn
  • Loading branch information
@pettinarip
pettinarip authored Dec 27, 2024
2 parents 26619ff + c823ddc commit eef455a
Show file tree
Hide file tree
Showing 2 changed files with 50 additions and 81 deletions.
4 changes: 3 additions & 1 deletion src/components/StablecoinAccordion/AccordionCustomItem.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -92,7 +92,9 @@ export const AccordionCustomItem = (props: AccordionCustomItemProps) => {
</Tag>
)}
</Flex>
<p className="text-start text-md">{t(contentObj.textPreview)}</p>
<p className="text-start text-md text-body-medium">
{t(contentObj.textPreview)}
</p>
</div>
</Flex>
<MoreOrLessLink isOpen={open} />
Expand Down
127 changes: 47 additions & 80 deletions src/components/StablecoinAccordion/index.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,23 +1,16 @@
import { useTranslation } from "next-i18next"
import { MdArrowForward } from "react-icons/md"
import {
Box,
Flex,
Heading,
Icon,
LinkBox,
LinkOverlay,
} from "@chakra-ui/react"

import { ChildOnlyProp, TranslationKey } from "@/lib/types"

import { ButtonLink } from "@/components/ui/buttons/Button"
import { Flex } from "@/components/ui/flex"
import InlineLink, { BaseLink } from "@/components/ui/Link"
import { LinkBox, LinkOverlay } from "@/components/ui/link-box"

import { Accordion } from "../../../tailwind/ui/accordion"
import { ButtonLink } from "../Buttons"
import CardList from "../CardList"
import InfoBanner from "../InfoBanner"
import InlineLink, { BaseLink } from "../Link"
import OldHeading from "../OldHeading"
import Text from "../OldText"
import Translation from "../Translation"

import {
Expand All @@ -28,19 +21,11 @@ import {
import { useStablecoinAccordion } from "./useStablecoinAccordion"

const SectionTitle = (props: ChildOnlyProp) => (
<OldHeading
as="h4"
fontSize="1.25rem"
fontWeight={700}
lineHeight="22px"
textAlign="start"
mt={0}
{...props}
/>
<h4 className="mb-8 mt-0 text-start text-xl font-bold" {...props} />
)

const StepBoxContainer = (props: ChildOnlyProp) => (
<Box mt={4} mb={8} {...props} />
<div className="mb-8 mt-4" {...props} />
)

const StepBox = (
Expand All @@ -49,51 +34,27 @@ const StepBox = (
const { t } = useTranslation("page-stablecoins")

return (
<Flex
as={LinkBox}
alignItems={{ base: "flex-start", md: "normal" }}
background="background.base"
border="1px"
borderColor="border"
color="text"
flexDirection={{ base: "column", md: "row" }}
p={4}
sx={{
"&:not(:first-of-type)": {
mt: "-1px",
},
}}
_hover={{
background: "ednBackground",
transition: "transform 0.2s",
transform: "scale(1.05)",
}}
>
<Flex justifyContent="space-between" alignItems="center" width="100%">
<Box>
<LinkOverlay
as={BaseLink}
color="inherit"
textDecoration="inherit"
href={props.href}
fontWeight={700}
textAlign="start"
_hover={{
textDecoration: "inherit",
}}
>
{t(props.titleId)}
<LinkBox className="flex flex-col items-start border bg-background p-4 transition-transform duration-200 hover:scale-105 hover:bg-background-highlight not-[:first]:-mt-px md:flex-row md:items-stretch">
<Flex className="w-full items-center justify-between">
<div>
<LinkOverlay asChild>
<BaseLink
className="text-start font-bold text-inherit no-underline hover:no-underline"
href={props.href}
>
{t(props.titleId)}
</BaseLink>
</LinkOverlay>
<Text mb={0}>{t(props.descId)}</Text>
</Box>
<Icon as={MdArrowForward} ms={4} minW={6} />
<p className="mb-0">{t(props.descId)}</p>
</div>
<MdArrowForward className="ms-4 min-w-6" />
</Flex>
</Flex>
</LinkBox>
)
}

const H4 = (props: ChildOnlyProp) => (
<Heading fontSize="1.25rem" fontWeight={700} mb={4} {...props} />
<h4 className="mb-4 text-xl font-bold" {...props} />
)

const StablecoinAccordion = () => {
Expand Down Expand Up @@ -124,7 +85,9 @@ const StablecoinAccordion = () => {
</StepBoxContainer>
<InfoBanner emoji=":light_bulb:">
<H4>{t("page-stablecoins-accordion-swap-editors-tip")}</H4>
<Text>{t("page-stablecoins-accordion-swap-editors-tip-copy")}</Text>
<p className="mb-6 leading-6">
{t("page-stablecoins-accordion-swap-editors-tip-copy")}
</p>
<ButtonLink href="/wallets/find-wallet/">
{t("page-stablecoins-accordion-swap-editors-tip-button")}
</ButtonLink>
Expand All @@ -134,12 +97,12 @@ const StablecoinAccordion = () => {
<SectionTitle>
{t("page-stablecoins-accordion-swap-dapp-title")}
</SectionTitle>
<Text>
<p className="mb-6 leading-6">
<Translation id="page-stablecoins:page-stablecoins-accordion-swap-dapp-intro" />{" "}
<InlineLink href="/get-eth/#dex">
{t("page-stablecoins-accordion-swap-dapp-link")}
</InlineLink>
</Text>
</p>
<CardList
items={cardListGroups.dapps}
imageWidth={DEFAULT_IMAGE_WIDTH}
Expand All @@ -151,9 +114,9 @@ const StablecoinAccordion = () => {
<SectionTitle>
{t("page-stablecoins-accordion-requirements")}
</SectionTitle>
<Text>
<p className="mb-6 leading-6">
{t("page-stablecoins-accordion-buy-requirements-description")}
</Text>
</p>
<StepBoxContainer>
<StepBox
href="/get-eth/"
Expand All @@ -180,9 +143,9 @@ const StablecoinAccordion = () => {
<SectionTitle>
{t("page-stablecoins-accordion-requirements")}
</SectionTitle>
<Text>
<p className="mb-6 leading-6">
{t("page-stablecoins-accordion-earn-requirements-description")}
</Text>
</p>
<StepBoxContainer>
<StepBox
href="/wallets/"
Expand All @@ -195,7 +158,9 @@ const StablecoinAccordion = () => {
<SectionTitle>
{t("page-stablecoins-accordion-earn-projects-title")}
</SectionTitle>
<Text>{t("page-stablecoins-accordion-earn-projects-copy")}</Text>
<p className="mb-6 leading-6">
{t("page-stablecoins-accordion-earn-projects-copy")}
</p>
<CardList
items={cardListGroups.earn}
imageWidth={DEFAULT_IMAGE_WIDTH}
Expand All @@ -207,9 +172,9 @@ const StablecoinAccordion = () => {
<SectionTitle>
{t("page-stablecoins-accordion-requirements")}
</SectionTitle>
<Text>
<p className="mb-6 leading-6">
{t("page-stablecoins-accordion-borrow-requirements-description")}
</Text>
</p>
<StepBoxContainer>
<StepBox
href="/wallets/"
Expand All @@ -225,36 +190,38 @@ const StablecoinAccordion = () => {
<SectionTitle>
{t("page-stablecoins-accordion-borrow-crypto-collateral")}
</SectionTitle>
<Text>
<p className="mb-6 leading-6">
{t("page-stablecoins-accordion-borrow-crypto-collateral-copy")}{" "}
<InlineLink href="#how">
{t("page-stablecoins-accordion-borrow-crypto-collateral-link")}
</InlineLink>
</Text>
<Text>
</p>
<p className="mb-6 leading-6">
{t("page-stablecoins-accordion-borrow-crypto-collateral-copy-p2")}
</Text>
</p>
</LeftColumnPanel>
<RightColumnPanel>
<SectionTitle>
{t("page-stablecoins-accordion-borrow-places-title")}
</SectionTitle>
<Text>{t("page-stablecoins-accordion-borrow-places-intro")}</Text>
<Box mb={8}>
<p className="mb-6 leading-6">
{t("page-stablecoins-accordion-borrow-places-intro")}
</p>
<div className="mb-8">
<CardList
items={cardListGroups.borrow}
imageWidth={DEFAULT_IMAGE_WIDTH}
/>
</Box>
</div>
<SectionTitle>
{t("page-stablecoins-accordion-borrow-risks-title")}
</SectionTitle>
<Text>
<p className="mb-6 leading-6">
{t("page-stablecoins-accordion-borrow-risks-copy")}{" "}
<InlineLink href="/eth/">
{t("page-stablecoins-accordion-borrow-risks-link")}
</InlineLink>
</Text>
</p>
</RightColumnPanel>
</AccordionCustomItem>
</Accordion>
Expand Down

0 comments on commit eef455a

Please sign in to comment.