-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #56 from patelvivekdev/development
Development
- Loading branch information
Showing
10 changed files
with
178 additions
and
63 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,58 @@ | ||
import { cn } from '@/lib/utils'; | ||
import { BadgeInfo, Lightbulb, CircleAlert, TriangleAlert, OctagonX } from 'lucide-react'; | ||
|
||
type CalloutType = 'note' | 'tip' | 'important' | 'warning' | 'caution'; | ||
|
||
interface CalloutProps { | ||
type: CalloutType; | ||
children: React.ReactNode; | ||
typeColor?: string; | ||
} | ||
|
||
const calloutMap: Record<CalloutType, { icon: React.ReactNode; borderColor: string; typeColor: string }> = { | ||
note: { | ||
icon: <BadgeInfo className='mr-2 h-6 w-6 text-blue-500' />, | ||
borderColor: 'border border-4 !border-blue-500', | ||
typeColor: 'text-blue-500', | ||
}, | ||
tip: { | ||
icon: <Lightbulb className='mr-2 h-6 w-6 text-green-500' />, | ||
borderColor: 'border border-4 !border-green-500', | ||
typeColor: 'text-green-500', | ||
}, | ||
important: { | ||
icon: <CircleAlert className='mr-2 h-6 w-6 text-orange-500' />, | ||
borderColor: 'border border-4 !border-orange-500', | ||
typeColor: 'text-orange-500', | ||
}, | ||
warning: { | ||
icon: <TriangleAlert className='mr-2 h-6 w-6 text-yellow-500' />, | ||
borderColor: 'border border-4 !border-yellow-500', | ||
typeColor: 'text-yellow-500', | ||
}, | ||
caution: { | ||
icon: <OctagonX className='mr-2 h-6 w-6 text-red-500' />, | ||
borderColor: 'border border-4 !border-red-500', | ||
typeColor: 'text-red-500', | ||
}, | ||
}; | ||
|
||
export function Callout({ type, children }: CalloutProps) { | ||
const { icon, borderColor, typeColor } = calloutMap[type]; | ||
|
||
return ( | ||
<div | ||
className={cn( | ||
'mb-8 flex flex-col items-start rounded', | ||
borderColor, | ||
'bg-neutral-100 px-4 py-3 text-neutral-900 dark:bg-neutral-800 dark:text-neutral-100', | ||
)} | ||
> | ||
<div className='flex items-center'> | ||
{icon} | ||
<div className={cn('ml-1 text-base font-bold', typeColor)}>{type.toUpperCase()}</div> | ||
</div> | ||
<div className='callout w-full text-base'>{children}</div> | ||
</div> | ||
); | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,39 @@ | ||
import Link from 'next/link'; | ||
import React from 'react'; | ||
|
||
function slugify(str: string) { | ||
return str | ||
.toString() | ||
.toLowerCase() | ||
.trim() // Remove whitespace from both ends of a string | ||
.replace(/\s+/g, '-') // Replace spaces with - | ||
.replace(/&/g, '-and-') // Replace & with 'and' | ||
.replace(/[^\w\-]+/g, '') // Remove all non-word characters except for - | ||
.replace(/\-\-+/g, '-'); // Replace multiple - with single - | ||
} | ||
|
||
export const CustomLink = ({ children, ...props }: { children: any; [x: string]: any }) => { | ||
const href = props.href; | ||
if (href.startsWith('/')) { | ||
return ( | ||
<Link href={href} {...props}> | ||
{children} | ||
</Link> | ||
); | ||
} | ||
|
||
if (href.startsWith('#')) { | ||
return ( | ||
<a href={`#${slugify(props.href as string)}`} id={slugify(props.href as string)} className='anchor' {...props}> | ||
{children} | ||
</a> | ||
); | ||
} | ||
|
||
return ( | ||
<a target='_blank' rel='noopener noreferrer' {...props}> | ||
{' '} | ||
{children}{' '} | ||
</a> | ||
); | ||
}; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,35 @@ | ||
'use client'; | ||
import { useState, useRef } from 'react'; | ||
import { Clipboard } from 'lucide-react'; | ||
import { toast } from 'react-hot-toast'; | ||
|
||
const Pre = (props: any) => { | ||
const textInput = useRef<any>(null); | ||
const [copied, setCopied] = useState(false); | ||
|
||
const onExit = () => { | ||
setCopied(false); | ||
}; | ||
const onCopy = () => { | ||
setCopied(true); | ||
navigator.clipboard.writeText(textInput?.current?.textContent); | ||
toast.success('Copied to clipboard!', { | ||
position: 'bottom-center', | ||
duration: 2500, | ||
}); | ||
setTimeout(() => { | ||
setCopied(false); | ||
}, 2500); | ||
}; | ||
|
||
return ( | ||
<pre ref={textInput} onMouseLeave={onExit} className='flex flex-row justify-between gap-3'> | ||
{props.children} | ||
<button aria-label='Copy code' type='button' className='h-4 w-4' onClick={onCopy}> | ||
{copied ? <Clipboard className='text-[#80d1a9]' /> : <Clipboard className='text-white' />} | ||
</button> | ||
</pre> | ||
); | ||
}; | ||
|
||
export default Pre; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
8f45a01
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Successfully deployed to the following URLs:
patelvivek.dev – ./
patelvivek.dev
patelvivekdev-git-master-patelvivekdev.vercel.app
patelvivekdev-patelvivekdev.vercel.app
www.patelvivek.dev