Astro custom snippets

components.json

                {
	"rain_tv_component": {
		"scope": "astro",
		"prefix": "rain_tv_component",
		"body": [
			"---",
			"import type { HTMLAttributes } from \"astro/types\";",
			"import { tv } from \"tailwind-variants\";",
			"",
			"interface Props extends HTMLAttributes<\"div\"> {",
			"\tclassName?: string;",
			"}",
			"const { className = \"\", ...rest } = Astro.props;",
			"",
			"const ${TM_FILENAME_BASE/(.*)/${1:/downcase}/} = tv({",
			"\tbase: [],",
			"});",
			"---",
			"",
			"<div class={${TM_FILENAME_BASE/(.*)/${1:/downcase}/}({class: className })} {...rest} >",
			"\t<slot />",
			"</div>",
		],
		"description": "Component with tailwind varients",
	},
	"rain_component": {
		"scope": "astro",
		"prefix": "rain_component",
		"body": [
			"---",
			"import { cn } from \"@/_helpers\";",
			"",
			"interface Props {",
			"\tclassName?: string;",
			"}",
			"const { className = \"\" } = Astro.props;",
			"",
			"---",
			"",
			"<div class={cn([\"\",className])}>",
			"\t<slot />",
			"</div>",
		],
		"description": "Just a component",
	},
	"rain_section_component": {
		"scope": "astro",
		"prefix": "rain_section_component",
		"body": [
			"---",
			"import { Container, Section } from \"@/_comps/layouts\";",
			"import { H1, Large } from \"@/_comps/typography\";",
			"",
			"---",
			"",
			"<Section id=\"${TM_FILENAME_BASE/([a-z])([A-Z])/$1_$2/g}\">",
			"\t<Container>",
			"\t\t<H1 tag=\"h2\" className=\"text-center\">",
			"\t\t\tCutting-edge",
			"\t\t</H1>",
			"\t\t<Large className=\"text-center text-neutral-100 mt-2\">",
			"\t\t\tLorem ipsum dolor sit amet, consectetur adipiscing elit, sed do",
			"\t\t\teiusmod tempor incididunt ut labore et dolore magna aliqua.",
			"\t\t</Large>",
			"\t</Container>",
			"</Section>",
		],
		"description": "Just a component",
	}
}
 
            

                <div className="bg-background text-foreground" />
            
components.json

                {
  "style": "default",
  "rsc": true,
  "tailwind": {
    "config": "",
    "css": "app/globals.css",
    "baseColor": "neutral",
    "cssVariables": true
  },
  "aliases": {
    "components": "@/components",
    "utils": "@/lib/utils",
    "ui": "@/registry/new-york-v4/ui",
    "lib": "@/lib",
    "hooks": "@/hooks"
  },
  "iconLibrary": "lucide"
}