feat: adj ui page detail, add breadcom component, add media sosial group

2025-02-20 22:20:27 +07:00
parent 878fb640af
commit 2e09e8a962
15 changed files with 471 additions and 74 deletions
@@ -0,0 +1,22 @@
+import type { JSX, SVGProps } from 'react'
+
+export const LinkIcon = (
+  properties: JSX.IntrinsicAttributes & SVGProps<SVGSVGElement>,
+) => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      x="0px"
+      y="0px"
+      width={95}
+      height={95}
+      stroke="currentColor"
+      fill="currentColor"
+      stroke-width="0"
+      viewBox="0 0 1024 1024"
+      {...properties}
+    >
+      <path d="M574 665.4a8.03 8.03 0 0 0-11.3 0L446.5 781.6c-53.8 53.8-144.6 59.5-204 0-59.5-59.5-53.8-150.2 0-204l116.2-116.2c3.1-3.1 3.1-8.2 0-11.3l-39.8-39.8a8.03 8.03 0 0 0-11.3 0L191.4 526.5c-84.6 84.6-84.6 221.5 0 306s221.5 84.6 306 0l116.2-116.2c3.1-3.1 3.1-8.2 0-11.3L574 665.4zm258.6-474c-84.6-84.6-221.5-84.6-306 0L410.3 307.6a8.03 8.03 0 0 0 0 11.3l39.7 39.7c3.1 3.1 8.2 3.1 11.3 0l116.2-116.2c53.8-53.8 144.6-59.5 204 0 59.5 59.5 53.8 150.2 0 204L665.3 562.6a8.03 8.03 0 0 0 0 11.3l39.8 39.8c3.1 3.1 8.2 3.1 11.3 0l116.2-116.2c84.5-84.6 84.5-221.5 0-306.1zM610.1 372.3a8.03 8.03 0 0 0-11.3 0L372.3 598.7a8.03 8.03 0 0 0 0 11.3l39.6 39.6c3.1 3.1 8.2 3.1 11.3 0l226.4-226.4c3.1-3.1 3.1-8.2 0-11.3l-39.5-39.6z"></path>
+    </svg>
+  )
+}
@@ -13,7 +13,7 @@ export const Banner = () => {
          <img
            src={'https://placehold.co/1200x70.png'}
            alt={APP.title}
-            className="h-[70px] w-auto sm:h-full"
+            className="h-[70px] w-[100%] sm:h-full"
          />
        </Link>
        <p className="absolute top-2 mx-10">
@@ -0,0 +1,24 @@
+import { Link } from 'react-router'
+
+// use slog or handel get by url
+interface BreadcrumbProperty {
+  slug: string
+}
+
+const Breadcrumb = (property: BreadcrumbProperty) => {
+  const { slug } = property
+  return (
+    <div className="flex items-center gap-2">
+      <Link to={'#'}>Blog</Link>
+      <div>{'>'}</div>
+      <Link
+        to={'#'}
+        className="text-ellipsis md:text-clip ..."
+      >
+        {slug}
+      </Link>
+    </div>
+  )
+}
+
+export default Breadcrumb
@@ -1,4 +1,4 @@
-import { Link } from 'react-router'
+import { Link, useLocation } from 'react-router'
 import { twMerge } from 'tailwind-merge'

 import { CarouselNextIcon } from '~/components/icons/carousel-next'
@@ -8,6 +8,9 @@ import type { TNews } from '~/types/news'
 import { Button } from './button'

 export const Carousel = (properties: TNews) => {
+  const location = useLocation()
+  const hasCategory = location.pathname.includes('/categories/')
+
  const { title, description, items, type } = properties
  return (
    <div className="">
@@ -20,21 +23,22 @@ export const Carousel = (properties: TNews) => {
            {description}
          </p>
        </div>
-
-        <div className="flex gap-2.5">
-          <CarouselPreviousIcon
-            color="#DCDCDC"
-            className="cursor-pointer"
-            width={45}
-            height={45}
-          />
-          <CarouselNextIcon
-            color="#2E2F7C"
-            className="cursor-pointer"
-            width={45}
-            height={45}
-          />
-        </div>
+        {!hasCategory && (
+          <div className="flex gap-2.5">
+            <CarouselPreviousIcon
+              color="#DCDCDC"
+              className="cursor-pointer"
+              width={45}
+              height={45}
+            />
+            <CarouselNextIcon
+              color="#2E2F7C"
+              className="cursor-pointer"
+              width={45}
+              height={45}
+            />
+          </div>
+        )}
      </div>
      <div
        className={twMerge(
@@ -42,7 +46,7 @@ export const Carousel = (properties: TNews) => {
          type === 'hero' ? 'grid-cols-1' : 'sm:grid-cols-3',
        )}
      >
-        {items.map(({ featured, title, content, tag, slug }, index) => (
+        {items.map(({ featured, title, content, tags, slug }, index) => (
          <div
            key={index}
            className={twMerge(
@@ -67,7 +71,7 @@ export const Carousel = (properties: TNews) => {
              )}
            >
              <div className={`${type === 'hero' ? 'hidden' : ''} `}>
-                {tag?.map((item) => (
+                {tags?.map((item) => (
                  <span className="my-3 mr-2 inline-block rounded bg-gray-200 px-3 py-1">
                    {item}
                  </span>
@@ -93,6 +97,7 @@ export const Carousel = (properties: TNews) => {
                size="block"
                as={Link}
                to={`detail/${slug}`}
+                className={twMerge('', type === 'hero' ? '' : 'mb-5 sm:mb-0')}
              >
                View More
              </Button>
@@ -100,6 +105,24 @@ export const Carousel = (properties: TNews) => {
          </div>
        ))}
      </div>
+      {hasCategory && (
+        <div className="my-5 mt-5 flex flex-row-reverse">
+          <div className="flex gap-2.5">
+            <CarouselPreviousIcon
+              color="#DCDCDC"
+              className="cursor-pointer"
+              width={45}
+              height={45}
+            />
+            <CarouselNextIcon
+              color="#2E2F7C"
+              className="cursor-pointer"
+              width={45}
+              height={45}
+            />
+          </div>
+        </div>
+      )}
    </div>
  )
 }
@@ -0,0 +1,60 @@
+import type { FC } from 'react'
+import { Link } from 'react-router'
+import { twMerge } from 'tailwind-merge'
+
+import { FacebookIcon } from '~/components/icons/facebook'
+import { InstagramIcon } from '~/components/icons/instagram'
+import { LinkIcon } from '~/components/icons/link-icon'
+import { LinkedinIcon } from '~/components/icons/linkedin'
+import { XIcon } from '~/components/icons/x'
+
+interface SocialMediaProperties {
+  className?: string
+}
+
+const dataSocialMedia = [
+  {
+    type: 'link',
+    url: 'post-id/',
+    icon: LinkIcon,
+  },
+  {
+    type: 'facebook',
+    url: 'https://facebook.com/',
+    icon: FacebookIcon,
+  },
+  {
+    type: 'linkedin',
+    url: 'https://linkedin.com/',
+    icon: LinkedinIcon,
+  },
+  {
+    type: 'x',
+    url: 'https://x.com/',
+    icon: XIcon,
+  },
+  {
+    type: 'instagram',
+    url: 'https://instagram.com/',
+    icon: InstagramIcon,
+  },
+]
+
+const IconsSocial: FC<SocialMediaProperties> = ({ className }) => {
+  return (
+    <div className={twMerge('flex gap-2', className)}>
+      {dataSocialMedia.map(({ url, icon: Icon }, index) => (
+        <Link
+          key={index}
+          to={url}
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          <Icon className="h-8 w-8 rounded-full bg-gray-400 p-2 sm:h-10 sm:w-10" />
+        </Link>
+      ))}
+    </div>
+  )
+}
+
+export default IconsSocial
@@ -1,44 +1,38 @@
 import { Button } from '~/components/ui/button'
-import { APP } from '~/data/meta'

 export const Newsletter = () => {
  return (
-    <>
-      <div className="relative col-span-2 my-5 grid max-h-[400px] gap-y-6 bg-[#2E2F7C] p-5 px-10 text-white sm:grid-cols-2 sm:px-10">
-        <div className="grid-1">
-          <h2 className="text-2xl font-bold sm:text-4xl">
-            Join Our Newsletter
-          </h2>
-          <p className="text:md sm:text-lg">
-            Tidak ingin ketinggalan Berita Hukum terhangat? ingin mendapat
-            informasi kajian dan networking terbaru? ikuti Newsletter kami and
-            Stay up to Speed!
-          </p>
-        </div>
-        <div className="w-max-h-[400px] absolute right-0 bottom-0 w-auto sm:top-0">
-          <img
-            src={'https://placehold.co/800x200.png'}
-            alt={APP.title}
-            className="h-full w-auto"
-          />
-        </div>
-        <div className="z-10">
-          <form className="grid gap-5">
-            <input
-              placeholder="Daftarkan Email Disini"
-              className="h-[50px] flex-1 bg-white text-center text-lg font-light text-black placeholder:text-[#777777] focus:ring-0 focus:outline-none"
-              size={1}
-            />
-            <Button
-              type="submit"
-              variant="newsPrimary"
-              size="block"
-            >
-              Subscribe
-            </Button>
-          </form>
-        </div>
+    <div className="flex h-[300px] w-full flex-col md:flex-row">
+      <div className="flex w-full flex-col justify-center gap-5 bg-[#2E2F7C] px-6 py-5 text-white sm:px-30 md:w-[50%]">
+        <h2 className="text-2xl font-bold sm:text-4xl">Join Our Newsletter</h2>
+        <p className="text:md sm:text-lg">
+          Tidak ingin ketinggalan Berita Hukum terhangat? Ingin mendapat
+          informasi kajian dan networking terbaru? Ikuti Newsletter kami dan
+          Stay up to Speed!
+        </p>
      </div>
-    </>
+
+      <div
+        className="flex flex-col justify-center bg-cover bg-center px-20 py-5 sm:w-full md:w-[50%]"
+        style={{
+          backgroundImage: "url('https://placehold.co/400x300.png')",
+        }}
+      >
+        <form className="grid gap-5">
+          <input
+            type="email"
+            placeholder="Daftarkan Email Disini"
+            className="w-full rounded-md border border-gray-300 bg-white p-4 text-sm focus:outline-none"
+          />
+          <Button
+            type="submit"
+            variant="newsPrimary"
+            size="block"
+          >
+            Subscribe
+          </Button>
+        </form>
+      </div>
+    </div>
  )
 }