Skip to content

Commit

Permalink
Added: Component Converted into single color.
Browse files Browse the repository at this point in the history
  • Loading branch information
@Arifulislam5577
Arifulislam5577 committed Jul 10, 2024
1 parent ee6cd0b commit 006187c
Show file tree
Hide file tree
Showing 111 changed files with 1,125 additions and 1,600 deletions.
12 changes: 4 additions & 8 deletions app/components/Community.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
import Link from 'next/link'
import { ArrowLineUpRight } from 'phosphor-react'
import { useEffect, useState } from 'react'
import { Avatar, AvatarGroup } from '../src'
import { Avatar, AvatarGroup, AvatarImage } from '../src'

interface Contributor {
login: string
Expand Down Expand Up @@ -51,13 +51,9 @@ const Community = () => {
{contributors?.length ? (
<AvatarGroup>
{contributors?.map((user) => (
<Avatar
key={user?.id}
shape="circle"
size="lg"
img={user?.avatar_url}
className="border-2 border-[#9686E5] p-0"
/>
<Avatar key={user?.id} className="size-14">
<AvatarImage src={user?.avatar_url} />
</Avatar>
))}
</AvatarGroup>
) : null}
Expand Down
7 changes: 4 additions & 3 deletions app/components/DesktopMenu.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,8 @@ import { useEffect, useState } from 'react'
import { navbarRoutes } from '~/routes/routes'
import KeepDarkLogo from '../../public/images/keep-dark.svg'
import KeepLogo from '../../public/images/keep.svg'
import { buttonVariants } from '../src'
import { cn } from '../src/helpers/cn'
import Search from './Search'
import ThemeSwitcher from './ThemeSwitcher'

Expand All @@ -21,6 +23,7 @@ const DesktopMenu = () => {
useEffect(() => {
setIsOpen(false)
}, [pathname])

return (
<>
<div className="flex items-center space-x-28">
Expand Down Expand Up @@ -66,9 +69,7 @@ const DesktopMenu = () => {
className="rounded-lg bg-primary-25 p-2.5 transition-all duration-300 hover:bg-primary-50 dark:border dark:border-metal-800 dark:bg-metal-900 dark:hover:border-metal-600">
<Image src="/images/icon/discord.svg" height={22} width={22} alt="discord" />
</Link>
<Link
href="/docs/getting-started/introduction"
className="rounded-lg bg-metal-900 px-4 py-2.5 text-body-4 font-medium capitalize text-white transition-all duration-300 hover:bg-metal-800 dark:bg-metal-25 dark:text-metal-900">
<Link href="/docs/getting-started/introduction" className={cn(buttonVariants({ size: 'md' }), 'capitalize')}>
get started
</Link>
<ThemeSwitcher />
Expand Down
4 changes: 2 additions & 2 deletions app/components/Faq.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -52,7 +52,7 @@ const Faq = () => {
<div className="w-full lg:col-span-1">
<Accordion className="space-y-3">
{faqs.slice(0, 3).map((faq) => (
<AccordionPanel key={faq.id}>
<AccordionPanel key={faq.id} className="border-metal-200">
<AccordionContainer>
<AccordionTitle className="text-body-4 md:text-body-3">{faq.question}</AccordionTitle>
<AccordionIcon />
Expand All @@ -65,7 +65,7 @@ const Faq = () => {
<div className="w-full lg:col-span-1">
<Accordion className="space-y-3">
{faqs.slice(3).map((faq) => (
<AccordionPanel key={faq.id}>
<AccordionPanel key={faq.id} className="border-metal-200">
<AccordionContainer>
<AccordionTitle className="text-body-4 md:text-body-3">{faq.question}</AccordionTitle>
<AccordionIcon />
Expand Down
7 changes: 3 additions & 4 deletions app/components/Hero.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@ import Link from 'next/link'
import { Check, Clipboard } from 'phosphor-react'
import useCopy from '~/hooks/useCopy'
import HeroImg from '../../public/images/home/hero-1.png'
import { buttonVariants } from '../src'

const Hero = () => {
const { copy, copyToClipboard } = useCopy()
Expand Down Expand Up @@ -39,14 +40,12 @@ const Hero = () => {
{copy ? <Check size={18} color="#8897AE" /> : <Clipboard size={18} color="#8897AE" />}
</button>
</div>
<Link
href="/docs/getting-started/introduction"
className="rounded-lg bg-metal-900 px-4 py-3 text-body-4 font-normal capitalize text-white transition-all duration-300 hover:bg-metal-800 dark:bg-white dark:text-metal-900">
<Link href="/docs/getting-started/introduction" className={buttonVariants({ size: 'lg' })}>
Get Started
</Link>
</div>
<p className="mt-2 text-body-4 font-normal text-metal-600 dark:text-metal-300">
⭐ Got 1.2k stars on Github Repository
⭐ Got 1.3k stars on Github Repository
</p>
</div>
</div>
Expand Down
8 changes: 0 additions & 8 deletions app/docs/components/alert/alert.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -37,14 +37,6 @@ Switch the background color of alerts using the `withBg={true}` prop. By default
<AlertWithBgColor />
</CodePreview>

## Alert With Card

Display the alert message with a card view, and access all the available props for customization.

<CodePreview github="Alert" code={AlertWithCardCode}>
<AlertWithCard />
</CodePreview>

## Dismissible Alerts

Dismiss alert messages by using the `dismiss` prop. The default behavior is server-side rendering. If you want to use a click event handler, set the alert as a client-side component.
Expand Down
101 changes: 61 additions & 40 deletions app/docs/components/alert/variant/AlertColorVariant.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,47 +14,57 @@ const AlertWithColorVariant = () => {
<Alert color="primary">
<AlertContainer>
<AlertIcon />
<AlertTitle>Alert here</AlertTitle>
<AlertDescription>A short description followed by two actions items..</AlertDescription>
<AlertTitle>Primary Alert</AlertTitle>
<AlertDescription>A short description followed by two actions items.</AlertDescription>
</AlertContainer>
<AlertContainer>
<AlertLink href="/">Learn More</AlertLink>
<AlertDismiss />
</AlertContainer>
<AlertLink href="/">Learn More</AlertLink>
<AlertDismiss />
</Alert>
<Alert color="secondary">
<AlertContainer>
<AlertIcon />
<AlertTitle>Alert here</AlertTitle>
<AlertDescription>A short description followed by two actions items..</AlertDescription>
<AlertTitle>Secondary Alert</AlertTitle>
<AlertDescription>A short description followed by two actions items.</AlertDescription>
</AlertContainer>
<AlertContainer>
<AlertLink href="/">Learn More</AlertLink>
<AlertDismiss />
</AlertContainer>
<AlertLink href="/">Learn More</AlertLink>
<AlertDismiss />
</Alert>
<Alert color="success">
<AlertContainer>
<AlertIcon />
<AlertTitle>Alert here</AlertTitle>
<AlertDescription>A short description followed by two actions items..</AlertDescription>
<AlertTitle>Success Alert</AlertTitle>
<AlertDescription>A short description followed by two actions items.</AlertDescription>
</AlertContainer>
<AlertContainer>
<AlertLink href="/">Learn More</AlertLink>
<AlertDismiss />
</AlertContainer>
<AlertLink href="/">Learn More</AlertLink>
<AlertDismiss />
</Alert>
<Alert color="warning">
<AlertContainer>
<AlertIcon />
<AlertTitle>Alert here</AlertTitle>
<AlertDescription>A short description followed by two actions items..</AlertDescription>
<AlertTitle>Warning Alert</AlertTitle>
<AlertDescription>A short description followed by two actions items.</AlertDescription>
</AlertContainer>
<AlertContainer>
<AlertLink href="/">Learn More</AlertLink>
<AlertDismiss />
</AlertContainer>
<AlertLink href="/">Learn More</AlertLink>
<AlertDismiss />
</Alert>
<Alert color="error">
<AlertContainer>
<AlertIcon />
<AlertTitle>Alert here</AlertTitle>
<AlertDescription>A short description followed by two actions items..</AlertDescription>
<AlertTitle>Error Alert</AlertTitle>
<AlertDescription>A short description followed by two actions items.</AlertDescription>
</AlertContainer>
<AlertContainer>
<AlertLink href="/">Learn More</AlertLink>
<AlertDismiss />
</AlertContainer>
<AlertLink href="/">Learn More</AlertLink>
<AlertDismiss />
</Alert>
</div>
)
Expand All @@ -77,51 +87,62 @@ export const AlertComponent = () => {
<Alert color="primary">
<AlertContainer>
<AlertIcon />
<AlertTitle>Alert here</AlertTitle>
<AlertDescription>A short description followed by two actions items..</AlertDescription>
<AlertTitle>Primary Alert</AlertTitle>
<AlertDescription>A short description followed by two actions items.</AlertDescription>
</AlertContainer>
<AlertContainer>
<AlertLink href="/">Learn More</AlertLink>
<AlertDismiss />
</AlertContainer>
<AlertLink href='/'>Learn More</AlertLink>
<AlertDismiss />
</Alert>
<Alert color="secondary">
<AlertContainer>
<AlertIcon />
<AlertTitle>Alert here</AlertTitle>
<AlertDescription>A short description followed by two actions items..</AlertDescription>
<AlertTitle>Secondary Alert</AlertTitle>
<AlertDescription>A short description followed by two actions items.</AlertDescription>
</AlertContainer>
<AlertContainer>
<AlertLink href="/">Learn More</AlertLink>
<AlertDismiss />
</AlertContainer>
<AlertLink href='/'>Learn More</AlertLink>
<AlertDismiss />
</Alert>
<Alert color="success">
<AlertContainer>
<AlertIcon />
<AlertTitle>Alert here</AlertTitle>
<AlertDescription>A short description followed by two actions items..</AlertDescription>
<AlertTitle>Success Alert</AlertTitle>
<AlertDescription>A short description followed by two actions items.</AlertDescription>
</AlertContainer>
<AlertContainer>
<AlertLink href="/">Learn More</AlertLink>
<AlertDismiss />
</AlertContainer>
<AlertLink href='/'>Learn More</AlertLink>
<AlertDismiss />
</Alert>
<Alert color="warning">
<AlertContainer>
<AlertIcon />
<AlertTitle>Alert here</AlertTitle>
<AlertDescription>A short description followed by two actions items..</AlertDescription>
<AlertTitle>Warning Alert</AlertTitle>
<AlertDescription>A short description followed by two actions items.</AlertDescription>
</AlertContainer>
<AlertContainer>
<AlertLink href="/">Learn More</AlertLink>
<AlertDismiss />
</AlertContainer>
<AlertLink href='/'>Learn More</AlertLink>
<AlertDismiss />
</Alert>
<Alert color="error">
<AlertContainer>
<AlertIcon />
<AlertTitle>Alert here</AlertTitle>
<AlertDescription>A short description followed by two actions items..</AlertDescription>
<AlertTitle>Error Alert</AlertTitle>
<AlertDescription>A short description followed by two actions items.</AlertDescription>
</AlertContainer>
<AlertContainer>
<AlertLink href="/">Learn More</AlertLink>
<AlertDismiss />
</AlertContainer>
<AlertLink href='/'>Learn More</AlertLink>
<AlertDismiss />
</Alert>
</div>
)
}
`

export { AlertWithColorVariant, AlertWithColorVariantCode }
63 changes: 37 additions & 26 deletions app/docs/components/alert/variant/AlertWithBgColor.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,54 +14,63 @@ const AlertWithBgColor = () => {
<Alert withBg={true} color="primary">
<AlertContainer>
<AlertIcon />
<AlertTitle>Alert here</AlertTitle>
<AlertDescription>A short description followed by two actions items..</AlertDescription>
<AlertTitle>Primary Alert</AlertTitle>
<AlertDescription>A short description followed by two actions items.</AlertDescription>
</AlertContainer>
<AlertContainer>
<AlertLink href="/">Learn More</AlertLink>
<AlertDismiss />
</AlertContainer>
<AlertLink href="/">Learn More</AlertLink>
<AlertDismiss />
</Alert>
<Alert withBg={true} color="secondary">
<AlertContainer>
<AlertIcon />
<AlertTitle>Alert here</AlertTitle>
<AlertDescription>A short description followed by two actions items..</AlertDescription>
<AlertTitle>Secondary Alert</AlertTitle>
<AlertDescription>A short description followed by two actions items.</AlertDescription>
</AlertContainer>
<AlertContainer>
<AlertLink href="/">Learn More</AlertLink>
<AlertDismiss />
</AlertContainer>
<AlertLink href="/">Learn More</AlertLink>
<AlertDismiss />
</Alert>
<Alert withBg={true} color="success">
<AlertContainer>
<AlertIcon />
<AlertTitle>Alert here</AlertTitle>
<AlertDescription>A short description followed by two actions items..</AlertDescription>
<AlertTitle>Success Alert</AlertTitle>
<AlertDescription>A short description followed by two actions items.</AlertDescription>
</AlertContainer>
<AlertContainer>
<AlertLink href="/">Learn More</AlertLink>
<AlertDismiss />
</AlertContainer>
<AlertLink href="/">Learn More</AlertLink>
<AlertDismiss />
</Alert>
<Alert withBg={true} color="warning">
<AlertContainer>
<AlertIcon />
<AlertTitle>Alert here</AlertTitle>
<AlertDescription>A short description followed by two actions items..</AlertDescription>
<AlertTitle>Warning Alert</AlertTitle>
<AlertDescription>A short description followed by two actions items.</AlertDescription>
</AlertContainer>
<AlertContainer>
<AlertLink href="/">Learn More</AlertLink>
<AlertDismiss />
</AlertContainer>
<AlertLink href="/">Learn More</AlertLink>
<AlertDismiss />
</Alert>
<Alert withBg={true} color="error">
<AlertContainer>
<AlertIcon />
<AlertTitle>Alert here</AlertTitle>
<AlertDescription>A short description followed by two actions items..</AlertDescription>
<AlertTitle>Error Alert</AlertTitle>
<AlertDescription>A short description followed by two actions items.</AlertDescription>
</AlertContainer>
<AlertContainer>
<AlertLink href="/">Learn More</AlertLink>
<AlertDismiss />
</AlertContainer>
<AlertLink href="/">Learn More</AlertLink>
<AlertDismiss />
</Alert>
</div>
)
}

const AlertWithBgColorCode = `
import {
Alert,
AlertContainer,
Expand All @@ -74,14 +83,16 @@ import {
export const AlertComponent = () => {
return (
<Alert withBg={true} color="primary">
<Alert withBg={true} color="secondary">
<AlertContainer>
<AlertIcon />
<AlertTitle>Alert here</AlertTitle>
<AlertDescription>A short description followed by two actions items..</AlertDescription>
<AlertTitle>Secondary Alert</AlertTitle>
<AlertDescription>A short description followed by two actions items.</AlertDescription>
</AlertContainer>
<AlertContainer>
<AlertLink href="/">Learn More</AlertLink>
<AlertDismiss />
</AlertContainer>
<AlertLink href='/'>Learn More</AlertLink>
<AlertDismiss />
</Alert>
)
}
Expand Down
Loading

0 comments on commit 006187c

Please sign in to comment.