sdk-astrix
v0.0.23
Published
`npm i sdk-astrix`
Downloads
77
Readme
Astrix SDK
npm i sdk-astrix
Available Components and Functions
Components that can be used directly:
- Tag
- Separator
- Avatar
- Spinner
- LocationIcon
- CalendarIcon
- Switch
- Button
- Dropdown
- InputField
- RadioGroup
- InfoTooltip
- EventCard
- RangeSlider
- Modal
- SidebarDrawer
- TagInput
- SearchInput
- TrafficByLocationCard
- TotalRevenueCard
- TrafficBySourceCard
- CopyButton
- TermsAndConditonsCard
- Table
- MapCard
- ShareEventCard
- ShareOnSocialGrid
- SpotifySongCard
- AvatarUploader
- TicketBar
- ArtistTile
- DeleteIcon
- UploadIcon
- CategoryCapsule
- SpotifySongBar
- ImageUploader
- EventGalleryUploader
- EventImageGallery
- ArtistAvatar
- UserDetailsCardMobile
- TicketDetailsCardMobile
- EventDetailsCardMobile
- AttendeesTile
- TabsBar
- AttendeesCard
- QRCode
- EventTile
- TicketSoldCard
- PastTicketCardMobile
- TicketCardMobile
- TicketSalesChart
- DesktopSidebar
- AddFeatureCard
- ColorPopup
- AddFeatureCard
- VerticalDrawer
- TextEditor
- EventCardMobile
- EventBannerMobile
- VenueBar
- Header
- ConversionRateChart
- TopBar
- LinkClicksChart
Functions that can be used directly:
- formatDateInIST
- formatTimeInIST
- adjustColorOpacity
- getEventStatus
- cn
How to use :
- Tag
<Tag label="testing tag" className=""/>- Separator
<Separator title="" className="" titleClassName="" lineClassName=""/>- Avatar
<Avatar imgSrc="" className="" imgClassName=""/>- Spinner
<Spinner color="#ff4400" size="lg" />- Location Icon
<LocationIcon color="#ff4400" width={20} height={20} />- Calendar Icon
<CalendarIcon color="#ff4400" width={20} height={20} />- Switch
<Switch
checked={isEnabled}
onChange={setIsEnabled}
size="md"
className="my-4"
thumbClassName="shadow-md"
trackClassName="peer-checked:bg-green-500"
/>- Button
<Button>Button Primary</Button>
<Button variant="secondary" size="md">Button Secondary</Button>- 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)}
/>
- 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}
/>- 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"
/>- 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"/>- EventCard
<EventCard
onClick={() => alert("desktop event card clicked")}
eventTitle="shdsh"
imgSrc=""
location="345"
organiserImg=""
organiserName="slkd"
startDate="345"
tags={["text", "text"]}
/>- RangeSlider
<RangeSlider
min={0}
max={500}
step={10}
value={price}
onChange={setPrice}
color="#60a5fa"
className="mt-2"
trackClassName="bg-blue-100"
thumbClassName="shadow-lg"
/>- 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>- 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>- TagInput
<TagInput
initialTags = [],
onTagsChange,
placeholder = "Type and press Enter...",
className = "",
inputClassName = "",
tagContainerClassName = "",
tagClassName = "",
maxTags,
disabled = false,
error,
/>- SearchInput
<SearchInput
value={searchTerm}
onChange={setSearchTerm}
onSearch={handleSearch}
placeholder="Search users..."
className=""
iconClassName=""
inputClassName=""
resetButtonClassName=""
/>- TrafficByLocationCard
<TrafficByLocation
data={yourData}
/>
or
<TrafficByLocation
data={yourData}
colorPalette={["#FF6384", "#36A2EB", "#FFCE56", "#4BC0C0", "#9966FF"]}
className=""
isLoading={true}
labelClassName=""
/>- 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"
/>- TrafficBySourceCard
<TrafficBySourceCard data={mockTrafficData} />
or
<TrafficBySourceCard data={mockTrafficData}
color="#ff44ee"
labelClassName=""
/>- CopyButton
<CopyButton textToCopy={} className="" />- TermsAndConditionsCard
<TermsAndConditionsCard text="" className="" btnClassName="" textContainerClassName=""/>- Table
//mockdata
const users = [
{ name: "Alice", email: "[email protected]", role: "Admin" },
{ name: "Bob", email: "[email protected]", role: "Editor" },
{ name: "Alice", email: "[email protected]", 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=""
/>- MapCard
<MapCard
apiKey="YOUR_GOOGLE_API"
venue="Siri Fort Auditorium"
location="New Delhi, India"
color="#FF5C5C"
/>- 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"
/>- ShareOnSocialGrid
<ShareOnSocialGrid
linkToShare="slkdjf"
className=""
gridClassName=""
iconClassName=""/>- SpotifySongCard
<SpotifySongCard
spotifyData={{
tracks: [{ id: "0VjIjW4GlUZAMYd2vXMi3b" }],
playlists: [],
}}
/>
or
<SpotifySongCard
spotifyData={{
tracks: [],
playlists: [{ id: "37i9dQZF1DXcBWIGoYBM5M" }],
}}
/>- AvatarUploader
<AvatarUploader
className=""
imgClassName=""
editButtonClassName=""
imgUrl=""
/>- 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"
/>
))}- ArtistTile
<ArtistTile key={index} artist={artist} />- DeleteIcon
<DeleteIcon color="#fff" height={20} width={20} />- UploadIcon
<UploadIcon color="#fff" height={20} width={20} />- CategoryCapsule
<CategoryCapsule tag="Music",
icon="",
selectedIcon="",
isSelected={},
onToggle={},
color = "#b0e681"
/>- SpotifySongBar
<SpotifySongBar
type="playlist"
name="My Chill Playlist"
imageUrl="https://via.placeholder.com/50"
link="https://open.spotify.com/playlist/abc123"
/>- ImageUploader
<ImageUploader
className="h-[200px] rounded-[12px]"
file={file}
onFileChange={setFile}
withAspectRatio={true}
/>- EventGalleryUploader
<EventGalleryUploader />- 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} />- ArtistAvatar
<ArtistAvatar
artistImage="https://picsum.photos/200/300"
artistName="Sahil"
color=""
artistNameClass=""
onClick=
/>- 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"
/>- 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});
}}
/>- 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: "",
},
]}
/>- AttendeesTile
<AttendeesTile
attendee={{name:"Sahil", img:"https://picsum.photos/200/300", email:"[email protected]", ticketType:"RSVP", status:"Approved"}}
className=""
textClassName="" />- TabsBar
<TabsBar
tabChange={() => {}}
tabs={["one", "two", "three"]}
activeTabClassName=""
className=""
key={1}
tabClassName=""
/>- AttendeesCard
<AttendeesCard
attendeesList={attendeesList}
className={""}
headingClassName={""}
/>- QRCode
<QRCode value={qrData}
className=""
size={140}
bgColor=""
fgColor=""
/>- EventTile
<EventTile
eventName={eventTileMockData.eventName}
href={eventTileMockData.href}
oraganiserUsername={eventTileMockData.oraganiserUsername}
eventImg={}
color = "#b0e681"
className=""
titleClassName=""
imgClassName=""
imgContainerClassName=""
/>- TicketSoldCard
<TicketSoldCard
tickets={[
{ ticketName: "General Admission", sold: 45, total: 100 },
{ ticketName: "VIP", sold: 20, total: 50 },
{ ticketName: "Backstage", sold: 5, total: 10 },
]}
/>- 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=""
/>
```- 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=""
/>- 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=""
/>- 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}
/>- 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")}
/>- ColorPopup
<ColorPopup
selectedColor="#b0e681"
onChange={() => {}}
className="w-full text-white"
selectedColor,
onChange,
colors = [],
label = "Color",
dropdownClassName = "",
triggerClassName = "",
/>- 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")}
/>- VerticalDrawer
<VerticalDrawer
isOpen={isDrawerOpen}
onClose={() => setIsDrawerOpen(false)}
position="bottom"
title = "",
titleClassName = "",
showCloseButton = true,
closeButtonClassName = "",
contentClassName = "",
>
//you code here
</VerticalDrawer>- TextEditor
<TextEditor
name="description"
initialValue={editorContent}
onChange={setEditorContent}
maxLength={500}
wrapperClassName="mb-4"
/>- EventCardMobile
<EventCardMobile
organiserName=""
organiserImg=""
eventImg=""
eventName="Testing Event"
tags={["tag", "testing"]}
eventLocation="New Delhi"
eventVenue="JLN Stadium"
eventStartDate=""
onClick={() => alert("mobile event card clicked")}
/>- 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"
/>- VenueBar
<VenueBar
className={""}
data={[
{
location: "delhi",
venue: "nehru stadium",
},
{
location: "chennai",
venue: "chidambram stadium",
},
]}
isSingle={false}
onSelect={() => alert(selectedLocation)}
/>- Header
<Header className="" navClassName="">
<div className="w-full flex justify-center items-center">
<h1>Stikcy Header</h1>
</div>
</Header>- 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={""}
/>- 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=""
/>
- LinkClicksChart
<LinkClicksChart
data={data}
ticksColor="#b0e681"
isLoading={false}
className=""
ticksColor=""
dropdownBtnClassName=""
dropdownOptionClassName=""
/>