28 |31 | ); 32 | } 33 | 34 | export default CodeBlock; 35 | -------------------------------------------------------------------------------- /contentlayer.config.ts: -------------------------------------------------------------------------------- 1 | import { makeSource } from "contentlayer/source-files"; 2 | 3 | import { defineDocumentType } from "contentlayer/source-files"; 4 | 5 | export const Snippet = defineDocumentType(() => ({ 6 | name: "Snippet", 7 | filePathPattern: `snippets/**/*.mdx`, 8 | contentType: "mdx", 9 | fields: { 10 | file: { 11 | type: "string", 12 | description: "The name of the snippet", 13 | required: true, 14 | }, 15 | order: { 16 | type: "number", 17 | description: "The order of the snippet", 18 | required: true, 19 | }, 20 | }, 21 | computedFields: { 22 | slug: { 23 | type: "string", 24 | resolve: (_) => _._raw.sourceFileName.replace(/\.[^.$]+$/, ""), 25 | }, 26 | }, 27 | })); 28 | 29 | export default makeSource({ 30 | contentDirPath: "content", 31 | documentTypes: [Snippet], 32 | }); 33 | -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "es5", 4 | "baseUrl": ".", 5 | "lib": ["dom", "dom.iterable", "esnext"], 6 | "allowJs": true, 7 | "skipLibCheck": true, 8 | "strict": true, 9 | "noEmit": true, 10 | "esModuleInterop": true, 11 | "module": "esnext", 12 | "moduleResolution": "bundler", 13 | "resolveJsonModule": true, 14 | "isolatedModules": true, 15 | "jsx": "preserve", 16 | "incremental": true, 17 | "plugins": [ 18 | { 19 | "name": "next" 20 | } 21 | ], 22 | "paths": { 23 | "@/*": ["./*"], 24 | "contentlayer/generated": ["./.contentlayer/generated"] 25 | } 26 | }, 27 | "include": [ 28 | "next-env.d.ts", 29 | "**/*.ts", 30 | "**/*.tsx", 31 | ".next/types/**/*.ts", 32 | ".contentlayer/generated" 33 | ], 34 | "exclude": ["node_modules"] 35 | } 36 | -------------------------------------------------------------------------------- /components/ui/input.tsx: -------------------------------------------------------------------------------- 1 | import * as React from "react"; 2 | 3 | import { cn } from "@/lib/utils"; 4 | 5 | export interface InputProps 6 | extends React.InputHTMLAttributes29 | {value} 30 |
54 | {children}
55 |
56 | 19 | An implementation of a Country / Region Select component built on 20 | top of Shadcn UI's input component. 21 |
22 |string | accept a class string |
43 | | onChange | func | callback function fired when the select value changed |
44 | | placeholder | string | placeholder value, default "Country" |
45 | | priorityOptions | string[] | Array of countries prioritized in the select list |
46 | | whiteList | string[] | Array of allowed countries |
47 | | blackList | string[] | Array of banned countries |
48 |
49 | #### RegionSelect properties
50 |
51 | | Prop | Type | Description |
52 | | --------------- | --------------------- | ----------------------------------------------------- |
53 | | className | string | accept a class string |
54 | | onChange | func | callback function fired when the select value changed |
55 | | placeholder | string | placeholder value, default "Region" |
56 | | priorityOptions | string[] | Array of regions prioritized in the select list |
57 | | whiteList | string[] | Array of allowed regions |
58 | | blackList | string[] | Array of banned regions |
59 |
--------------------------------------------------------------------------------
/components/ui/table.tsx:
--------------------------------------------------------------------------------
1 | import * as React from "react";
2 |
3 | import { cn } from "@/lib/utils";
4 |
5 | const Table = React.forwardRef<
6 | HTMLTableElement,
7 | React.HTMLAttributes26 | This properties are valid with the two component country and region. 27 |
28 |33 | Specify which countries should appear. This just shows the United 34 | States and China. 35 |
36 |45 | Specify which countries should NOT appear. This will omit 46 | Afhganistan, Aland Islands and Albania. 47 |
48 |60 | Make Canada, United States and the Brazil appear first in the 61 | dropdown list. 62 |
63 |
24 | Run the{" "}
25 |
26 | shadcn-ui
27 | {" "}
28 | init command to setup your project:
29 |
37 | Run the{" "}
38 |
39 | shadcn-ui
40 | {" "}
41 | add command to add the necessary shadcn components to your project:
42 |
{snippet.file}
79 | 162 | {body} 163 |
164 | ); 165 | }); 166 | FormMessage.displayName = "FormMessage"; 167 | 168 | export { 169 | useFormField, 170 | Form, 171 | FormItem, 172 | FormLabel, 173 | FormControl, 174 | FormDescription, 175 | FormMessage, 176 | FormField, 177 | }; 178 | -------------------------------------------------------------------------------- /components/ui/toast.tsx: -------------------------------------------------------------------------------- 1 | import * as ToastPrimitives from "@radix-ui/react-toast"; 2 | import { cva, type VariantProps } from "class-variance-authority"; 3 | import { X } from "lucide-react"; 4 | import * as React from "react"; 5 | 6 | import { cn } from "@/lib/utils"; 7 | 8 | const ToastProvider = ToastPrimitives.Provider; 9 | 10 | const ToastViewport = React.forwardRef< 11 | React.ElementRef