Merge pull request #13569 from TylerAPfledderer/feat/learn-page-shadcn

[ShadCN] refactor(pages/learn): migrate to ShadCN

src/components/FeedbackWidget/FixedDot.tsx

@@ -2,12 +2,12 @@ import { forwardRef } from "react"
 import { useTranslation } from "next-i18next"
 import type { ButtonHTMLAttributes } from "react"
 
+import { Button } from "@/components/ui/buttons/Button"
+
 import { cn } from "@/lib/utils/cn"
 
 import { FeedbackGlyphIcon } from "../icons"
 
-import { Button } from "@/../tailwind/ui/buttons/Button"
-
 type FixedDotProps = ButtonHTMLAttributes<HTMLButtonElement> & {
   isExpanded: boolean
   offsetBottom?: boolean

src/components/FeedbackWidget/index.tsx

@@ -1,6 +1,8 @@
 import { useTranslation } from "next-i18next"
 import { MdClose } from "react-icons/md"
 
+import { Button } from "@/components/ui/buttons/Button"
+
 import {
   Popover,
   PopoverClose,
@@ -11,8 +13,6 @@ import {
 import FixedDot from "./FixedDot"
 import { useFeedbackWidget } from "./useFeedbackWidget"
 
-import { Button } from "@/../tailwind/ui/buttons/Button"
-
 const FeedbackWidget = () => {
   const { t } = useTranslation("common")
   const {

src/components/Footer.tsx

@@ -9,9 +9,8 @@ import Translation from "@/components/Translation"
 import { cn } from "@/lib/utils/cn"
 import { scrollIntoView } from "@/lib/utils/scrollIntoView"
 
-import { Button } from "../../tailwind/ui/buttons/Button"
-import { BaseLink } from "../../tailwind/ui/Link"
-
+import { Button } from "./ui/buttons/Button"
+import { BaseLink } from "./ui/Link"
 import { List, ListItem } from "./ui/list"
 
 const socialLinks = [

src/components/Nav/Menu/index.tsx

@@ -13,7 +13,7 @@ import { cn } from "@/lib/utils/cn"
 
 import { MAIN_NAV_ID, SECTION_LABELS } from "@/lib/constants"
 
-import { Button } from "../../../../tailwind/ui/buttons/Button"
+import { Button } from "../../ui/buttons/Button"
 import type { NavSections } from "../types"
 
 import { useNavMenu } from "./useNavMenu"

src/components/Nav/Mobile/FooterButton.tsx

@@ -1,10 +1,7 @@
 import { forwardRef } from "react"
 import type { IconType } from "react-icons"
 
-import {
-  Button,
-  type ButtonProps,
-} from "../../../../tailwind/ui/buttons/Button"
+import { Button, type ButtonProps } from "../../ui/buttons/Button"
 
 type FooterButtonProps = ButtonProps & {
   icon: IconType

src/components/Nav/Mobile/HamburgerButton.tsx

@@ -6,10 +6,7 @@ import { cn } from "@/lib/utils/cn"
 
 import { HAMBURGER_BUTTON_ID } from "@/lib/constants"
 
-import {
-  Button,
-  type ButtonProps,
-} from "../../../../tailwind/ui/buttons/Button"
+import { Button, type ButtonProps } from "../../ui/buttons/Button"
 
 const hamburgerSvg =
   "M 2 13 l 10 0 l 0 0 l 10 0 M 4 19 l 8 0 M 12 19 l 8 0 M 2 25 l 10 0 l 0 0 l 10 0"

src/components/Nav/Mobile/LvlAccordion.tsx

@@ -6,8 +6,8 @@ import { cn } from "@/lib/utils/cn"
 import { trackCustomEvent } from "@/lib/utils/matomo"
 import { cleanPath } from "@/lib/utils/url"
 
-import { Button } from "../../../../tailwind/ui/buttons/Button"
-import { BaseLink } from "../../../../tailwind/ui/Link"
+import { Button } from "../../ui/buttons/Button"
+import { BaseLink } from "../../ui/Link"
 import type { Level, NavItem, NavSectionKey } from "../types"
 
 import ExpandIcon from "./ExpandIcon"

src/components/Nav/Mobile/index.tsx

@@ -6,7 +6,7 @@ import {
   SheetTrigger,
 } from "@/components/ui/sheet"
 
-import { ButtonProps } from "../../../../tailwind/ui/buttons/Button"
+import { ButtonProps } from "../../ui/buttons/Button"
 import type { NavSections } from "../types"
 
 import HamburgerButton from "./HamburgerButton"

src/components/SkipLink.tsx

@@ -2,7 +2,7 @@ import { useTranslation } from "next-i18next"
 
 import { MAIN_CONTENT_ID } from "@/lib/constants"
 
-import { BaseLink } from "../../tailwind/ui/Link"
+import { BaseLink } from "./ui/Link"
 
 export const SkipLink = () => {
   const { t } = useTranslation()

tailwind/ui/__stories__/Button.stories.tsx → src/components/ui/__stories__/Button.stories.tsx

@@ -1,11 +1,11 @@
 import { MdChevronRight, MdExpandMore } from "react-icons/md"
 import type { Meta, StoryObj } from "@storybook/react"
 
-import { HStack, VStack } from "../../../src/components/ui/flex"
 import { Button, type ButtonVariantProps } from "../buttons/Button"
+import { HStack, VStack } from "../flex"
 
 const meta = {
-  title: "Atoms / Form / ShadCn Buttons",
+  title: "Atoms / Form / Buttons",
   component: Button,
   args: {
     children: "What is Ethereum?",

tailwind/ui/__stories__/ButtonLink.stories.tsx → src/components/ui/__stories__/ButtonLink.stories.tsx

@@ -3,7 +3,7 @@ import type { Meta, StoryObj } from "@storybook/react/*"
 import { ButtonLink as ButtonLinkComponent } from "../buttons/Button"
 
 const meta = {
-  title: "Atoms / Form / ShadCn Buttons",
+  title: "Atoms / Form / Buttons",
   component: ButtonLinkComponent,
 } satisfies Meta<typeof ButtonLinkComponent>
 

tailwind/ui/__stories__/ButtonTwoLines.stories.tsx → src/components/ui/__stories__/ButtonTwoLines.stories.tsx

@@ -5,7 +5,7 @@ import { Meta, StoryObj } from "@storybook/react"
 import ButtonTwoLinesComponent from "../buttons/ButtonTwoLines"
 
 const meta = {
-  title: "Atoms / Form / ShadCn Buttons / ButtonTwoLines",
+  title: "Atoms / Form / Buttons / ButtonTwoLines",
   component: ButtonTwoLinesComponent,
 } satisfies Meta<typeof ButtonTwoLinesComponent>
 

tailwind/ui/buttons/ButtonTwoLines.tsx → src/components/ui/buttons/ButtonTwoLines.tsx

@@ -2,7 +2,7 @@ import type { IconType } from "react-icons/lib"
 
 import { cn } from "@/lib/utils/cn"
 
-import { Stack } from "../../../src/components/ui/flex"
+import { Stack } from "../flex"
 
 import {
   Button,

src/components/ui/sheet.tsx

@@ -4,7 +4,7 @@ import * as SheetPrimitive from "@radix-ui/react-dialog"
 
 import { cn } from "@/lib/utils/cn"
 
-import { Button } from "../../../tailwind/ui/buttons/Button"
+import { Button } from "./buttons/Button"
 
 const Sheet = SheetPrimitive.Root