feat: add Card and Carousel components; integrate them into NewsPage layout with Newsletter
This commit is contained in:
parent
35b7e86687
commit
aaf7269b44
15
app/components/ui/card.tsx
Normal file
15
app/components/ui/card.tsx
Normal file
@ -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>
|
||||
)
|
||||
}
|
||||
3
app/components/ui/carousel.tsx
Normal file
3
app/components/ui/carousel.tsx
Normal file
@ -0,0 +1,3 @@
|
||||
export const Carousel = () => {
|
||||
return <div>Carousel</div>
|
||||
}
|
||||
@ -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>
|
||||
)
|
||||
}
|
||||
|
||||
3
app/pages/news/newsletter.tsx
Normal file
3
app/pages/news/newsletter.tsx
Normal file
@ -0,0 +1,3 @@
|
||||
export const Newsletter = () => {
|
||||
return <div>Newsletter</div>
|
||||
}
|
||||
Loading…
x
Reference in New Issue
Block a user