Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

styles(blog): UI improvements #468

Merged
merged 14 commits into from
Dec 16, 2024
Merged
Changes from 1 commit
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
styles: update Breadcrumbs style
DiogoSoaress committed Sep 26, 2024
commit 464e7f394fe42ad836333e185d4d2a6c120d7d86
31 changes: 12 additions & 19 deletions src/components/Blog/BreadcrumbsNav/index.tsx
Original file line number Diff line number Diff line change
@@ -1,13 +1,12 @@
import type { ReactNode } from 'react'
import type { UrlObject } from 'url'
import { Breadcrumbs, Typography } from '@mui/material'
import Link from 'next/link'
import css from './styles.module.css'
import { type UrlObject } from 'url'
import CategoryIcon from '@/public/images/Blog/category-icon.svg'
import { type ReactNode } from 'react'
import { AppRoutes } from '@/config/routes'
import AngleIcon from '@/public/images/angle-icon.svg'
import css from './styles.module.css'

const TYPOGRAPHY_VARIANT = 'caption'
const TYPOGRAPHY_COLOR = 'text.primary'
const TYPOGRAPHY_VARIANT = 'body2'

type BreadcrumbsType = {
category: string
@@ -16,30 +15,24 @@ type BreadcrumbsType = {

const createBreadcrumb = (key: string, text: ReactNode, linkProps: string | UrlObject) => (
<Link key={key} href={linkProps}>
<Typography variant={TYPOGRAPHY_VARIANT} color={TYPOGRAPHY_COLOR}>
{text}
</Typography>
<Typography variant={TYPOGRAPHY_VARIANT}>{text}</Typography>
</Link>
)

const BreadcrumbsNav = ({ category, title }: BreadcrumbsType) => {
const breadcrumbs = [
createBreadcrumb('1', 'Blog', { pathname: AppRoutes.blog.index }),
createBreadcrumb(
'2',
<div className={css.category}>
<CategoryIcon />
{category}
</div>,
{ pathname: AppRoutes.blog.index, query: { category } },
),
<Typography key="3" variant={TYPOGRAPHY_VARIANT} color={TYPOGRAPHY_COLOR}>
createBreadcrumb('2', <>{category}</>, {
pathname: AppRoutes.blog.index,
query: { category },
}),
<Typography key="3" variant={TYPOGRAPHY_VARIANT} className={css.title}>
{title}
</Typography>,
]

return (
<Breadcrumbs separator=">" className={css.breadcrumbs}>
<Breadcrumbs separator={<AngleIcon />} className={css.breadcrumbs}>
{breadcrumbs}
</Breadcrumbs>
)
26 changes: 14 additions & 12 deletions src/components/Blog/BreadcrumbsNav/styles.module.css
Original file line number Diff line number Diff line change
@@ -1,23 +1,25 @@
.breadcrumbs,
.breadcrumbs li {
display: flex;
align-items: center;
}

.breadcrumbs a {
color: var(--mui-palette-text-primary);
margin-bottom: 24px;
transition-duration: var(--transition-duration);
}

.breadcrumbs a:hover {
color: var(--mui-palette-text-primary);
text-decoration: underline;
}

.breadcrumbs :global .MuiBreadcrumbs-separator {
margin: 0 4px;
}

.breadcrumbs :global .MuiTypography-root {
line-height: inherit;
width: 8px;
height: 8px;
}

.category {
display: flex;
gap: 4px;
align-items: center;
.title {
width: 290px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}