From d5e21fa872a58e3b4c66c39dda61f7962764b7e7 Mon Sep 17 00:00:00 2001 From: Wahyu Kurniawan Date: Wed, 28 Feb 2024 12:16:30 +0700 Subject: [PATCH] =?UTF-8?q?=F0=9F=8E=A8=20style:=20adjust=20wavy=20border?= =?UTF-8?q?=20and=20add=20layout=20wavy=20border?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../{wave-border.svg => wave-border-card.svg} | 0 .../frontend/public/wave-border-layout.svg | 13 +++++++++ .../shared/WavyBorder/WavyBorder.tsx | 28 +++++++++++++++++-- 3 files changed, 38 insertions(+), 3 deletions(-) rename packages/frontend/public/{wave-border.svg => wave-border-card.svg} (100%) create mode 100644 packages/frontend/public/wave-border-layout.svg diff --git a/packages/frontend/public/wave-border.svg b/packages/frontend/public/wave-border-card.svg similarity index 100% rename from packages/frontend/public/wave-border.svg rename to packages/frontend/public/wave-border-card.svg diff --git a/packages/frontend/public/wave-border-layout.svg b/packages/frontend/public/wave-border-layout.svg new file mode 100644 index 0000000..d32a0dd --- /dev/null +++ b/packages/frontend/public/wave-border-layout.svg @@ -0,0 +1,13 @@ + + + + + + + + + + + + + diff --git a/packages/frontend/src/components/shared/WavyBorder/WavyBorder.tsx b/packages/frontend/src/components/shared/WavyBorder/WavyBorder.tsx index 45bc723..a4ab1e0 100644 --- a/packages/frontend/src/components/shared/WavyBorder/WavyBorder.tsx +++ b/packages/frontend/src/components/shared/WavyBorder/WavyBorder.tsx @@ -1,15 +1,37 @@ -import React, { ComponentPropsWithoutRef } from 'react'; +import React, { ComponentPropsWithoutRef, useMemo } from 'react'; import { cn } from 'utils/classnames'; -export interface WavyBorderProps extends ComponentPropsWithoutRef<'div'> {} +type WavyBorderType = 'card' | 'layout'; + +export interface WavyBorderProps extends ComponentPropsWithoutRef<'div'> { + type?: WavyBorderType; +} export const WavyBorder = ({ className, children, + type = 'card', ...props }: WavyBorderProps) => { + const imageSrc = useMemo(() => { + switch (type) { + case 'card': + return '/wave-border-card.svg'; + case 'layout': + return '/wave-border-layout.svg'; + default: + return '/wave-border-card.svg'; + } + }, [type]); + return ( -
+
{children}
);