fix: update image aspect ratios in carousel and category sections

feat: create NewsAuthor component and update news detail page
feat: add Instagram share button to social share component
2025-03-09 06:46:46 +07:00 · 2025-03-08 21:29:39 +07:00 · 2025-03-08 20:53:30 +07:00 · 2025-03-08 20:36:43 +07:00 · 2025-03-08 20:25:41 +07:00 · 2025-03-08 15:01:52 +07:00
11 changed files with 143 additions and 103 deletions
--- a/.gitignore
+++ b/.gitignore
@ -1,5 +1,7 @@
 .DS_Store
 /node_modules/
+.vscode/cspell.json
+.vscode/.cspell/
 .env

 # React Router
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@ -26,6 +26,5 @@
    "buttonClassName",
    "leftNodeClassName",
    "rightNodeClassName"
-  ],
-  "cSpell.words": []
+  ]
 }
--- a/app/apis/admin/get-news.ts
+++ b/app/apis/admin/get-news.ts
@ -29,6 +29,7 @@ const dataResponseSchema = z.object({
 })

 export type TNewsResponse = z.infer<typeof newsResponseSchema>
+export type TAuthor = z.infer<typeof authorSchema>

 export const getNews = async (parameters: THttpServer) => {
  try {
--- a/app/components/icons/link-icon.tsx
+++ b/app/components/icons/link-icon.tsx
@ -1,22 +0,0 @@
-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"
-      strokeWidth="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>
-  )
-}
--- a/app/components/ui/carousel-section.tsx
+++ b/app/components/ui/carousel-section.tsx
@ -84,7 +84,7 @@ export const CarouselSection = (properties: TNews) => {
              >
                <div className="flex flex-col justify-between">
                  <img
-                    className="aspect-[5/4] max-h-[280px] w-full rounded-md object-cover"
+                    className="aspect-[174/100] max-h-[280px] w-full rounded-md object-cover sm:aspect-[5/4]"
                    src={featured}
                    alt={title}
                  />
--- a/app/components/ui/category-section.tsx
+++ b/app/components/ui/category-section.tsx
@ -46,7 +46,7 @@ export const CategorySection = (properties: TNews) => {
            >
              <img
                className={twMerge(
-                  'aspect-[5/4] w-full rounded-md object-cover',
+                  'aspect-[174/100] w-full rounded-md object-cover sm:aspect-[5/4]',
                )}
                src={featured}
                alt={title}
--- a/app/components/ui/news-author.tsx
+++ b/app/components/ui/news-author.tsx
@ -0,0 +1,34 @@
+import type { TAuthor } from '~/apis/admin/get-news'
+import { ProfileIcon } from '~/components/icons/profile'
+import { formatDate } from '~/utils/formatter'
+
+type TDetailNewsAuthor = {
+  author?: TAuthor
+  live_at?: string
+  text?: string
+}
+
+export const NewsAuthor = ({ author, live_at, text }: TDetailNewsAuthor) => {
+  return (
+    <div className="mb-2 flex items-center gap-2 align-middle">
+      {author?.profile_picture ? (
+        <img
+          src={author?.profile_picture}
+          alt={author?.name}
+          className="h-12 w-12 rounded-full bg-[#C4C4C4] object-cover"
+        />
+      ) : (
+        <ProfileIcon className="h-12 w-12 rounded-full bg-[#C4C4C4]" />
+      )}
+
+      <div>
+        <h4 className="text-md">{author?.name}</h4>
+        <p className="flex gap-1 text-sm">
+          <span>{live_at && `${formatDate(live_at)}`}</span>
+          <span>·</span>
+          <span>{text}</span>
+        </p>
+      </div>
+    </div>
+  )
+}
--- a/app/components/ui/social-share.tsx
+++ b/app/components/ui/social-share.tsx
@ -1,59 +1,72 @@
-import type { FC } from 'react'
-import { Link } from 'react-router'
-import { twMerge } from 'tailwind-merge'
+import { LinkIcon } from '@heroicons/react/20/solid'
+import { useState } from 'react'
+import {
+  FacebookShareButton,
+  LinkedinShareButton,
+  TwitterShareButton,
+} from 'react-share'

 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'

-type SocialMediaProperties = {
-  className?: string
-  slug?: string
+type SocialShareButtonsProperties = {
+  url: string
+  title: 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,
-  },
-]
+export const SocialShareButtons = ({
+  url,
+  title,
+}: SocialShareButtonsProperties) => {
+  const [showPopup, setShowPopup] = useState(false)
+
+  const handleCopyLink = () => {
+    navigator.clipboard.writeText(url)
+    setShowPopup(true)
+    setTimeout(() => setShowPopup(false), 2000)
+  }
+
+  const handleInstagramShare = () => {
+    const instagramUrl = `https://www.instagram.com/direct/new/?text=${encodeURIComponent(title + ' ' + url)}`
+    window.open(instagramUrl, '_blank')
+  }

-export 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 className="flex items-center space-x-2">
+      {showPopup && (
+        <div className="absolute top-0 rounded-lg border-2 border-gray-400 bg-white p-2 shadow-lg">
+          Link berhasil disalin!
+        </div>
+      )}
+      <button onClick={handleCopyLink}>
+        <LinkIcon className="h-8 w-8 rounded-full bg-gray-400 p-2 sm:h-10 sm:w-10" />
+      </button>
+      <FacebookShareButton
+        url={url}
+        title={title}
+      >
+        <FacebookIcon className="h-8 w-8 rounded-full bg-gray-400 p-2 sm:h-10 sm:w-10" />
+      </FacebookShareButton>
+
+      <LinkedinShareButton
+        url={url}
+        title={title}
+      >
+        <LinkedinIcon className="h-8 w-8 rounded-full bg-gray-400 p-2 sm:h-10 sm:w-10" />
+      </LinkedinShareButton>
+
+      <TwitterShareButton
+        url={url}
+        title={title}
+      >
+        <XIcon className="h-8 w-8 rounded-full bg-gray-400 p-2 sm:h-10 sm:w-10" />
+      </TwitterShareButton>
+
+      <button onClick={handleInstagramShare}>
+        <InstagramIcon className="h-8 w-8 rounded-full bg-gray-400 p-2 sm:h-10 sm:w-10" />
+      </button>
    </div>
  )
 }
--- a/app/pages/news-detail/index.tsx
+++ b/app/pages/news-detail/index.tsx
@ -3,21 +3,20 @@ import { useReadingTime } from 'react-hook-reading-time'
 import { useRouteLoaderData } from 'react-router'

 import type { TTagResponse } from '~/apis/common/get-tags'
-import { ProfileIcon } from '~/components/icons/profile'
 import { Card } from '~/components/ui/card'
 import { CarouselSection } from '~/components/ui/carousel-section'
-import { IconsSocial } from '~/components/ui/social-share'
+import { NewsAuthor } from '~/components/ui/news-author'
+import { SocialShareButtons } from '~/components/ui/social-share'
 import { BERITA } from '~/data/contents'
 import type { loader } from '~/routes/_news.detail.$slug'
-import { formatDate } from '~/utils/formatter'

 export const NewsDetailPage = () => {
  const loaderData = useRouteLoaderData<typeof loader>(
    'routes/_news.detail.$slug',
  )
-
+  const currentUrl = globalThis.location
  const { newsDetailData } = loaderData || {}
-  const { title, content, featured_image, slug, author, live_at, tags } =
+  const { title, content, featured_image, author, live_at, tags } =
    newsDetailData || {}

  const { text } = useReadingTime(content || '')
@ -30,31 +29,18 @@ export const NewsDetailPage = () => {
            {title}
          </h2>

-          {/* START TODO: create component for this section */}
          <div className="my-5 w-full items-center justify-between gap-2 align-middle sm:flex">
-            <div className="mb-2 flex items-center gap-2 align-middle">
-              {author?.profile_picture ? (
-                <img
-                  src={author?.profile_picture}
-                  alt={author?.name}
-                  className="h-12 w-12 rounded-full bg-[#C4C4C4] object-cover"
-                />
-              ) : (
-                <ProfileIcon className="h-12 w-12 rounded-full bg-[#C4C4C4]" />
-              )}
-
-              <div>
-                <h4 className="text-md">{author?.name}</h4>
-                <p className="flex gap-1 text-sm">
-                  <span>{live_at && `${formatDate(live_at)}`}</span>
-                  <span>·</span>
-                  <span>{text}</span>
-                </p>
-              </div>
-            </div>
-            <IconsSocial className="flex-row" />
+            <NewsAuthor
+              author={author}
+              live_at={live_at}
+              text={text}
+            />
+            <SocialShareButtons
+              url={`${currentUrl}`}
+              title={`${title}`}
+            />
          </div>
-          {/* END TODO: create component for this section */}
+
          <div className="w-full bg-amber-200">
            <img
              src={featured_image}
@ -71,9 +57,10 @@ export const NewsDetailPage = () => {
          <div className="items-end justify-between border-b-gray-300 py-4 sm:flex">
            <div className="flex flex-col max-sm:mb-3">
              <p className="mb-2">Share this post</p>
-              <IconsSocial
-                className="a"
-                slug={slug}
+
+              <SocialShareButtons
+                url={`${currentUrl}`}
+                title={`${title}`}
              />
            </div>
            <div className="flex flex-wrap items-end gap-2">
--- a/package.json
+++ b/package.json
@ -44,6 +44,7 @@
    "react-hook-form": "^7.54.2",
    "react-hook-reading-time": "^1.0.0",
    "react-router": "^7.1.3",
+    "react-share": "^5.2.2",
    "remix-hook-form": "^6.1.3",
    "tailwind-merge": "^3.0.1",
    "xior": "^0.6.3",
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@ -98,6 +98,9 @@ importers:
      react-router:
        specifier: ^7.1.3
        version: 7.1.3(react-dom@19.0.0(react@19.0.0))(react@19.0.0)
+      react-share:
+        specifier: ^5.2.2
+        version: 5.2.2(react@19.0.0)
      remix-hook-form:
        specifier: ^6.1.3
        version: 6.1.3(react-dom@19.0.0(react@19.0.0))(react-hook-form@7.54.2(react@19.0.0))(react-router@7.1.3(react-dom@19.0.0(react@19.0.0))(react@19.0.0))(react@19.0.0)
@ -3133,6 +3136,9 @@ packages:
  jsonfile@6.1.0:
    resolution: {integrity: sha512-5dgndWOriYSm5cnYaJNhalLNDKOqFwyDB/rr1E9ZsGciGvKPs8R2xYGCacuf3z6K1YKDz182fd+fY3cn3pMqXQ==}

+  jsonp@0.2.1:
+    resolution: {integrity: sha512-pfog5gdDxPdV4eP7Kg87M8/bHgshlZ5pybl+yKxAnCZ5O7lCIn7Ixydj03wOlnDQesky2BPyA91SQ+5Y/mNwzw==}
+
  jsonparse@1.3.1:
    resolution: {integrity: sha512-POQXvpdL69+CluYsillJ7SUhKvytYjW9vG/GKpnf+xP8UWgYEM/RaMzHHofbALDiKbbP1W8UEYmgGl39WkPZsg==}
    engines: {'0': node >= 0.2.0}
@ -3955,6 +3961,11 @@ packages:
      react-dom:
        optional: true

+  react-share@5.2.2:
+    resolution: {integrity: sha512-z0nbOX6X6vHHWAvXduNkYeJUKTKNpKM5Xpmc5a2BxjJhUWl+sE7AsSEMmYEUj2DuDjZr5m7KFIGF0sQPKcUN6w==}
+    peerDependencies:
+      react: ^17 || ^18 || ^19
+
  react-simple-animate@3.5.3:
    resolution: {integrity: sha512-Ob+SmB5J1tXDEZyOe2Hf950K4M8VaWBBmQ3cS2BUnTORqHjhK0iKG8fB+bo47ZL15t8d3g/Y0roiqH05UBjG7A==}
    peerDependencies:
@ -7904,6 +7915,12 @@ snapshots:
    optionalDependencies:
      graceful-fs: 4.2.11

+  jsonp@0.2.1:
+    dependencies:
+      debug: 2.6.9
+    transitivePeerDependencies:
+      - supports-color
+
  jsonparse@1.3.1: {}

  jsx-ast-utils@3.3.5:
@ -8698,6 +8715,14 @@ snapshots:
    optionalDependencies:
      react-dom: 19.0.0(react@19.0.0)

+  react-share@5.2.2(react@19.0.0):
+    dependencies:
+      classnames: 2.5.1
+      jsonp: 0.2.1
+      react: 19.0.0
+    transitivePeerDependencies:
+      - supports-color
+
  react-simple-animate@3.5.3(react-dom@19.0.0(react@19.0.0)):
    dependencies:
      react-dom: 19.0.0(react@19.0.0)
Author	SHA1	Message	Date
fredy.siswanto	ecd1900acc	fix: update image aspect ratios in carousel and category sections	2025-03-09 06:46:46 +07:00
fredy.siswanto	0b6327e2fb	feat: create NewsAuthor component and update news detail page	2025-03-08 21:29:39 +07:00
fredy.siswanto	06608c7b5d	feat: add Instagram share button to social share component	2025-03-08 20:53:30 +07:00
fredy.siswanto	333fa32eda	Merge remote-tracking branch 'origin/master' into feature/slicing	2025-03-08 20:36:43 +07:00
fredy.siswanto	1881032ed2	feat: implement social share buttons	2025-03-08 20:25:41 +07:00
fredy.siswanto	46e009f888	feat: update news detail page to display author's avatar and name	2025-03-08 15:01:52 +07:00