sdk-astrix

# Astrix SDK `npm i sdk-astrix` ## Available Components and Functions Components that can be used directly: 1. Tag 2. Separator 3. Avatar 4. Spinner 5. LocationIcon 6. CalendarIcon 7. Switch 8. Button 9. Dropdown 10. InputField 11. RadioGroup 12. InfoTooltip 13. EventCard 14. RangeSlider 15. Modal 16. SidebarDrawer 17. TagInput 18. SearchInput 19. TrafficByLocationCard 20. TotalRevenueCard 21. TrafficBySourceCard 22. CopyButton 23. TermsAndConditonsCard 24. Table 25. MapCard 26. ShareEventCard 27. ShareOnSocialGrid 28. SpotifySongCard 29. AvatarUploader 30. TicketBar 31. ArtistTile 32. DeleteIcon 33. UploadIcon 34. CategoryCapsule 35. SpotifySongBar 36. ImageUploader 37. EventGalleryUploader 38. EventImageGallery 39. ArtistAvatar 40. UserDetailsCardMobile 41. TicketDetailsCardMobile 42. EventDetailsCardMobile 43. AttendeesTile 44. TabsBar 45. AttendeesCard 46. QRCode 47. EventTile 48. TicketSoldCard 49. PastTicketCardMobile 50. TicketCardMobile 51. TicketSalesChart 52. DesktopSidebar 53. AddFeatureCard 54. ColorPopup 55. AddFeatureCard 56. VerticalDrawer 57. TextEditor 58. EventCardMobile 59. EventBannerMobile 60. VenueBar 61. Header 62. ConversionRateChart 63. TopBar 64. LinkClicksChart Functions that can be used directly: 1. formatDateInIST 2. formatTimeInIST 3. adjustColorOpacity 4. getEventStatus 5. cn ## How to use : 1. Tag ``` <Tag label="testing tag" className=""/> ``` 2. Separator ``` <Separator title="" className="" titleClassName="" lineClassName=""/> ``` 3. Avatar ``` <Avatar imgSrc="" className="" imgClassName=""/> ``` 4. Spinner ``` <Spinner color="#ff4400" size="lg" /> ``` 5. Location Icon ``` <LocationIcon color="#ff4400" width={20} height={20} /> ``` 6. Calendar Icon ``` <CalendarIcon color="#ff4400" width={20} height={20} /> ``` 7. Switch ``` <Switch checked={isEnabled} onChange={setIsEnabled} size="md" className="my-4" thumbClassName="shadow-md" trackClassName="peer-checked:bg-green-500" /> ``` 8. Button ``` <Button>Button Primary</Button> <Button variant="secondary" size="md">Button Secondary</Button> ``` 9. Dropdown ``` <Dropdown options={["Apple", "Banana", "Orange"]} value={selectedFruit} onChange={(value) => setSelectedFruit(value)} placeholder="Select a fruit" /> <Dropdown options={[ { value: "1", label: "Option 1" }, { value: "2", label: "Option 2" }, { value: "3", label: "Option 3" }, ]} value={selectedOption} onChange={(value) => setSelectedOption(value)} /> ``` 10. InputField ``` <InputField label="Name" placeholder="Enter your name" value={value} onChange={(e) => setValue(e.target.value)} iconSrc="/icons/user.svg" error={!value ? "Name is required" : ""} /> or <InputField label="Bio" variant="textarea" placeholder="Write a short bio..." rows={4} /> ``` 11. RadioGroup ``` <RadioGroup options={options} value={selected} onChange={setSelected} name="example" direction="horizontal" size="md" /> or <RadioGroup options={[ { value: "small", label: "Small" }, { value: "medium", label: "Medium" }, { value: "large", label: "Large" } ]} value="medium" onChange={(val) => console.log(val)} name="size-selection" direction="vertical" size="lg" /> ``` 12. InfoTooltip ``` <InfoTooltip message="this is default"/> <InfoTooltip message="this is left" position="left"/> <InfoTooltip message="this is right" position="right"/> <InfoTooltip message="this is bottom" position="bottom"/> ``` 13. EventCard ``` <EventCard onClick={() => alert("desktop event card clicked")} eventTitle="shdsh" imgSrc="" location="345" organiserImg="" organiserName="slkd" startDate="345" tags={["text", "text"]} /> ``` 14. RangeSlider ``` <RangeSlider min={0} max={500} step={10} value={price} onChange={setPrice} color="#60a5fa" className="mt-2" trackClassName="bg-blue-100" thumbClassName="shadow-lg" /> ``` 15. Modal ``` //define a state const [isModalOpen, setIsModalOpen] = useState(false); // a button to change the state <button onClick={() => setIsModalOpen(true)} Open Modal </button> <Modal isOpen={isModalOpen} onClose={() => setIsModalOpen(false)} title="Confirmation" > //your code here </Modal> ``` 16. SidebarDrawer ``` //define a state const [isDrawerOpen, setIsDrawerOpen] = useState(false); // button to toggle the state <button onClick={() => setIsDrawerOpen(true)} > Open Sidebar </button> <SidebarDrawer isOpen={isDrawerOpen} onClose={() => setIsDrawerOpen(false)} title="Menu" position="right" // or "left" width="w-96" // optional, controls drawer width > //your code here </SidebarDrawer> ``` 17. TagInput ``` <TagInput initialTags = [], onTagsChange, placeholder = "Type and press Enter...", className = "", inputClassName = "", tagContainerClassName = "", tagClassName = "", maxTags, disabled = false, error, /> ``` 18. SearchInput ``` <SearchInput value={searchTerm} onChange={setSearchTerm} onSearch={handleSearch} placeholder="Search users..." className="" iconClassName="" inputClassName="" resetButtonClassName="" /> ``` 19. TrafficByLocationCard ``` <TrafficByLocation data={yourData} /> or <TrafficByLocation data={yourData} colorPalette={["#FF6384", "#36A2EB", "#FFCE56", "#4BC0C0", "#9966FF"]} className="" isLoading={true} labelClassName="" /> ``` 20. TotalRevenueCard ``` <TotalRevenueCard value={150000} eventRevenue={100000} collectibleRevenue={50000} /> or <TotalRevenueCard title="Monthly Revenue" subTitle="April 2025" value={200000} eventRevenue={120000} collectibleRevenue={80000} className="bg-gray-900" titleClassName="text-green-300" containerClassName="bg-green-100/10" iconClassName="text-green-400" /> ``` 21. TrafficBySourceCard ``` <TrafficBySourceCard data={mockTrafficData} /> or <TrafficBySourceCard data={mockTrafficData} color="#ff44ee" labelClassName="" /> ``` 22. CopyButton ``` <CopyButton textToCopy={} className="" /> ``` 23. TermsAndConditionsCard ``` <TermsAndConditionsCard text="" className="" btnClassName="" textContainerClassName=""/> ``` 24. Table ``` //mockdata const users = [ { name: "Alice", email: "alice@example.com", role: "Admin" }, { name: "Bob", email: "bob@example.com", role: "Editor" }, { name: "Alice", email: "alice@example.com", role: "Admin" }, ]; <Table headers={headers} data={users} renderRow={(user, idx) => ( <tr key={idx}> <td className="px-4 py-2">{user.name}</td> <td className="px-4 py-2">{user.email}</td> <td className="px-4 py-2">{user.role}</td> </tr> )} tableClassName="" tableHeaderClassName="" tableBodyClassName="" /> ``` 25. MapCard ``` <MapCard apiKey="YOUR_GOOGLE_API" venue="Siri Fort Auditorium" location="New Delhi, India" color="#FF5C5C" /> ``` 26. ShareEventCard ``` <ShareEventCard eventImageUrl="https://placehold.co/600x400.png" eventName="Future Sound Festival" username="astro_user42" avatarUrl="https://placehold.co/600x400.png" linkToShare="https://youreventlink.com" /> ``` 27. ShareOnSocialGrid ``` <ShareOnSocialGrid linkToShare="slkdjf" className="" gridClassName="" iconClassName=""/> ``` 28. SpotifySongCard ``` <SpotifySongCard spotifyData={{ tracks: [{ id: "0VjIjW4GlUZAMYd2vXMi3b" }], playlists: [], }} /> or <SpotifySongCard spotifyData={{ tracks: [], playlists: [{ id: "37i9dQZF1DXcBWIGoYBM5M" }], }} /> ``` 29. AvatarUploader ``` <AvatarUploader className="" imgClassName="" editButtonClassName="" imgUrl="" /> ``` 30. TicketBar ``` {mockTickets.map((ticket, index) => ( <TicketBar key={ticket.id} ticketName={ticket.ticketName} ticketType={ticket.ticketType} price={ticket.price} availableQuantity={ticket.availableQuantity} issueQuantity={ticket.issueQuantity} maxQuantityPerUser={ticket.maxQuantityPerUser} isSelected={selectedTicket === index} isFlexiblePrice={ticket.isFlexiblePrice} onSelect={() => handleSelect(index)} onQuantityChange={(qty) => handleQuantityChange(index, qty)} color="#b0e681" /> ))} ``` 31. ArtistTile ``` <ArtistTile key={index} artist={artist} /> ``` 32. DeleteIcon ``` <DeleteIcon color="#fff" height={20} width={20} /> ``` 33. UploadIcon ``` <UploadIcon color="#fff" height={20} width={20} /> ``` 34. CategoryCapsule ``` <CategoryCapsule tag="Music", icon="", selectedIcon="", isSelected={}, onToggle={}, color = "#b0e681" /> ``` 35. SpotifySongBar ``` <SpotifySongBar type="playlist" name="My Chill Playlist" imageUrl="https://via.placeholder.com/50" link="https://open.spotify.com/playlist/abc123" /> ``` 36. ImageUploader ``` <ImageUploader className="h-[200px] rounded-[12px]" file={file} onFileChange={setFile} withAspectRatio={true} /> ``` 37. EventGalleryUploader ``` <EventGalleryUploader /> ``` 38. EventImageGallery ``` const mockGalleryImages = [ "https://images.unsplash.com/photo-1521334884684-d80222895322?w=800", "https://images.unsplash.com/photo-1579546929518-9e396f3cc809?w=800", "https://images.unsplash.com/photo-1521334884684-d80222895322?w=800", "https://images.unsplash.com/photo-1579546929518-9e396f3cc809?w=800", "https://images.unsplash.com/photo-1521334884684-d80222895322?w=800", "https://images.unsplash.com/photo-1579546929518-9e396f3cc809?w=800", ]; <EventImageGallery images={mockGalleryImages} /> ``` 39. ArtistAvatar ``` <ArtistAvatar artistImage="https://picsum.photos/200/300" artistName="Sahil" color="" artistNameClass="" onClick= /> ``` 40. UserDetailsCardMobile ``` <UserDetailsCardMobile collectiblesCount={mockDashUser.collectiblesCount} name={mockDashUser.name} userName={mockDashUser.userName} userImage={mockDashUser.userImage} userGender={mockDashUser.userGender} ticketsCount={mockDashUser.ticketsCount} className="w-full bg-dark-100 border border-dark-200 rounded" /> ``` 41. TicketDetailsCardMobile ``` <TicketDetailsCardMobile key={index} id={ticket?.id} availableQuantity={ticket?.availableQuantity} image={ticket?.image} issueQuantity={ticket?.availableQuantity} ticketStatus={ticket?.ticketStatus} name={ticket?.name} onChangeStatus={(id, newStatus) => { alert({id, newStatus}); }} /> ``` 42. EventDetailsCardMobile ``` <EventDetailsCardMobile event={{ eventName: "Live Music Festival", startDate: "2025-05-05T10:00:00Z", endDate: "2025-05-05T15:00:00Z", location: "Mumbai, India", }} tickets={[ { id: 1, name: "General Admission", image: "https://picsum.photos/50", issueQuantity: 234, availableQuantity: 23, ticketStatus: "sold out", }, { id: 2, name: "VIP Pass", issueQuantity: 234, availableQuantity: 23, ticketStatus: "sold out", image: "", }, ]} /> ``` 43. AttendeesTile ``` <AttendeesTile attendee={{name:"Sahil", img:"https://picsum.photos/200/300", email:"sahilx@gmail.com", ticketType:"RSVP", status:"Approved"}} className="" textClassName="" /> ``` 44. TabsBar ``` <TabsBar tabChange={() => {}} tabs={["one", "two", "three"]} activeTabClassName="" className="" key={1} tabClassName="" /> ``` 45. AttendeesCard ``` <AttendeesCard attendeesList={attendeesList} className={""} headingClassName={""} /> ``` 46. QRCode ``` <QRCode value={qrData} className="" size={140} bgColor="" fgColor="" /> ``` 47. EventTile ``` <EventTile eventName={eventTileMockData.eventName} href={eventTileMockData.href} oraganiserUsername={eventTileMockData.oraganiserUsername} eventImg={} color = "#b0e681" className="" titleClassName="" imgClassName="" imgContainerClassName="" /> ``` 48. TicketSoldCard ``` <TicketSoldCard tickets={[ { ticketName: "General Admission", sold: 45, total: 100 }, { ticketName: "VIP", sold: 20, total: 50 }, { ticketName: "Backstage", sold: 5, total: 10 }, ]} /> ``` 49. PastTicketCardMobile ```` <PastTicketCardMobile createdAt={pastTikcetMockData.createdAt} ticketName={pastTikcetMockData.ticketName} ticketQuantity={pastTikcetMockData.ticketQuantity} eventName={pastTikcetMockData.eventName} eventStartDate={pastTikcetMockData.eventStartDate} eventEndDate={pastTikcetMockData.eventEndDate} eventVenue={pastTikcetMockData.eventVenue} eventLocation={pastTikcetMockData.eventLocation} eventImages={pastTikcetMockData.eventImages} color="#b0e681" onClick={() => alert("Card clicked!")} className="" cardClassName="" badgeClassName="" /> ``` ```` 50. TicketCardMobile ``` <TicketCardMobile tickerPrice={pastTikcetMockData.price} createdAt={pastTikcetMockData.createdAt} eventEndDate={pastTikcetMockData.eventEndDate} eventImages={pastTikcetMockData.eventImages} eventName={pastTikcetMockData.eventName} eventStartDate={pastTikcetMockData.eventStartDate} ticketName={pastTikcetMockData.ticketName} ticketQuantity={pastTikcetMockData.ticketQuantity} eventVenue={pastTikcetMockData.eventVenue} eventLocation={pastTikcetMockData.eventLocation} color="#b0e681" onClick={() => alert("Card clicked!")} mapApiKey="" imgClassName="" className="" /> ``` 51. TicketSalesChart ``` const mockTicketSalesData = [ { createdAt: "2025-04-01T10:00:00Z", attendees: "12", }, { createdAt: "2025-04-02T12:00:00Z", attendees: "7", } ] <TicketSalesChart ticketData={mockTicketSalesData} title="" className="" titleClassName="" chartClassName="" color="" yTicksColor="" /> ``` 52. Desktop Sidebar ``` <DesktopSideBar fanLinks={fanMenuList} organiserLinks={organiserMenuList} onChange={(checked: boolean) => setIsOrganiserMode(checked)} isOrganiserMode={isOrganiserMode} className="max-w-[200px]" linkClassName="py-2" linkTextClassName="text-sm" activeColor="#b0e681" profileMenu={profileMenu} /> ``` 53. AddFeatureCard ``` <AddFeatureCard imgSrc="/icons/plus.svg" title="Add Custom Feature" description="Use this card to highlight a new feature users can add." btnLabel="Add Now" className="bg-dark-200 hover:bg-dark-300" titleClassName="text-lg" descClassName="text-gray-400" btnClassName="" onClick={()=>alert("btn clickeds")} /> ``` 54. ColorPopup ``` <ColorPopup selectedColor="#b0e681" onChange={() => {}} className="w-full text-white" selectedColor, onChange, colors = [], label = "Color", dropdownClassName = "", triggerClassName = "", /> ``` 55. AddFeatureCard ``` <AddFeatureCard imgSrc="/icons/plus.svg" title="Add Custom Feature" description="Use this card to highlight a new feature users can add." btnLabel="Add Now" className="bg-dark-200 hover:bg-dark-300" titleClassName="text-lg" descClassName="text-gray-400" btnClassName="" onClick={() => alert("btn clickeds")} /> ``` 56. VerticalDrawer ``` <VerticalDrawer isOpen={isDrawerOpen} onClose={() => setIsDrawerOpen(false)} position="bottom" title = "", titleClassName = "", showCloseButton = true, closeButtonClassName = "", contentClassName = "", > //you code here </VerticalDrawer> ``` 57. TextEditor ``` <TextEditor name="description" initialValue={editorContent} onChange={setEditorContent} maxLength={500} wrapperClassName="mb-4" /> ``` 58. EventCardMobile ``` <EventCardMobile organiserName="" organiserImg="" eventImg="" eventName="Testing Event" tags={["tag", "testing"]} eventLocation="New Delhi" eventVenue="JLN Stadium" eventStartDate="" onClick={() => alert("mobile event card clicked")} /> ``` 59. EventBannerMobile ``` <EventBannerMobile className="mx-auto my-4" eventImg="https://images.unsplash.com/photo-1551963831-b3b1ca40c98e" eventName="Sunset Beats Festival" organiserImg="https://randomuser.me/api/portraits/men/75.jpg" organiserName="DJ Avicii" onShareClick={() => alert("Share clicked!")} tags={["EDM", "Live", "Outdoor", "Festival"]} eventVenue="JLN Stadium, New Delhi" eventColor="#FF6B00" eventStartDate="2025-06-15T18:00:00Z" /> ``` 60. VenueBar ``` <VenueBar className={""} data={[ { location: "delhi", venue: "nehru stadium", }, { location: "chennai", venue: "chidambram stadium", }, ]} isSingle={false} onSelect={() => alert(selectedLocation)} /> ``` 61. Header ``` <Header className="" navClassName=""> <div className="w-full flex justify-center items-center"> <h1>Stikcy Header</h1> </div> </Header> ``` 62. ConversionRateChart ``` const sampleData = { purchase: { Day: [2], Week: [1, 2, 2, 3, 2, 4, 5], Month: [5, 6, 7, 10], Year: [200, 180, 190, 210, 250, 230, 220, 200, 190, 240, 260, 270], }, checkout: { Day: [4], Week: [2, 3, 3, 4, 3, 5, 6], Month: [6, 7, 8, 9], Year: [100, 110, 105, 120, 130, 125, 115, 100, 95, 135, 140, 145], }, visit: { Day: [10], Week: [8, 9, 10, 9, 10, 9, 10], Month: [10, 9, 9, 10], Year: [300, 320, 310, 330, 350, 340, 325, 310, 300, 360, 370, 380], }, }; <ConversionRateChart sampleData={sampleData} className={""} dropdownBtnClassName={""} ticksColor="#181818" dropdownOptionClassName={""} /> ``` 63. TopBar ``` <TopBar organiserName="John Doe" organiserImage="https://picsum.photos/200/300" eventName="Spring Fest 2025" eventStartDate="2025-05-01T10:00:00Z" eventEndDate="2025-05-10T18:00:00Z" eventImage="https://picsum.photos/200/300" eventLocation="Mumbai, India" className="" dateClassName="" locationClassName="" statusClassName="" /> ``` 64. LinkClicksChart ``` <LinkClicksChart data={data} ticksColor="#b0e681" isLoading={false} className="" ticksColor="" dropdownBtnClassName="" dropdownOptionClassName="" /> ```