From aaf7269b4445db1eff787c15f16f2f2fada8081d Mon Sep 17 00:00:00 2001
From: Ardeman <are.theman@gmail.com>
Date: Mon, 3 Feb 2025 18:48:49 +0800
Subject: [PATCH] feat: add Card and Carousel components; integrate them into
 NewsPage layout with Newsletter

---
 app/components/ui/card.tsx     | 15 +++++++++++++++
 app/components/ui/carousel.tsx |  3 +++
 app/pages/news/index.tsx       | 15 +++++++++++++--
 app/pages/news/newsletter.tsx  |  3 +++
 4 files changed, 34 insertions(+), 2 deletions(-)
 create mode 100644 app/components/ui/card.tsx
 create mode 100644 app/components/ui/carousel.tsx
 create mode 100644 app/pages/news/newsletter.tsx

diff --git a/app/components/ui/card.tsx b/app/components/ui/card.tsx
new file mode 100644
index 0000000..3c4fe79
--- /dev/null
+++ b/app/components/ui/card.tsx
@@ -0,0 +1,15 @@
+import type { ComponentProps, FC, PropsWithChildren } from 'react'
+
+type TProperties = PropsWithChildren<ComponentProps<'div'>>
+
+export const Card: FC<TProperties> = (properties) => {
+  const { children, ...rest } = properties
+  return (
+    <div
+      className="border-[.2px] border-black bg-white p-[30px]"
+      {...rest}
+    >
+      {children}
+    </div>
+  )
+}
diff --git a/app/components/ui/carousel.tsx b/app/components/ui/carousel.tsx
new file mode 100644
index 0000000..11f4123
--- /dev/null
+++ b/app/components/ui/carousel.tsx
@@ -0,0 +1,3 @@
+export const Carousel = () => {
+  return <div>Carousel</div>
+}
diff --git a/app/pages/news/index.tsx b/app/pages/news/index.tsx
index 7196647..225a83f 100644
--- a/app/pages/news/index.tsx
+++ b/app/pages/news/index.tsx
@@ -1,7 +1,18 @@
+import { Card } from '~/components/ui/card'
+import { Carousel } from '~/components/ui/carousel'
+
+import { Newsletter } from './newsletter'
+
 export const NewsPage = () => {
   return (
-    <div className="border-[.2px] border-black bg-white p-[30px]">
-      <div>News</div>
+    <div className="relative">
+      <Card>
+        <Carousel />
+      </Card>
+      <Newsletter />
+      <Card>
+        <Carousel />
+      </Card>
     </div>
   )
 }
diff --git a/app/pages/news/newsletter.tsx b/app/pages/news/newsletter.tsx
new file mode 100644
index 0000000..53057e9
--- /dev/null
+++ b/app/pages/news/newsletter.tsx
@@ -0,0 +1,3 @@
+export const Newsletter = () => {
+  return <div>Newsletter</div>
+}