Skip to content

Commit

Permalink
add arial label
Browse files Browse the repository at this point in the history
  • Loading branch information
@kokonutd
kokonutd committed Jan 18, 2025
1 parent f86d675 commit 13c7839
Show file tree
Hide file tree
Showing 4 changed files with 4 additions and 2 deletions.
2 changes: 1 addition & 1 deletion apps/www/public/r/styles/default/pricing-01.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@
},
{
"path": "blocks/pricing-01/components/pricing-card.tsx",
"content": "import { ArrowRight, Check } from \"lucide-react\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/registry/default/ui/button\"\nimport {\n Card,\n CardContent,\n CardFooter,\n CardHeader,\n} from \"@/registry/default/ui/card\"\n\ninterface Feature {\n name: string\n highlight?: boolean\n included: boolean\n}\n\ninterface PricingCardProps {\n name: string\n price: number\n description: string\n features: Feature[]\n highlight?: boolean\n cta?: string\n}\n\nexport function PricingCard({\n name,\n price,\n description,\n features,\n highlight,\n cta = \"Get started\",\n}: PricingCardProps) {\n return (\n <Card\n className={cn(\n \"group relative transition-all duration-500\",\n highlight ? \"bg-black dark:bg-white\" : \"bg-black dark:bg-white\"\n )}\n >\n <CardHeader className=\"space-y-4 p-10\">\n <h3\n className={cn(\n \"text-lg font-medium uppercase tracking-wider\",\n \"text-white dark:text-neutral-900\"\n )}\n >\n {name}\n </h3>\n <div className=\"flex items-baseline gap-2\">\n <span\n className={cn(\n \"text-5xl font-light\",\n \"text-white dark:text-neutral-900\"\n )}\n >\n ${price}\n </span>\n <span className=\"text-sm text-neutral-400 dark:text-neutral-600\">\n one-time\n </span>\n </div>\n <p\n className={cn(\n \"border-b pb-6 text-sm\",\n \"border-neutral-800 text-neutral-400 dark:border-neutral-200 dark:text-neutral-600\"\n )}\n >\n {description}\n </p>\n </CardHeader>\n\n <CardContent className=\"space-y-4 p-10 pt-0\">\n {features.map((feature) => (\n <div key={feature.name} className=\"flex items-center gap-3\">\n <div\n className={cn(\n \"flex h-5 w-5 shrink-0 items-center justify-center rounded-full\",\n feature.included\n ? \"text-white dark:text-neutral-900\"\n : \"text-neutral-600 dark:text-neutral-500\"\n )}\n >\n <Check className=\"h-3.5 w-3.5\" />\n </div>\n <span className=\"text-sm text-neutral-300 dark:text-neutral-600\">\n {feature.name}\n </span>\n </div>\n ))}\n </CardContent>\n <CardFooter className=\"p-10 pt-0\">\n <Button\n className={cn(\n \"group relative h-12 w-full\",\n \"bg-white text-neutral-900 dark:bg-neutral-900 dark:text-white\",\n \"hover:bg-neutral-100 dark:hover:bg-neutral-800\",\n \"border border-neutral-800 dark:border-neutral-200\",\n \"hover:border-neutral-700 dark:hover:border-neutral-300\"\n )}\n >\n <span className=\"relative z-10 flex items-center justify-center gap-2 font-medium tracking-wide\">\n {cta}\n <ArrowRight className=\"h-4 w-4 transition-transform group-hover:translate-x-1\" />\n </span>\n </Button>\n </CardFooter>\n </Card>\n )\n}\n",
"content": "import { ArrowRight, Check } from \"lucide-react\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/registry/default/ui/button\"\nimport {\n Card,\n CardContent,\n CardFooter,\n CardHeader,\n} from \"@/registry/default/ui/card\"\n\ninterface Feature {\n name: string\n highlight?: boolean\n included: boolean\n}\n\ninterface PricingCardProps {\n name: string\n price: number\n description: string\n features: Feature[]\n highlight?: boolean\n cta?: string\n}\n\nexport function PricingCard({\n name,\n price,\n description,\n features,\n highlight,\n cta = \"Get started\",\n}: PricingCardProps) {\n return (\n <Card\n className={cn(\n \"group relative transition-all duration-500\",\n highlight ? \"bg-black dark:bg-white\" : \"bg-black dark:bg-white\"\n )}\n >\n <CardHeader className=\"space-y-4 p-10\">\n <h3\n className={cn(\n \"text-lg font-medium uppercase tracking-wider\",\n \"text-white dark:text-neutral-900\"\n )}\n >\n {name}\n </h3>\n <div className=\"flex items-baseline gap-2\">\n <span\n className={cn(\n \"text-5xl font-light\",\n \"text-white dark:text-neutral-900\"\n )}\n >\n ${price}\n </span>\n <span className=\"text-sm text-neutral-400 dark:text-neutral-600\">\n one-time\n </span>\n </div>\n <p\n className={cn(\n \"border-b pb-6 text-sm\",\n \"border-neutral-800 text-neutral-400 dark:border-neutral-200 dark:text-neutral-600\"\n )}\n >\n {description}\n </p>\n </CardHeader>\n\n <CardContent className=\"space-y-4 p-10 pt-0\">\n {features.map((feature) => (\n <div key={feature.name} className=\"flex items-center gap-3\">\n <div\n className={cn(\n \"flex h-5 w-5 shrink-0 items-center justify-center rounded-full\",\n feature.included\n ? \"text-white dark:text-neutral-900\"\n : \"text-neutral-600 dark:text-neutral-500\"\n )}\n >\n <Check className=\"h-3.5 w-3.5\" />\n </div>\n <span className=\"text-sm text-neutral-300 dark:text-neutral-600\">\n {feature.name}\n </span>\n </div>\n ))}\n </CardContent>\n <CardFooter className=\"p-10 pt-0\">\n <Button\n aria-label={cta}\n className={cn(\n \"group relative h-12 w-full\",\n \"bg-white text-neutral-900 dark:bg-neutral-900 dark:text-white\",\n \"hover:bg-neutral-100 dark:hover:bg-neutral-800\",\n \"border border-neutral-800 dark:border-neutral-200\",\n \"hover:border-neutral-700 dark:hover:border-neutral-300\"\n )}\n >\n <span className=\"relative z-10 flex items-center justify-center gap-2 font-medium tracking-wide\">\n {cta}\n <ArrowRight className=\"h-4 w-4 transition-transform group-hover:translate-x-1\" />\n </span>\n </Button>\n </CardFooter>\n </Card>\n )\n}\n",
"type": "registry:component",
"target": ""
},
Expand Down
2 changes: 1 addition & 1 deletion apps/www/public/r/styles/new-york/pricing-01.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@
},
{
"path": "blocks/pricing-01/components/pricing-card.tsx",
"content": "import { ArrowRight, Check } from \"lucide-react\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/registry/new-york/ui/button\"\nimport {\n Card,\n CardContent,\n CardFooter,\n CardHeader,\n} from \"@/registry/new-york/ui/card\"\n\ninterface Feature {\n name: string\n highlight?: boolean\n included: boolean\n}\n\ninterface PricingCardProps {\n name: string\n price: number\n description: string\n features: Feature[]\n highlight?: boolean\n cta?: string\n}\n\nexport function PricingCard({\n name,\n price,\n description,\n features,\n highlight,\n cta = \"Get started\",\n}: PricingCardProps) {\n return (\n <Card\n className={cn(\n \"group relative transition-all duration-500\",\n highlight ? \"bg-black dark:bg-white\" : \"bg-black dark:bg-white\"\n )}\n >\n <CardHeader className=\"space-y-4 p-10\">\n <h3\n className={cn(\n \"text-lg font-medium uppercase tracking-wider\",\n \"text-white dark:text-neutral-900\"\n )}\n >\n {name}\n </h3>\n <div className=\"flex items-baseline gap-2\">\n <span\n className={cn(\n \"text-5xl font-light\",\n \"text-white dark:text-neutral-900\"\n )}\n >\n ${price}\n </span>\n <span className=\"text-sm text-neutral-400 dark:text-neutral-600\">\n one-time\n </span>\n </div>\n <p\n className={cn(\n \"border-b pb-6 text-sm\",\n \"border-neutral-800 text-neutral-400 dark:border-neutral-200 dark:text-neutral-600\"\n )}\n >\n {description}\n </p>\n </CardHeader>\n\n <CardContent className=\"space-y-4 p-10 pt-0\">\n {features.map((feature) => (\n <div key={feature.name} className=\"flex items-center gap-3\">\n <div\n className={cn(\n \"flex h-5 w-5 shrink-0 items-center justify-center rounded-full\",\n feature.included\n ? \"text-white dark:text-neutral-900\"\n : \"text-neutral-600 dark:text-neutral-500\"\n )}\n >\n <Check className=\"h-3.5 w-3.5\" />\n </div>\n <span className=\"text-sm text-neutral-300 dark:text-neutral-600\">\n {feature.name}\n </span>\n </div>\n ))}\n </CardContent>\n <CardFooter className=\"p-10 pt-0\">\n <Button\n className={cn(\n \"group relative h-12 w-full\",\n \"bg-white text-neutral-900 dark:bg-neutral-900 dark:text-white\",\n \"hover:bg-neutral-100 dark:hover:bg-neutral-800\",\n \"border border-neutral-800 dark:border-neutral-200\",\n \"hover:border-neutral-700 dark:hover:border-neutral-300\"\n )}\n >\n <span className=\"relative z-10 flex items-center justify-center gap-2 font-medium tracking-wide\">\n {cta}\n <ArrowRight className=\"h-4 w-4 transition-transform group-hover:translate-x-1\" />\n </span>\n </Button>\n </CardFooter>\n </Card>\n )\n}\n",
"content": "import { ArrowRight, Check } from \"lucide-react\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/registry/new-york/ui/button\"\nimport {\n Card,\n CardContent,\n CardFooter,\n CardHeader,\n} from \"@/registry/new-york/ui/card\"\n\ninterface Feature {\n name: string\n highlight?: boolean\n included: boolean\n}\n\ninterface PricingCardProps {\n name: string\n price: number\n description: string\n features: Feature[]\n highlight?: boolean\n cta?: string\n}\n\nexport function PricingCard({\n name,\n price,\n description,\n features,\n highlight,\n cta = \"Get started\",\n}: PricingCardProps) {\n return (\n <Card\n className={cn(\n \"group relative transition-all duration-500\",\n highlight ? \"bg-black dark:bg-white\" : \"bg-black dark:bg-white\"\n )}\n >\n <CardHeader className=\"space-y-4 p-10\">\n <h3\n className={cn(\n \"text-lg font-medium uppercase tracking-wider\",\n \"text-white dark:text-neutral-900\"\n )}\n >\n {name}\n </h3>\n <div className=\"flex items-baseline gap-2\">\n <span\n className={cn(\n \"text-5xl font-light\",\n \"text-white dark:text-neutral-900\"\n )}\n >\n ${price}\n </span>\n <span className=\"text-sm text-neutral-400 dark:text-neutral-600\">\n one-time\n </span>\n </div>\n <p\n className={cn(\n \"border-b pb-6 text-sm\",\n \"border-neutral-800 text-neutral-400 dark:border-neutral-200 dark:text-neutral-600\"\n )}\n >\n {description}\n </p>\n </CardHeader>\n\n <CardContent className=\"space-y-4 p-10 pt-0\">\n {features.map((feature) => (\n <div key={feature.name} className=\"flex items-center gap-3\">\n <div\n className={cn(\n \"flex h-5 w-5 shrink-0 items-center justify-center rounded-full\",\n feature.included\n ? \"text-white dark:text-neutral-900\"\n : \"text-neutral-600 dark:text-neutral-500\"\n )}\n >\n <Check className=\"h-3.5 w-3.5\" />\n </div>\n <span className=\"text-sm text-neutral-300 dark:text-neutral-600\">\n {feature.name}\n </span>\n </div>\n ))}\n </CardContent>\n <CardFooter className=\"p-10 pt-0\">\n <Button\n aria-label={cta}\n className={cn(\n \"group relative h-12 w-full\",\n \"bg-white text-neutral-900 dark:bg-neutral-900 dark:text-white\",\n \"hover:bg-neutral-100 dark:hover:bg-neutral-800\",\n \"border border-neutral-800 dark:border-neutral-200\",\n \"hover:border-neutral-700 dark:hover:border-neutral-300\"\n )}\n >\n <span className=\"relative z-10 flex items-center justify-center gap-2 font-medium tracking-wide\">\n {cta}\n <ArrowRight className=\"h-4 w-4 transition-transform group-hover:translate-x-1\" />\n </span>\n </Button>\n </CardFooter>\n </Card>\n )\n}\n",
"type": "registry:component",
"target": ""
},
Expand Down
1 change: 1 addition & 0 deletions apps/www/registry/default/blocks/pricing-01/components/pricing-card.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -92,6 +92,7 @@ export function PricingCard({
</CardContent>
<CardFooter className="p-10 pt-0">
<Button
aria-label={cta}
className={cn(
"group relative h-12 w-full",
"bg-white text-neutral-900 dark:bg-neutral-900 dark:text-white",
Expand Down
1 change: 1 addition & 0 deletions apps/www/registry/new-york/blocks/pricing-01/components/pricing-card.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -92,6 +92,7 @@ export function PricingCard({
</CardContent>
<CardFooter className="p-10 pt-0">
<Button
aria-label={cta}
className={cn(
"group relative h-12 w-full",
"bg-white text-neutral-900 dark:bg-neutral-900 dark:text-white",
Expand Down

0 comments on commit 13c7839

Please sign in to comment.