add stack-button

app/projects/app-router-auth/page.tsx

@@ -14,11 +14,16 @@ export default async function AppRouterAuthPage() {
 				note='Auth'
 				title='Next.js: Authentication'
 				description='Best practices for Server Components, Actions, Middleware'
+				tags={['TypeScript', 'Cookie', 'SSR']}
 			/>
 
 			<div id='content-wrapper' className=''>
 				<p>Prisma ORM</p>
-				<CodeBlock text={code1} fileName={codePath1.slice(4)} />
+				<CodeBlock
+					text={code1}
+					fileName={codePath1.slice(4)}
+					github={{ path: codePath1 }}
+				/>
 			</div>
 
 			{user && <p>Hi, {user.name}!</p>}

src/shared/lib/fetch-github-file/fetch-github-file.ts

@@ -1,17 +1,12 @@
+import { GitHubPath } from '@/shared/types/github-path';
 import { cache } from 'react';
 
-interface GitHubFileContent {
-	owner?: string;
-	repo?: string;
-	path: string;
-}
-
 export const fetchGitHubFileContent = cache(
 	async ({
 		owner = 'MarkMelior',
 		repo = 'simple-app',
 		path,
-	}: GitHubFileContent): Promise<string> => {
+	}: GitHubPath): Promise<string> => {
 		const url = `https://api.github.com/repos/${owner}/${repo}/contents/${path}`;
 
 		try {

src/shared/lib/github-repo-link/github-repo-link.ts

@@ -0,0 +1,9 @@
+import { GitHubPath } from '@/shared/types/github-path';
+
+export const gitHubRepoLink = ({
+	owner = 'MarkMelior',
+	repo = 'simple-app',
+	path,
+}: GitHubPath) => {
+	return `https://github.com/${owner}/${repo}/blob/master/${path}`;
+};

src/shared/lib/index.ts

@@ -1,4 +1,5 @@
 import { fetchGitHubFileContent } from './fetch-github-file/fetch-github-file';
+import { gitHubRepoLink } from './github-repo-link/github-repo-link';
 import { cn } from './tailwind-merge/tailwind-merge';
 
-export { cn, fetchGitHubFileContent };
+export { cn, fetchGitHubFileContent, gitHubRepoLink };

src/shared/types/github-path.ts

@@ -0,0 +1,5 @@
+export interface GitHubPath {
+	path: string;
+	owner?: string;
+	repo?: string;
+}

src/shared/ui/code-block/code-block.scss

@@ -0,0 +1,5 @@
+.code-block__wrapper {
+	.linenumber {
+		@apply text-default-400;
+	}
+}

src/shared/ui/code-block/code-block.tsx

@@ -1,29 +1,35 @@
 'use client';
 
+import { gitHubRepoLink } from '@/shared/lib';
+import { GitHubPath } from '@/shared/types/github-path';
 import { Theme } from '@/shared/types/theme';
-import { Button, Skeleton } from '@nextui-org/react';
+import { Button, Skeleton, Tooltip } from '@nextui-org/react';
 import { useTheme } from 'next-themes';
+import Link from 'next/link';
 import { FC, useEffect, useMemo, useState } from 'react';
 import { BiLogoJavascript, BiLogoTypescript } from 'react-icons/bi';
+import { LuEye } from 'react-icons/lu';
 import { TbFileUnknown } from 'react-icons/tb';
 import SyntaxHighlighter from 'react-syntax-highlighter';
 import {
 	atomOneDark,
 	atomOneLight,
 } from 'react-syntax-highlighter/dist/cjs/styles/hljs';
 import { CopyButton } from '../copy-button/copy-button';
-import cls from './code-block.module.scss';
+import './code-block.scss';
 
 interface CodeBlockProps {
 	text: string;
 	fileName?: string;
 	language?: 'TypeScript' | 'JavaScript';
 	linesLength?: number;
+	github?: GitHubPath;
 }
 
 export const CodeBlock: FC<CodeBlockProps> = ({
 	text,
 	fileName,
+	github,
 	language = 'TypeScript',
 	linesLength = 15,
 }) => {
@@ -54,31 +60,53 @@ export const CodeBlock: FC<CodeBlockProps> = ({
 	}
 
 	return (
-		<div className='my-4 rounded-md overflow-hidden border border-default-200'>
+		<div className='my-4 rounded-md overflow-hidden border border-default-200 code-block__wrapper'>
 			<div className='bg-default-100 text-sm text-default-600 py-2 px-3 flex justify-between items-center'>
 				{/* <Tooltip placement='top' content={language}> */}
 				{renderIcon}
 				{/* </Tooltip> */}
 				{fileName ? fileName : language}
-				<CopyButton text={text} />
+				<div className='flex gap-1 items-center'>
+					{github?.path && (
+						<Tooltip content='View code on GitHub'>
+							<Button
+								as={Link}
+								href={gitHubRepoLink(github)}
+								target='_blank'
+								variant='light'
+								isIconOnly
+								radius='sm'
+								size='sm'
+							>
+								<LuEye
+									size={20}
+									className='text-default-400 group-hover:text-default-600'
+								/>
+							</Button>
+						</Tooltip>
+					)}
+					<CopyButton text={text} />
+				</div>
 			</div>
 
 			<SyntaxHighlighter
 				language={language}
 				showLineNumbers
 				style={theme === Theme.DARK ? atomOneDark : atomOneLight}
-				className='!bg-default-100 border-t-1 border-default-200'
+				className='!bg-default-100 border-t-1 border-default-200 text-sm'
 			>
 				{isExpanded || !isLong ? text : lines.slice(0, linesLength).join('\n')}
 			</SyntaxHighlighter>
 
 			{isLong && (
-				<div className={cls.showWrapper}>
-					{!isExpanded && <div className={cls.gradient} />}
+				<div className='relative'>
+					{!isExpanded && (
+						<div className='absolute pointer-events-none w-full -top-32 h-32 bg-gradient-to-t from-default-100' />
+					)}
 					<Button
 						radius='none'
 						onClick={() => setIsExpanded(!isExpanded)}
-						className={cls.showButton}
+						className='bg-default-100 text-default-600 py-2 px-3 w-full text-left data-[pressed=true]:scale-100 hover:bg-default-200'
 					>
 						{isExpanded ? 'Hide' : 'Show more'}
 					</Button>

src/shared/ui/index.ts

@@ -2,5 +2,15 @@ import { CodeBlock } from './code-block/code-block';
 import { DownloadCvButton } from './download-cv-button/download-cv-button';
 import { PageLoader } from './page-loader/page-loader';
 import { SidebarNavigation } from './sidebar-navigation/sidebar-navigation';
+import { StackVariants } from './stack-buttons/model/data';
+import { StackButtons } from './stack-buttons/stack-buttons';
 
-export { CodeBlock, DownloadCvButton, PageLoader, SidebarNavigation };
+export {
+	CodeBlock,
+	DownloadCvButton,
+	PageLoader,
+	SidebarNavigation,
+	StackButtons,
+};
+
+export type { StackVariants };

src/shared/ui/sidebar-navigation/model/data.tsx

@@ -95,25 +95,34 @@ export const SidebarItems: SidebarItemsProps[] = [
 				link: '/projects/app-router-auth',
 				gitPath: '/app/projects/app-router-auth/page.tsx',
 			},
-			{
-				name: 'Infinity scroll + Virtualization',
-				link: '/projects/infinity-scroll-virtualization',
-				gitPath: '/app/projects/infinity-scroll-virtualization/page.tsx',
-			},
 			{
 				name: 'Hook useMessage',
 				link: '/projects/use-message',
 				gitPath: '/src/shared/hooks/useMessage/useMessage.tsx',
 			},
+			// {
+			// 	name: 'Infinity scroll + Virtualization',
+			// 	link: '/projects/infinity-scroll-virtualization',
+			// 	gitPath: '/app/projects/infinity-scroll-virtualization/page.tsx',
+			// },
 		],
 	},
 	{
-		title: '3D Graphics',
+		title: 'UI Components',
 		item: [
 			{
-				name: 'RTX 3070 Ti',
-				link: '/projects/video-card',
+				name: 'Card 180° Rotating',
+				link: '/projects/card-rotating',
 			},
 		],
 	},
+	// {
+	// 	title: '3D Graphics',
+	// 	item: [
+	// 		{
+	// 			name: 'RTX 3070 Ti',
+	// 			link: '/projects/video-card',
+	// 		},
+	// 	],
+	// },
 ];

src/shared/ui/stack-buttons/model/data.tsx

@@ -0,0 +1,47 @@
+import { BiLogoJavascript, BiLogoTypescript } from 'react-icons/bi';
+import { MdOutlineCookie } from 'react-icons/md';
+import { RiNextjsFill } from 'react-icons/ri';
+import { TbServerBolt } from 'react-icons/tb';
+
+export type StackVariants =
+	| 'TypeScript'
+	| 'RTK Query'
+	| 'JavaScript'
+	| 'Cookie'
+	| 'Next.js'
+	| 'SSR';
+
+interface ButtonProps {
+	icon: JSX.Element;
+	colorText?: string;
+	color?: string;
+}
+
+export const StackButtonData: Record<StackVariants[number], ButtonProps> = {
+	TypeScript: {
+		icon: <BiLogoTypescript size={20} />,
+		color: 'bg-blue-500/10',
+		colorText: 'text-blue-500',
+	},
+	JavaScript: {
+		icon: <BiLogoJavascript size={20} />,
+		color: 'bg-yellow-500/10',
+		colorText: 'text-yellow-500',
+	},
+	'RTK Query': {
+		icon: <></>,
+		color: 'bg-blue-500/10',
+		colorText: 'text-blue-500',
+	},
+	Cookie: {
+		icon: <MdOutlineCookie size={18} />,
+		color: 'bg-yellow-500/10',
+		colorText: 'text-yellow-500',
+	},
+	'Next.js': {
+		icon: <RiNextjsFill size={20} />,
+	},
+	SSR: {
+		icon: <TbServerBolt size={18} />,
+	},
+};

src/shared/ui/stack-buttons/stack-buttons.tsx

@@ -0,0 +1,36 @@
+import { cn } from '@/shared/lib';
+import { Button } from '@nextui-org/react';
+import { StackButtonData, StackVariants } from './model/data';
+
+interface StackButtonsProps {
+	tags: StackVariants[];
+	isColored?: boolean;
+	className?: string;
+}
+
+export const StackButtons = ({
+	tags,
+	isColored = true,
+	className,
+}: StackButtonsProps) => {
+	return (
+		<div className={cn('flex gap-2 flex-wrap', className)}>
+			{tags.map((tag) => (
+				<Button
+					key={tag}
+					variant='flat'
+					disableRipple
+					size='sm'
+					startContent={StackButtonData[tag]?.icon}
+					className={`${
+						(isColored && StackButtonData[tag]?.color) || 'bg-default-500/10'
+					} ${
+						(isColored && StackButtonData[tag]?.colorText) || 'text-default-700'
+					} cursor-default`}
+				>
+					{tag}
+				</Button>
+			))}
+		</div>
+	);
+};

src/widgets/header/header.tsx

@@ -1,3 +1,4 @@
+import { StackButtons, StackVariants } from '@/shared/ui';
 import { cn, Skeleton } from '@nextui-org/react';
 
 interface HeaderProps {
@@ -6,6 +7,7 @@ interface HeaderProps {
 	title: string;
 	description: string;
 	isLoading?: boolean;
+	tags?: StackVariants[];
 }
 
 export const Header: React.FC<HeaderProps> = ({
@@ -14,6 +16,7 @@ export const Header: React.FC<HeaderProps> = ({
 	description,
 	note,
 	isLoading,
+	tags,
 }) => {
 	if (isLoading) {
 		return <HeaderSkeleton />;
@@ -32,6 +35,8 @@ export const Header: React.FC<HeaderProps> = ({
 				</div>
 			</div>
 			<p className='mt-2 text-lg text-default-600'>{description}</p>
+
+			<StackButtons tags={tags} isColored={false} className='mt-6' />
 		</header>
 	);
 };

src/widgets/light/light.tsx

@@ -3,7 +3,7 @@ import cls from './light.module.scss';
 export const Light = () => {
 	return (
 		<>
-			<div className='absolute z-20 top-0 inset-x-0 flex justify-center overflow-hidden pointer-events-none'>
+			<div className='absolute z-20 top-0 inset-x-0 flex justify-center overflow-hidden pointer-events-none select-none'>
 				<div className='w-[108rem] flex-none flex justify-end'>
 					<picture>
 						<source srcSet='/images/light.avif' type='image/avif' />