cosscom__coss/apps/ui/public/r/particle-in-3.json

{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "particle-in-3",
  "type": "registry:block",
  "description": "Input group mimicking a URL bar",
  "registryDependencies": [
    "@coss/button",
    "@coss/input-group",
    "@coss/popover"
  ],
  "files": [
    {
      "path": "registry/default/particles/particle-in-3.tsx",
      "content": "\"use client\"\n\nimport { useState } from \"react\"\nimport { InfoIcon, StarIcon } from \"lucide-react\"\n\nimport { Button } from \"@/registry/default/ui/button\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupInput,\n} from \"@/registry/default/ui/input-group\"\nimport {\n  Popover,\n  PopoverDescription,\n  PopoverPopup,\n  PopoverTitle,\n  PopoverTrigger,\n} from \"@/registry/default/ui/popover\"\n\nexport default function Particle() {\n  const [isFavorite, setIsFavorite] = useState(false)\n\n  return (\n    <InputGroup className=\"[--radius-lg:9999px]\">\n      <Popover>\n        <InputGroupAddon>\n          <PopoverTrigger\n            render={<Button variant=\"secondary\" size=\"icon-xs\" />}\n          >\n            <InfoIcon />\n          </PopoverTrigger>\n        </InputGroupAddon>\n        <PopoverPopup\n          align=\"start\"\n          sideOffset={6}\n          alignOffset={-5}\n          className=\"w-64\"\n        >\n          <PopoverTitle className=\"text-sm\">\n            Your connection is not secure.\n          </PopoverTitle>\n          <PopoverDescription>\n            You should not enter any sensitive information on this site.\n          </PopoverDescription>\n        </PopoverPopup>\n      </Popover>\n      <InputGroupAddon className=\"pl-1.5 text-muted-foreground\">\n        https://\n      </InputGroupAddon>\n      <InputGroupInput\n        type=\"text\"\n        className=\"*:[input]:ps-1!\"\n        aria-label=\"Url\"\n      />\n      <InputGroupAddon align=\"inline-end\">\n        <Button\n          variant=\"ghost\"\n          onClick={() => setIsFavorite(!isFavorite)}\n          size=\"icon-xs\"\n        >\n          <StarIcon\n            data-favorite={isFavorite}\n            className=\"data-[favorite=true]:fill-primary data-[favorite=true]:stroke-primary\"\n          />\n        </Button>\n      </InputGroupAddon>\n    </InputGroup>\n  )\n}\n",
      "type": "registry:block"
    }
  ],
  "categories": ["input", "input group", "button", "popover"]
}