From 366345c4df762c0fe3ce015a8b9fff73ef502953 Mon Sep 17 00:00:00 2001 From: nyatinte Date: Wed, 16 Aug 2023 19:35:41 +0900 Subject: [PATCH 1/6] =?UTF-8?q?=F0=9F=92=84fix=20alert?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/ui/Alert/Alert.tsx | 29 +++++++++++ src/components/ui/Alert/shadcn.tsx | 48 +++++++++++++++++++ .../ui/{alart.tsx => alartNotShadcn.tsx} | 0 src/lib/markdown/{utils.ts => utils.tsx} | 19 ++++++-- 4 files changed, 91 insertions(+), 5 deletions(-) create mode 100644 src/components/ui/Alert/Alert.tsx create mode 100644 src/components/ui/Alert/shadcn.tsx rename src/components/ui/{alart.tsx => alartNotShadcn.tsx} (100%) rename src/lib/markdown/{utils.ts => utils.tsx} (80%) diff --git a/src/components/ui/Alert/Alert.tsx b/src/components/ui/Alert/Alert.tsx new file mode 100644 index 0000000..469dcfe --- /dev/null +++ b/src/components/ui/Alert/Alert.tsx @@ -0,0 +1,29 @@ +import { FC, ReactNode } from 'react' +import { Alert as AlertContainer, AlertDescription, AlertTitle, AlertVariants } from './shadcn' + +const variantTitleMapper: Record = { + error: 'ERROR!', + success: 'Success!', + warning: 'Warning!', + info: 'Info!', +} + +type AlertProps = { + children?: ReactNode + variant: AlertVariants + containerProps?: Parameters[0] + titleProps?: Parameters[0] + descriptionProps?: Parameters[0] +} +export const Alert: FC = (props) => { + const { children: description, variant } = props + + const alertTitle = variantTitleMapper[variant] + + return ( + + {alertTitle} + {description} + + ) +} diff --git a/src/components/ui/Alert/shadcn.tsx b/src/components/ui/Alert/shadcn.tsx new file mode 100644 index 0000000..069b2ae --- /dev/null +++ b/src/components/ui/Alert/shadcn.tsx @@ -0,0 +1,48 @@ +import * as React from 'react' +import { cva, type VariantProps } from 'class-variance-authority' + +import { cn } from '@/lib/shadcn/utils' + +export type AlertVariants = 'info' | 'success' | 'warning' | 'error' +export const alertVariants = cva( + 'relative w-full rounded-lg border p-4 [&>svg~*]:pl-7 [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground', + { + variants: { + variant: { + error: 'border-red-200 bg-red-50 text-red-700', + success: 'border-green-200 bg-green-50 text-green-700', + warning: 'border-yellow-200 bg-yellow-50 text-yellow-700', + info: 'border-blue-200 bg-blue-50 text-blue-700', + } satisfies Record, + }, + }, +) + +const Alert = React.forwardRef< + HTMLDivElement, + React.HTMLAttributes & VariantProps +>(({ className, variant, ...props }, ref) => ( +
+)) +Alert.displayName = 'Alert' + +const AlertTitle = React.forwardRef>( + ({ className, ...props }, ref) => ( +
+ ), +) +AlertTitle.displayName = 'AlertTitle' + +const AlertDescription = React.forwardRef< + HTMLParagraphElement, + React.HTMLAttributes +>(({ className, ...props }, ref) => ( +
+)) +AlertDescription.displayName = 'AlertDescription' + +export { Alert, AlertTitle, AlertDescription } diff --git a/src/components/ui/alart.tsx b/src/components/ui/alartNotShadcn.tsx similarity index 100% rename from src/components/ui/alart.tsx rename to src/components/ui/alartNotShadcn.tsx diff --git a/src/lib/markdown/utils.ts b/src/lib/markdown/utils.tsx similarity index 80% rename from src/lib/markdown/utils.ts rename to src/lib/markdown/utils.tsx index bdc9ee3..713d849 100644 --- a/src/lib/markdown/utils.ts +++ b/src/lib/markdown/utils.tsx @@ -20,7 +20,8 @@ import { AlartSuccess, AlartWarning, alartStatus, -} from '@/components/ui/alart' +} from '@/components/ui/alartNotShadcn' +import { Alert } from '@/components/ui/Alert/Alert' const myRemarkPlugin: Plugin = () => { const visitor = (node: Node) => { @@ -66,10 +67,18 @@ const markReactProcessor = markHastProcessor().use(rehypeReact, { createElement: React.createElement, Fragment: React.Fragment, components: { - ['error' as keyof JSX.IntrinsicElements]: AlartError, - ['success' as keyof JSX.IntrinsicElements]: AlartSuccess, - ['warning' as keyof JSX.IntrinsicElements]: AlartWarning, - ['info' as keyof JSX.IntrinsicElements]: AlartInfo, + ['error' as keyof JSX.IntrinsicElements]: ({ children }: { children: string }) => ( + + ), + ['success' as keyof JSX.IntrinsicElements]: ({ children }: { children: string }) => ( + + ), + ['warning' as keyof JSX.IntrinsicElements]: ({ children }: { children: string }) => ( + + ), + ['info' as keyof JSX.IntrinsicElements]: ({ children }: { children: string }) => ( + + ), }, }) From 0fcdaf5faecfbcd436137f2e2f112c0d79a5e782 Mon Sep 17 00:00:00 2001 From: nyatinte Date: Wed, 16 Aug 2023 20:03:07 +0900 Subject: [PATCH 2/6] :recycle: Header --- .../header-flexible.tsx => layout/header.tsx} | 26 ++++++----- src/components/{ui => layout}/layout.tsx | 1 + src/components/ui/header.tsx | 45 ------------------- src/hooks/useToggle.ts | 20 +++++++++ src/pages/_app.tsx | 2 +- src/types/PageLink.ts | 4 ++ 6 files changed, 40 insertions(+), 58 deletions(-) rename src/components/{ui/header-flexible.tsx => layout/header.tsx} (67%) rename src/components/{ui => layout}/layout.tsx (99%) delete mode 100644 src/components/ui/header.tsx create mode 100644 src/hooks/useToggle.ts create mode 100644 src/types/PageLink.ts diff --git a/src/components/ui/header-flexible.tsx b/src/components/layout/header.tsx similarity index 67% rename from src/components/ui/header-flexible.tsx rename to src/components/layout/header.tsx index 064ecef..cb6470c 100644 --- a/src/components/ui/header-flexible.tsx +++ b/src/components/layout/header.tsx @@ -1,24 +1,25 @@ import Link from 'next/link' -import { useState } from 'react' +import { FC } from 'react' import { Menu, Search, X } from 'lucide-react' +import { useToggle } from '@/hooks/useToggle' +import { PageLink } from '@/types/PageLink' +import { cn } from '@/lib/shadcn/utils' /** * Header * @returns Header */ -export const Header = () => { - const [isOpen, setOpen] = useState(false) - type PageLink = { name: string; link: string } +export const Header: FC = () => { + const { isOpen, onToggle } = useToggle(false) + const pageLinks: PageLink[] = [ { name: 'Articles', link: '/' }, { name: 'About', link: '/' }, { name: 'Contact', link: '/' }, ] - const handleMenuClick = () => { - setOpen(!isOpen) - } + return ( -
+
@@ -27,7 +28,7 @@ export const Header = () => {
-