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

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

Browse Source
This commit is contained in:
fredy.siswanto
2025-02-20 22:20:27 +07:00
parent 878fb640af
commit 2e09e8a962
15 changed files with 471 additions and 74 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/components/icons/link-icon.tsx
+22
View File
@@ -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>
)
}
app/components/ui/banner.tsx
+1 -1
View File
@@ -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">
app/components/ui/breadcrumb.tsx
+24
View File
@@ -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
app/components/ui/carousel.tsx
+41 -18
View File
@@ -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>
)
}
app/components/ui/icons-social.tsx
+60
View File
@@ -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
app/components/ui/newsletter.tsx
+31 -37
View File
@@ -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>
)
}
app/pages/news-categories/data.ts
+80
View File
@@ -0,0 +1,80 @@
import type { TNews } from '~/types/news'
export const SPOTLIGHT: TNews = {
title: 'SPOTLIGHT',
description: 'Berita Terhangat hari ini',
type: 'hero',
items: [
{
title: 'Hotman Paris Membuka Perpustakaan di tengah Diskotik',
content:
'Pengacara Kondang, Hotman Paris Hutapea, membuka sebuah perpustakaan baru di dalam diskotik nya yang berlokasi di daerah Jakarta Pusat, Hotman berkata Perpustakaan ini dibuka dengan harapan untuk meningkatkan gairah membaca masyarakat Indonesia, namun sayangnya..',
featured: '/images/news-1.jpg',
slug: 'hotman-paris-membuka-perpustakaan-di-tengah-diskotik',
},
],
}
export const BERITA: TNews = {
title: 'BERITA',
description: 'Berita Terhangat hari ini',
type: 'grid',
items: [
{
title: 'Travelling as a way of self-discovery and progress',
content:
'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros.',
featured: '/images/news-2.jpg',
tags: ['Hukum Property'],
slug: 'travelling-as-a-way-of-self-discovery-and-progress',
},
{
title: 'How does writing influence your personal brand?',
content:
'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros.',
featured: '/images/news-3.jpg',
tags: ['Hukum'],
slug: 'how-does-writing-influence-your-personal-brand',
},
{
title: 'Helping a local business reinvent itself',
content:
'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros.',
featured: '/images/news-4.jpg',
tags: ['Hukum Property', 'PREMIUM CONTENT'],
slug: 'helping-a-local-business-reinvent-itself',
},
],
}
export const KAJIAN: TNews = {
title: 'KAJIAN',
description: 'Berita Terhangat hari ini',
type: 'grid',
items: [
{
title: 'Travelling as a way of self-discovery and progress',
content:
'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros.',
featured: '/images/news-2.jpg',
tags: ['Hukum Property', 'PREMIUM CONTENT'],
slug: 'travelling-as-a-way-of-self-discovery-and-progress',
},
{
title: 'How does writing influence your personal brand?',
content:
'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros.',
featured: '/images/news-3.jpg',
tags: ['Hukum Property', 'PREMIUM CONTENT'],
slug: 'how-does-writing-influence-your-personal-brand',
},
{
title: 'Helping a local business reinvent itself',
content:
'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros.',
featured: '/images/news-4.jpg',
tags: ['Hukum Property', 'PREMIUM CONTENT'],
slug: 'helping-a-local-business-reinvent-itself',
},
],
}
app/pages/news-categories/index.tsx
+14
View File
@@ -0,0 +1,14 @@
import { Card } from '~/components/ui/card'
import { Carousel } from '~/components/ui/carousel'
import { BERITA } from './data'
export const NewsCategoriesPage = () => {
return (
<div className="relative mx-5 sm:mx-10">
<Card>
<Carousel {...BERITA} />
</Card>
</div>
)
}
app/pages/news-detail/data.ts
+35 -1
View File
@@ -1,4 +1,4 @@
import type { TNewsDetail } from '~/types/news'
import type { TNews, TNewsDetail } from '~/types/news'
export const CONTENT: TNewsDetail = {
title: 'Hotman Paris Membuka Perpustakaan di tengah Diskotik',
@@ -8,4 +8,38 @@ export const CONTENT: TNewsDetail = {
slug: 'hotman-paris-membuka-perpustakaan-di-tengah-diskotik',
author: 'John Doe',
date: new Date(),
categories: [],
tags: ['Category', 'Popular'],
}
export const BERITA: TNews = {
title: 'BERITA',
description: 'Berita Terhangat hari ini',
type: 'grid',
items: [
{
title: 'Travelling as a way of self-discovery and progress',
content:
'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros.',
featured: '/images/news-2.jpg',
tags: ['Hukum Property'],
slug: 'travelling-as-a-way-of-self-discovery-and-progress',
},
{
title: 'How does writing influence your personal brand?',
content:
'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros.',
featured: '/images/news-3.jpg',
tags: ['Hukum'],
slug: 'how-does-writing-influence-your-personal-brand',
},
{
title: 'Helping a local business reinvent itself',
content:
'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros.',
featured: '/images/news-4.jpg',
tags: ['Hukum Property', 'PREMIUM CONTENT'],
slug: 'helping-a-local-business-reinvent-itself',
},
],
}
app/pages/news-detail/index.tsx
+87 -8
View File
@@ -1,16 +1,95 @@
import Breadcrumb from '~/components/ui/breadcrumb'
import { Card } from '~/components/ui/card'
import { CONTENT } from './data'
import { Carousel } from '~/components/ui/carousel'
import IconsSocial from '~/components/ui/icons-social'
// eslint-disable-next-line no-restricted-imports
import { BERITA, CONTENT } from '~/pages/news-detail/data'
export const NewsDetailPage = () => {
const { title } = CONTENT
const { title, content, featured, slug, author, date, tags } = CONTENT
return (
<div className="relative">
<div className="relative mx-5 sm:mx-10">
<Card>
<h2 className="text-2xl font-extrabold text-[#2E2F7C] sm:text-4xl">
{title}
</h2>
News Detail
<div className="py-5 sm:px-30">
<Breadcrumb slug={slug} />
<h2 className="text-xl font-extrabold text-[#2E2F7C] sm:text-4xl">
{title}
</h2>
{/* next planing create component for this section */}
<div className="my-5 flex w-full items-center justify-between align-middle">
<div className="flex items-center gap-2 align-middle">
<img
src={'https://placehold.co/50x50.png'}
alt={title}
className="h-12 w-12 rounded-full"
/>
<div>
<h4 className="text-md">{author}</h4>
<p className="text-sm">
{date.toJSON().slice(0, 10)} . 5 min read{' '}
</p>
</div>
</div>
<IconsSocial className="ml-auto"></IconsSocial>
</div>
{/* end next planing create component for this section */}
<div className="w-full bg-amber-200">
<img
src={featured}
alt={title}
className="object-center"
/>
</div>
<article className="my-8">
<div>{content}</div>
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nesciunt
asperiores corporis, facilis praesentium tenetur rerum officiis!
Perspiciatis, sed cupiditate. Libero eos, cupiditate perferendis
delectus accusamus culpa veniam voluptatem sequi soluta hic optio
dolor, provident perspiciatis nihil sit. Est facere itaque natus
saepe odio ipsam recusandae at mollitia deserunt. Laboriosam atque
id aperiam tempore corporis magnam dolores vitae, maxime modi
quibusdam architecto sed aliquam error suscipit distinctio ratione
dolorum exercitationem vero sapiente? Commodi rem quidem vitae
eaque, consequuntur maxime facilis ea aliquam odio atque magni
delectus rerum fugiat aliquid, qui omnis incidunt libero quasi
distinctio exercitationem, reprehenderit minus officiis velit enim.
</article>
<div className="flex items-end justify-between border-b-3 border-b-gray-300 py-4">
<div className="flex flex-col">
<p className="mb-2">Share this post</p>
<IconsSocial />
</div>
<div className="flex flex-wrap items-end">
{tags?.map((tag) => (
<span
key={tag}
className="mx-2 rounded bg-gray-300 p-1"
>
{tag}
</span>
))}
</div>
</div>
<div className="mt-5 flex items-center gap-2 align-middle">
<img
src={'https://placehold.co/50x50.png'}
alt={title}
className="h-12 w-12 rounded-full"
/>
<div>
<h4 className="text-md">{author}</h4>
<p className="text-sm">Job title, Company name</p>
</div>
</div>
</div>
</Card>
<Card>
<Carousel {...BERITA} />
</Card>
</div>
)
app/pages/news/data.ts
+6 -6
View File
@@ -25,7 +25,7 @@ export const BERITA: TNews = {
content:
'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros.',
featured: '/images/news-2.jpg',
tag: ['Hukum Property'],
tags: ['Hukum Property'],
slug: 'travelling-as-a-way-of-self-discovery-and-progress',
},
{
@@ -33,7 +33,7 @@ export const BERITA: TNews = {
content:
'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros.',
featured: '/images/news-3.jpg',
tag: ['Hukum'],
tags: ['Hukum'],
slug: 'how-does-writing-influence-your-personal-brand',
},
{
@@ -41,7 +41,7 @@ export const BERITA: TNews = {
content:
'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros.',
featured: '/images/news-4.jpg',
tag: ['Hukum Property', 'PREMIUM CONTENT'],
tags: ['Hukum Property', 'PREMIUM CONTENT'],
slug: 'helping-a-local-business-reinvent-itself',
},
],
@@ -57,7 +57,7 @@ export const KAJIAN: TNews = {
content:
'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros.',
featured: '/images/news-2.jpg',
tag: ['Hukum Property', 'PREMIUM CONTENT'],
tags: ['Hukum Property', 'PREMIUM CONTENT'],
slug: 'travelling-as-a-way-of-self-discovery-and-progress',
},
{
@@ -65,7 +65,7 @@ export const KAJIAN: TNews = {
content:
'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros.',
featured: '/images/news-3.jpg',
tag: ['Hukum Property', 'PREMIUM CONTENT'],
tags: ['Hukum Property', 'PREMIUM CONTENT'],
slug: 'how-does-writing-influence-your-personal-brand',
},
{
@@ -73,7 +73,7 @@ export const KAJIAN: TNews = {
content:
'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros.',
featured: '/images/news-4.jpg',
tag: ['Hukum Property', 'PREMIUM CONTENT'],
tags: ['Hukum Property', 'PREMIUM CONTENT'],
slug: 'helping-a-local-business-reinvent-itself',
},
],
app/routes/_layout.news.categories.$slug.tsx
+7
View File
@@ -0,0 +1,7 @@
import { NewsCategoriesPage } from '~/pages/news-categories'
const NewsCategoriesLayout = () => {
return <NewsCategoriesPage />
}
export default NewsCategoriesLayout
app/types/news.ts
+3 -2
View File
@@ -2,7 +2,7 @@ export type TNews = {
title: string
description: string
type: 'hero' | 'grid'
items: Pick<TNewsDetail, 'title' | 'content' | 'featured' | 'slug' | 'tag'>[]
items: Pick<TNewsDetail, 'title' | 'content' | 'featured' | 'slug' | 'tags'>[]
}
export type TNewsDetail = {
@@ -12,5 +12,6 @@ export type TNewsDetail = {
author: string
date: Date
slug: string
tag?: Array<string>
tags?: Array<string>
categories?: Array<string>
}