legalgonews/legalgo-FE-reactrouter
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: add Carousel navigation icons and update Carousel component layout

Browse Source
This commit is contained in:
Ardeman 2025-02-04 18:47:26 +08:00
parent a0f37af772
commit a2acd315d9
9 changed files with 102 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
app/components/icons/carousel-next.tsx Normal file
View File

@ -0,0 +1,30 @@
import type { JSX, SVGProps } from 'react'
export const CarouselNextIcon = (
properties: JSX.IntrinsicAttributes & SVGProps<SVGSVGElement>,
) => {
return (
<svg
width={56}
height={57}
viewBox="0 0 56 57"
fill="none"
xmlns="http://www.w3.org/2000/svg"
{...properties}
>
<path
d="M28 53.5c13.807 0 25-11.193 25-25s-11.193-25-25-25-25 11.193-25 25 11.193 25 25 25z"
stroke="currentColor"
strokeWidth={6}
strokeLinejoin="round"
/>
<path
d="M24.25 39.75L35.5 28.5 24.25 17.25"
stroke="currentColor"
strokeWidth={6}
strokeLinecap="round"
strokeLinejoin="round"
/>
</svg>
)
}

30
app/components/icons/carousel-previous.tsx Normal file
View File

@ -0,0 +1,30 @@
import type { JSX, SVGProps } from 'react'
export const CarouselPreviousIcon = (
properties: JSX.IntrinsicAttributes & SVGProps<SVGSVGElement>,
) => {
return (
<svg
width={56}
height={57}
viewBox="0 0 56 57"
fill="none"
xmlns="http://www.w3.org/2000/svg"
{...properties}
>
<path
d="M28 3.5c-13.807 0-25 11.193-25 25s11.193 25 25 25 25-11.193 25-25-11.193-25-25-25z"
stroke="currentColor"
strokeWidth={6}
strokeLinejoin="round"
/>
<path
d="M31.75 17.25L20.5 28.5l11.25 11.25"
stroke="currentColor"
strokeWidth={6}
strokeLinecap="round"
strokeLinejoin="round"
/>
</svg>
)
}

1
app/components/icons/facebook.tsx
View File

@ -11,6 +11,7 @@ export const FacebookIcon = (
width={100}
height={100}
viewBox="0 0 30 30"
fill="currentColor"
{...properties}
>
<path d="M15 3C8.373 3 3 8.373 3 15c0 6.016 4.432 10.984 10.206 11.852V18.18h-2.969v-3.154h2.969v-2.099c0-3.475 1.693-5 4.581-5 1.383 0 2.115.103 2.461.149v2.753h-1.97c-1.226 0-1.654 1.163-1.654 2.473v1.724h3.593l-.487 3.154h-3.106v8.697C22.481 26.083 27 21.075 27 15c0-6.627-5.373-12-12-12z" />

1
app/components/icons/instagram.tsx
View File

@ -11,6 +11,7 @@ export const InstagramIcon = (
width={100}
height={100}
viewBox="0 0 30 30"
fill="currentColor"
{...properties}
>
<path d="M9.998 3C6.139 3 3 6.142 3 10.002v10C3 23.861 6.142 27 10.002 27h10C23.861 27 27 23.858 27 19.998v-10C27 6.139 23.858 3 19.998 3h-10zM22 7a1 1 0 110 2 1 1 0 010-2zm-7 2c3.309 0 6 2.691 6 6s-2.691 6-6 6-6-2.691-6-6 2.691-6 6-6zm0 2a4 4 0 00-4 4 4 4 0 004 4 4 4 0 004-4 4 4 0 00-4-4z" />

1
app/components/icons/linkedin.tsx
View File

@ -11,6 +11,7 @@ export const LinkedinIcon = (
width={100}
height={100}
viewBox="0 0 30 30"
fill="currentColor"
{...properties}
>
<path d="M24 4H6a2 2 0 00-2 2v18a2 2 0 002 2h18a2 2 0 002-2V6a2 2 0 00-2-2zM10.954 22h-2.95v-9.492h2.95V22zM9.449 11.151a1.72 1.72 0 110-3.44 1.72 1.72 0 010 3.44zM22.004 22h-2.948v-4.616c0-1.101-.02-2.517-1.533-2.517-1.535 0-1.771 1.199-1.771 2.437V22h-2.948v-9.492h2.83v1.297h.04c.394-.746 1.356-1.533 2.791-1.533 2.987 0 3.539 1.966 3.539 4.522V22z" />

2
app/components/icons/search.tsx
View File

@ -14,7 +14,7 @@ export const SearchIcon = (
>
<path
d="M11.875 20c-2.27 0-4.192-.787-5.765-2.36-1.573-1.573-2.36-3.495-2.36-5.765 0-2.27.786-4.192 2.36-5.765 1.574-1.573 3.496-2.36 5.765-2.36 2.27 0 4.191.787 5.766 2.36 1.575 1.573 2.362 3.495 2.359 5.765a7.619 7.619 0 01-1.625 4.75l7 7c.23.23.344.52.344.875 0 .354-.115.646-.344.875-.23.23-.52.344-.875.344-.354 0-.646-.115-.875-.344l-7-7A7.618 7.618 0 0111.875 20zm0-2.5c1.563 0 2.89-.547 3.985-1.64 1.094-1.093 1.64-2.422 1.64-3.985 0-1.563-.547-2.891-1.64-3.984-1.092-1.092-2.42-1.64-3.985-1.641-1.564-.002-2.892.545-3.984 1.641C6.8 8.987 6.253 10.315 6.25 11.875c-.003 1.56.545 2.888 1.641 3.985 1.097 1.097 2.425 1.643 3.984 1.64z"
fill="#fff"
fill="currentColor"
/>
</svg>
)

1
app/components/icons/x.tsx
View File

@ -11,6 +11,7 @@ export const XIcon = (
width={100}
height={100}
viewBox="0 0 30 30"
fill="currentColor"
{...properties}
>
<path d="M6 4a2 2 0 00-2 2v18a2 2 0 002 2h18a2 2 0 002-2V6a2 2 0 00-2-2H6zm2.648 5h4.612l2.691 3.848L19.281 9h1.451l-4.128 4.781L21.654 21h-4.611l-2.986-4.27L10.369 21H8.895l4.505-5.205L8.648 9zm2.23 1.184l6.755 9.627h1.789l-6.756-9.627h-1.787z" />

43
app/components/ui/carousel.tsx
View File

@ -1,28 +1,57 @@
import { twMerge } from 'tailwind-merge'
import { CarouselNextIcon } from '~/components/icons/carousel-next'
import { CarouselPreviousIcon } from '~/components/icons/carousel-previous'
import type { TNews } from '~/types/news'
import { Button } from './button'
export const Carousel = (properties: TNews) => {
const { title, description, items, type } = properties
return (
<div>
<div>
<h2>{title}</h2>
<p>{description}</p>
<div className="mb-[30px] flex items-center justify-between border-b border-black pb-[30px]">
<div className="grid">
<h2 className="text-4xl font-extrabold text-[#2E2F7C]">{title}</h2>
<p className="text-2xl font-light text-[#777777] italic">
{description}
</p>
</div>
<div className="flex gap-2.5">
<CarouselPreviousIcon
color="#DCDCDC"
className="cursor-pointer"
/>
<CarouselNextIcon
color="#2E2F7C"
className="cursor-pointer"
/>
</div>
</div>
<div
className={twMerge(
type === 'hero' ? 'grid grid-cols-1' : 'grid grid-cols-3',
'grid gap-x-8',
type === 'hero' ? 'grid-cols-1' : 'grid-cols-3',
)}
>
{items.map(({ image, title, content }, index) => (
<div key={index}>
<div
key={index}
className={twMerge(
'grid gap-x-8',
type === 'hero' ? 'grid-cols-3' : '',
)}
>
<img
className={twMerge(type === 'hero' ? 'col-span-2' : '')}
src={image}
alt={title}
/>
<h3>{title}</h3>
<p>{content}</p>
<div>
<h3>{title}</h3>
<p>{content}</p>
<Button size="block">View More</Button>
</div>
</div>
))}
</div>

2
app/layouts/footer-links.tsx
View File

@ -23,7 +23,7 @@ export const FooterLinks = () => {
>
{Icon && (
<Icon
fill="white"
color="white"
width={24}
height={24}
/>