From 3ac5257937201c31c87f12e39033d28117763bb1 Mon Sep 17 00:00:00 2001
From: MarkMelior <mark.melior@yandex.ru>
Date: Wed, 10 Jul 2024 17:09:03 +0300
Subject: [PATCH] add stack-button

---
 app/projects/app-router-auth/page.tsx         |  7 ++-
 .../fetch-github-file/fetch-github-file.ts    |  9 +---
 .../lib/github-repo-link/github-repo-link.ts  |  9 ++++
 src/shared/lib/index.ts                       |  3 +-
 src/shared/types/github-path.ts               |  5 ++
 .../ui/code-block/code-block.module.scss      | 21 ---------
 src/shared/ui/code-block/code-block.scss      |  5 ++
 src/shared/ui/code-block/code-block.tsx       | 44 +++++++++++++----
 src/shared/ui/index.ts                        | 12 ++++-
 .../ui/sidebar-navigation/model/data.tsx      | 25 ++++++----
 src/shared/ui/stack-buttons/model/data.tsx    | 47 +++++++++++++++++++
 src/shared/ui/stack-buttons/stack-buttons.tsx | 36 ++++++++++++++
 src/widgets/header/header.tsx                 |  5 ++
 src/widgets/light/light.tsx                   |  2 +-
 14 files changed, 182 insertions(+), 48 deletions(-)
 create mode 100644 src/shared/lib/github-repo-link/github-repo-link.ts
 create mode 100644 src/shared/types/github-path.ts
 delete mode 100644 src/shared/ui/code-block/code-block.module.scss
 create mode 100644 src/shared/ui/code-block/code-block.scss
 create mode 100644 src/shared/ui/stack-buttons/model/data.tsx
 create mode 100644 src/shared/ui/stack-buttons/stack-buttons.tsx

diff --git a/app/projects/app-router-auth/page.tsx b/app/projects/app-router-auth/page.tsx
index f0d0c9d..c695ade 100644
--- a/app/projects/app-router-auth/page.tsx
+++ b/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>}
diff --git a/src/shared/lib/fetch-github-file/fetch-github-file.ts b/src/shared/lib/fetch-github-file/fetch-github-file.ts
index 64f3727..bbbb3fa 100644
--- a/src/shared/lib/fetch-github-file/fetch-github-file.ts
+++ b/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 {
diff --git a/src/shared/lib/github-repo-link/github-repo-link.ts b/src/shared/lib/github-repo-link/github-repo-link.ts
new file mode 100644
index 0000000..85093dc
--- /dev/null
+++ b/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}`;
+};
diff --git a/src/shared/lib/index.ts b/src/shared/lib/index.ts
index 6c4b2ac..31cd683 100644
--- a/src/shared/lib/index.ts
+++ b/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 };
diff --git a/src/shared/types/github-path.ts b/src/shared/types/github-path.ts
new file mode 100644
index 0000000..3a7209c
--- /dev/null
+++ b/src/shared/types/github-path.ts
@@ -0,0 +1,5 @@
+export interface GitHubPath {
+	path: string;
+	owner?: string;
+	repo?: string;
+}
diff --git a/src/shared/ui/code-block/code-block.module.scss b/src/shared/ui/code-block/code-block.module.scss
deleted file mode 100644
index 5a10269..0000000
--- a/src/shared/ui/code-block/code-block.module.scss
+++ /dev/null
@@ -1,21 +0,0 @@
-.showWrapper {
-	position: relative;
-}
-
-.gradient {
-	@apply absolute pointer-events-none w-full -top-32 h-32 bg-gradient-to-t from-default-100;
-}
-
-.showButton {
-	@apply bg-default-100 text-default-600 py-2 px-3 w-full text-left data-[pressed=true]:scale-100;
-
-	&:hover {
-		@apply bg-default-200;
-	}
-}
-
-.showButton:hover .gradient {
-	background: red !important;
-	background-color: red !important;
-	@apply from-default-200;
-}
\ No newline at end of file
diff --git a/src/shared/ui/code-block/code-block.scss b/src/shared/ui/code-block/code-block.scss
new file mode 100644
index 0000000..e4ef8d0
--- /dev/null
+++ b/src/shared/ui/code-block/code-block.scss
@@ -0,0 +1,5 @@
+.code-block__wrapper {
+	.linenumber {
+		@apply text-default-400;
+	}
+}
\ No newline at end of file
diff --git a/src/shared/ui/code-block/code-block.tsx b/src/shared/ui/code-block/code-block.tsx
index fbf508f..9493bdc 100644
--- a/src/shared/ui/code-block/code-block.tsx
+++ b/src/shared/ui/code-block/code-block.tsx
@@ -1,10 +1,14 @@
 '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 {
@@ -12,18 +16,20 @@ import {
 	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>
diff --git a/src/shared/ui/index.ts b/src/shared/ui/index.ts
index 8c67cc2..e71937b 100644
--- a/src/shared/ui/index.ts
+++ b/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 };
diff --git a/src/shared/ui/sidebar-navigation/model/data.tsx b/src/shared/ui/sidebar-navigation/model/data.tsx
index cc6367d..00f3900 100644
--- a/src/shared/ui/sidebar-navigation/model/data.tsx
+++ b/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',
+	// 		},
+	// 	],
+	// },
 ];
diff --git a/src/shared/ui/stack-buttons/model/data.tsx b/src/shared/ui/stack-buttons/model/data.tsx
new file mode 100644
index 0000000..971e67b
--- /dev/null
+++ b/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} />,
+	},
+};
diff --git a/src/shared/ui/stack-buttons/stack-buttons.tsx b/src/shared/ui/stack-buttons/stack-buttons.tsx
new file mode 100644
index 0000000..c7b6f3c
--- /dev/null
+++ b/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>
+	);
+};
diff --git a/src/widgets/header/header.tsx b/src/widgets/header/header.tsx
index 09d33c0..abc1418 100644
--- a/src/widgets/header/header.tsx
+++ b/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>
 	);
 };
diff --git a/src/widgets/light/light.tsx b/src/widgets/light/light.tsx
index 8a50836..b5f8557 100644
--- a/src/widgets/light/light.tsx
+++ b/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' />