22 |
24 |
25 | Buttons
26 |
27 |
29 |
30 | {ALL_COMPONENT_DATA.filter((c) => c.tags.includes('button')).map(
31 | (data) => {
32 | return (
33 |
39 | {data.component}
40 |
41 | )
42 | }
43 | )}
44 |
45 |
46 |
47 |
48 |
49 | )
50 | }
51 |
--------------------------------------------------------------------------------
/src/app/type/layout.tsx:
--------------------------------------------------------------------------------
1 | import { Theme } from '@radix-ui/themes'
2 | import type { Metadata } from 'next'
3 |
4 | export const metadata: Metadata = {
5 | title: 'Catalog',
6 | description: 'A collection of design patterns for the web.',
7 | openGraph: {
8 | title: 'Find the perfect component.',
9 | },
10 | twitter: {
11 | title: 'Find the perfect component.',
12 | },
13 | }
14 |
15 | export default function ComponentTypeLayout({
16 | children,
17 | }: {
18 | children: React.ReactNode
19 | }) {
20 | return (
21 |
17 |
19 | 1
18 |
20 |
22 | 2
21 |
23 |
25 | 3
24 |
26 |
28 | 4
27 |Some contents...
29 |Some contents...
30 |Some contents...
31 |Some contents...
32 |Some contents...
33 |Some contents...
34 |19 | Your payment has been successfully processed. We have emailed your 20 | receipt. 21 |
22 |
23 | OK
24 |
25 |
11 |
12 | What are vegetables?
13 |
14 |
15 |
22 |
23 | )
24 | }
25 |
26 | export const ariakitDisclosureData: TComponentData = {
27 | name: 'Disclosure',
28 | library: 'ariakit',
29 | component: 16 | Vegetables are parts of plants that are consumed by humans or other 17 | animals as food. The original meaning is still commonly used and is 18 | applied to plants collectively to refer to all edible plant matter, 19 | including the flowers, fruits, stems, leaves, roots, and seeds. 20 |
21 |
10 |
11 | Heading 1
12 |
14 | Heading 2
15 |
17 |
18 | Heading 2
19 |
21 |
22 |
23 | )
24 | }
25 |
26 | export const ariakitHeadingData: TComponentData = {
27 | name: 'Heading',
28 | library: 'ariakit',
29 | component: Torquent penatibus ipsum nascetur cursus primis lobortis
13 |Volutpat metus id purus dignissim fusce Tellus egestas.
16 |Platea justo lectus. Praesent. Et sodales pellentesque
20 |
11 |
16 | @ariakitjs
17 |
18 |
19 | 
24 |
25 | Ariakit
26 |
27 |
32 |
33 | )
34 | }
35 |
36 | export const ariakitHovercardData: TComponentData = {
37 | name: 'Hovercard',
38 | library: 'ariakit',
39 | component:
24 | Toolkit for building accessible web apps with React.
28 | 29 | Follow 30 | 31 |
23 |
26 | 12 Jan 2022 18:00 to 19:00
24 |Alert 10 minutes before start
25 |
11 | Favorite fruit
12 |
19 |
24 |
25 | )
26 | }
27 |
28 | export const ariakitSelectData: TComponentData = {
29 | name: 'Select',
30 | library: 'ariakit',
31 | component: Slide 1
10 | Label 1
12 | Slide 1
16 | Label 2
18 | Slide 3
22 | Label 3
24 |
8 |
9 |
11 |
12 | )
13 | }
14 |
15 | export const bootstrapPlaceholderData: TComponentData = {
16 | name: 'Placeholder',
17 | library: 'bootstrap',
18 | component:
8 |
10 | )
11 | }
12 |
13 | export const bootstrapProgressBarData: TComponentData = {
14 | name: 'Progress Bar',
15 | library: 'bootstrap',
16 | component:
8 | Range
9 |
11 | )
12 | }
13 |
14 | export const bootstrapRangeData: TComponentData = {
15 | name: 'Range',
16 | library: 'bootstrap',
17 | component:
9 |
10 |
11 | One
12 |
13 |
14 | Two
15 |
16 |
17 | Three
18 |
19 |
20 |
21 | )
22 | }
23 |
24 | export const bootstrapTabsData: TComponentData = {
25 | name: 'Tabs',
26 | library: 'bootstrap',
27 | component: Hello world
11 | One
9 | Two
10 | Three
11 | -
13 |
19 |
28 |
41 |
42 | )
43 | }
44 |
45 | export const muiMenuData: TComponentData = {
46 | name: 'Menu',
47 | library: 'mui',
48 | component: 
21 | Card Content
21 |Card Footer
24 |
8 |
21 | )
22 | }
23 |
24 | export const shadcnCheckboxData: TComponentData = {
25 | name: 'Checkbox',
26 | library: 'shadcn',
27 | component:
10 |
16 |
20 | 17 | You agree to our Terms of Service and Privacy Policy. 18 |
19 |
10 |
13 |
14 |
17 |
8 |
14 | )
15 | }
16 |
17 | export const shadcnSkeletonData: TComponentData = {
18 | name: 'Skeleton',
19 | library: 'shadcn',
20 | component:
10 |
13 | Add to library
20 |{children}
3 | }
4 |
--------------------------------------------------------------------------------
/src/components/Libraries/ShadCn/raw/ui/aspect-ratio.tsx:
--------------------------------------------------------------------------------
1 | import * as AspectRatioPrimitive from '@radix-ui/react-aspect-ratio'
2 |
3 | const AspectRatio = AspectRatioPrimitive.Root
4 |
5 | export { AspectRatio }
6 |
--------------------------------------------------------------------------------
/src/components/Libraries/ShadCn/raw/ui/badge.tsx:
--------------------------------------------------------------------------------
1 | import { cva, type VariantProps } from 'class-variance-authority'
2 | import * as React from 'react'
3 |
4 | import { cn } from '@/lib/utils'
5 |
6 | const badgeVariants = cva(
7 | 'inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2',
8 | {
9 | variants: {
10 | variant: {
11 | default:
12 | 'border-transparent bg-primary text-primary-foreground hover:bg-primary/80',
13 | secondary:
14 | 'border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80',
15 | destructive:
16 | 'border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80',
17 | outline: 'text-foreground',
18 | },
19 | },
20 | defaultVariants: {
21 | variant: 'default',
22 | },
23 | }
24 | )
25 |
26 | export interface BadgeProps
27 | extends React.HTMLAttributes
20 | {title && {title} }
21 | {description && (
22 | {description}
23 | )}
24 |
25 | {action}
26 |