ccrsxx / portofolio

My personal website built with Next.js, Tailwind CSS, Firestore, and Vercel

ccrsxx.me

Coming soon...

portofolio's Issues

Issue detected on the blog-stats as well on the project-stats with icons align

Replace to this

import { HiEye, HiClock } from 'react-icons/hi2';
import { Accent } from '@components/ui/accent';
import { ViewsCounter } from '@components/content/views-counter';
import type { Blog } from '@lib/types/contents';
import type { PropsForViews } from '@lib/types/helper';

type BlogStatProps = PropsForViews<Pick<Blog, 'readTime'>>;

export function BlogStats({
  slug,
  readTime,
  increment
}: BlogStatProps): JSX.Element {
  return (
    <div className='flex gap-4 text-sm font-medium text-gray-600 dark:text-gray-300'>
      <div className='flex items-center gap-1'>
      <HiClock className='h-4 w-4' />
        <Accent>{readTime}</Accent>
      </div>
      <div className='flex items-center gap-1'>
      <HiEye className='h-4 w-4' />
        <Accent>
          <ViewsCounter slug={slug} increment={increment} />
        </Accent>
      </div>
    </div>
  );
}

on this component

src/components/blog/blog-stats.tsx

also replace this

import { HiEye, HiUser, HiClock, HiLink } from 'react-icons/hi2';
import { SiGithub, SiYoutube } from 'react-icons/si';
import { CustomLink } from '@components/link/custom-link';
import { ViewsCounter } from '@components/content/views-counter';
import type { IconType } from 'react-icons';
import type { Project } from '@lib/types/contents';
import type { PropsForViews } from '@lib/types/helper';

type ProjectLinks = {
  name: string;
  link: string | undefined;
  Icon: IconType;
};

type ProjectStatsProps = PropsForViews<
  Pick<Project, 'readTime' | 'link' | 'category' | 'github' | 'youtube'>
>;

export function ProjectStats({
  slug,
  link,
  github,
  youtube,
  readTime,
  category,
  increment
}: ProjectStatsProps): JSX.Element {
  const projectLinks: ProjectLinks[] = [
    {
      name: 'Repository',
      link: github,
      Icon: SiGithub
    },
    {
      name: 'Demo',
      link: youtube,
      Icon: SiYoutube
    },
    {
      name: 'Open Live Site',
      link: link,
      Icon: HiLink
    }
  ];

  return (
    <>
      <div className='flex flex-wrap gap-x-4 gap-y-2 text-sm font-medium text-gray-600 dark:text-gray-300'>
        <div className='flex items-center gap-1'>
          <HiClock className='h-4 w-4' />
          <p>{readTime}</p>
        </div>
        <div className='flex items-center gap-1'>
        <HiEye className='h-4 w-4' />
          <ViewsCounter slug={slug} increment={increment} />
        </div>
        {projectLinks.map(
          ({ name, link, Icon }) =>
            link && (
              <div className='flex items-center gap-3' key={name}>
                <i>
                  <Icon className='text-lg text-black dark:text-white' />
                </i>
                <CustomLink href={link}>{name}</CustomLink>
              </div>
            )
        )}
      </div>
      <div className='flex items-center gap-2 text-gray-600 dark:text-gray-300'>
        <i>
          <HiUser className='text-lg' />
        </i>
        <p className='text-sm'>{category}</p>
      </div>
    </>
  );
}

on this component
src/components/project/project-stats.tsx

Dependency Dashboard

This issue lists Renovate updates and detected dependencies. Read the Dependency Dashboard docs to learn more.

Awaiting Schedule

These updates are awaiting their schedule. Click on a checkbox to get an update now.

• fix(deps): update dependency react-icons to v5

Open

These updates have all been created already. Click a checkbox below to force a retry/rebase of any.

• chore(deps): update all non-major dependencies (@commitlint/cli, @commitlint/config-conventional, @headlessui/react, @tanstack/match-sorter-utils, @tanstack/react-table, @testing-library/jest-dom, @testing-library/user-event, @types/node, @types/react, @types/react-dom, @typescript-eslint/eslint-plugin, @typescript-eslint/parser, @vercel/og, clsx, eslint, eslint-plugin-import, firebase, framer-motion, lint-staged, nodemailer, postcss, prettier, prettier-plugin-tailwindcss, rehype-pretty-code, sass, shiki, tailwindcss, typescript)
• fix(deps): update nextjs monorepo to v14 (major) (@next/mdx, eslint-config-next, next)

Detected dependencies

github-actions

.github/workflows/deployment.yaml

• actions/checkout v4
• actions/checkout v4
• actions/checkout v4
• actions/checkout v4

npm

package.json

• @headlessui/react ^1.7.7
• @mdx-js/loader ^3.0.0
• @mdx-js/react ^3.0.0
• @next/mdx ^13.0.7
• @tanstack/match-sorter-utils ^8.7.6
• @tanstack/react-table ^8.7.9
• @vercel/analytics ^1.0.1
• @vercel/og ^0.5.1
• clsx ^2.0.0
• firebase ^10.0.0
• framer-motion ^10.0.0
• next ^13.1.4
• next-auth ^4.19.2
• next-themes ^0.2.1
• nodemailer ^6.9.1
• nprogress ^0.2.0
• react 18.2.0
• react-dom 18.2.0
• react-icons ^4.7.1
• swr ^2.0.1
• @commitlint/cli ^18.0.0
• @commitlint/config-conventional ^18.0.0
• @tailwindcss/typography ^0.5.8
• @testing-library/jest-dom ^6.0.0
• @testing-library/react ^14.0.0
• @testing-library/user-event ^14.0.0
• @types/node 20.9.2
• @types/nodemailer ^6.4.7
• @types/nprogress ^0.2.0
• @types/react 18.2.37
• @types/react-dom 18.2.15
• @typescript-eslint/eslint-plugin ^6.0.0
• @typescript-eslint/parser ^6.0.0
• autoprefixer ^10.4.8
• eslint 8.54.0
• eslint-config-next 13.5.6
• eslint-import-resolver-typescript ^3.4.0
• eslint-plugin-import ^2.26.0
• husky ^8.0.2
• jest ^29.0.0
• jest-environment-jsdom ^29.0.0
• lint-staged ^15.0.0
• postcss ^8.4.16
• prettier ^3.0.0
• prettier-plugin-tailwindcss ^0.5.0
• reading-time ^1.5.0
• rehype-autolink-headings ^7.0.0
• rehype-pretty-code ^0.10.0
• rehype-slug ^6.0.0
• sass ^1.54.4
• shiki ^0.14.0
• tailwindcss ^3.2.4
• typescript 5.2.2

---

• Check this box to trigger a request for Renovate to run again on this repository