From bdd892ebe8bc9626a0d22f859f49b8751bd84776 Mon Sep 17 00:00:00 2001 From: Wahyu Kurniawan Date: Tue, 27 Feb 2024 20:08:32 +0700 Subject: [PATCH] =?UTF-8?q?=E2=9A=A1=EF=B8=8F=20feat:=20create=20wavy=20bo?= =?UTF-8?q?rder=20component?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/frontend/public/wave-border.svg | 10 ++++++++++ .../components/shared/WavyBorder/WavyBorder.tsx | 16 ++++++++++++++++ .../src/components/shared/WavyBorder/index.ts | 1 + packages/frontend/src/index.css | 8 ++++++++ 4 files changed, 35 insertions(+) create mode 100644 packages/frontend/public/wave-border.svg create mode 100644 packages/frontend/src/components/shared/WavyBorder/WavyBorder.tsx create mode 100644 packages/frontend/src/components/shared/WavyBorder/index.ts diff --git a/packages/frontend/public/wave-border.svg b/packages/frontend/public/wave-border.svg new file mode 100644 index 00000000..94137bb5 --- /dev/null +++ b/packages/frontend/public/wave-border.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/packages/frontend/src/components/shared/WavyBorder/WavyBorder.tsx b/packages/frontend/src/components/shared/WavyBorder/WavyBorder.tsx new file mode 100644 index 00000000..45bc7234 --- /dev/null +++ b/packages/frontend/src/components/shared/WavyBorder/WavyBorder.tsx @@ -0,0 +1,16 @@ +import React, { ComponentPropsWithoutRef } from 'react'; +import { cn } from 'utils/classnames'; + +export interface WavyBorderProps extends ComponentPropsWithoutRef<'div'> {} + +export const WavyBorder = ({ + className, + children, + ...props +}: WavyBorderProps) => { + return ( +
+ {children} +
+ ); +}; diff --git a/packages/frontend/src/components/shared/WavyBorder/index.ts b/packages/frontend/src/components/shared/WavyBorder/index.ts new file mode 100644 index 00000000..1b635a77 --- /dev/null +++ b/packages/frontend/src/components/shared/WavyBorder/index.ts @@ -0,0 +1 @@ +export * from './WavyBorder'; diff --git a/packages/frontend/src/index.css b/packages/frontend/src/index.css index c1375286..9a276aba 100644 --- a/packages/frontend/src/index.css +++ b/packages/frontend/src/index.css @@ -6,4 +6,12 @@ .focus-ring { @apply focus-visible:ring-[3px] focus-visible:ring-snowball-200 focus-visible:ring-offset-1 focus-visible:ring-offset-snowball-500 focus-visible:outline-none; } + + .wave { + background-image: url('../public/wave-border.svg'); + background-repeat: repeat-x; + background-position: top; + background-size: cover; + @apply w-full h-1; + } }