Building this Site

Hosenur published this article 10/29/2023

Every developer has that time of the year, when they redesign their personal portfolio website, using a new technology, a fresh new UI and what not. First let's create a new Next.js project.

GNU BashBash
1npx create-next-app
TypeScriptcomponents/Snippet.tsx
1'use client';
2import React from 'react'
3import { Highlight, themes, Prism } from "prism-react-renderer"
4import { SiTypescript, SiGnubash } from "@icons-pack/react-simple-icons"
5import { CopyIcon } from 'lucide-react';
6import { code } from '@/utils/fonts';
7const iconMappings: any
8  = {
9  "tsx": <SiTypescript size={15} />,
10  "bash": <SiGnubash size={15} />
11}
12

13export default function Snippet({ language, fileName, codeBlock }: any) {
14  return (
15    <div>
16      <Highlight
17        theme={themes.nightOwl}
18        code={codeBlock.trim()}
19        language={language}
20      >
21        {({ style, tokens, getLineProps, getTokenProps }) => (
22          <pre className='border border-zinc-800 p-0 bg-zinc-900'>
23            <div className='flex mx-0 gap-2.5 items-center  px-5 py-2.5  border-b border-zinc-800 bg-zinc-950 mb-2.5 text-zinc-400'>
24              <>
25                {
26                  iconMappings[language]}
27                <span>{
28                  fileName ? fileName : language.toUpperCase()
29                }</span>
30              </>
31              <CopyIcon size={20} className='ml-auto cursor-pointer' />
32

33            </div>
34            <div className={'px-5 py-2.5 ' + code.className}>
35

36              {tokens.map((line, i) => (
37                <div key={i} {...getLineProps({ line })}>
38                  <span style={{ marginRight: 20 }}>{i + 1}</span>
39                  {line.map((token, key) => (
40                    <span key={key} {...getTokenProps({ token })} />
41                  ))}
42                </div>
43              ))}
44            </div>
45          </pre>
46        )}
47      </Highlight>
48

49    </div >
50  )
51}