diff --git a/.husky/commit-msg b/.husky/commit-msg index fd8dadf..941c460 100644 --- a/.husky/commit-msg +++ b/.husky/commit-msg @@ -1 +1 @@ -#bunx --no-install commitlint --edit $1 +# #bunx --no-install commitlint --edit $1 diff --git a/.husky/pre-commit b/.husky/pre-commit index 4d8e4a6..8e3d414 100644 --- a/.husky/pre-commit +++ b/.husky/pre-commit @@ -1 +1 @@ -#bun format +# #bun format diff --git a/apps/app/app/assets/icons/CalendarIcon.tsx b/apps/app/app/assets/icons/CalendarIcon.tsx new file mode 100644 index 0000000..71d1a07 --- /dev/null +++ b/apps/app/app/assets/icons/CalendarIcon.tsx @@ -0,0 +1,20 @@ +import { SVGProps } from "react"; + +const CalendarIcon = ({ ...props }: SVGProps) => { + return ( + + + + ); +}; + +export default CalendarIcon; diff --git a/apps/app/app/assets/icons/CancelWhiteIcon.tsx b/apps/app/app/assets/icons/CancelWhiteIcon.tsx new file mode 100644 index 0000000..8232be9 --- /dev/null +++ b/apps/app/app/assets/icons/CancelWhiteIcon.tsx @@ -0,0 +1,22 @@ +import { SVGProps } from "react"; + +const CancelWhiteIcon = ({ ...props }: SVGProps) => { + return ( + + + + ); +}; + +export default CancelWhiteIcon; diff --git a/apps/app/app/assets/icons/CancleIcon.tsx b/apps/app/app/assets/icons/CancleIcon.tsx new file mode 100644 index 0000000..746b124 --- /dev/null +++ b/apps/app/app/assets/icons/CancleIcon.tsx @@ -0,0 +1,22 @@ +import { SVGProps } from "react"; + +const CancleIcon = ({ ...props }: SVGProps) => { + return ( + + + + ); +}; + +export default CancleIcon; diff --git a/apps/app/app/assets/icons/ClockIcon.tsx b/apps/app/app/assets/icons/ClockIcon.tsx new file mode 100644 index 0000000..ad0d0d5 --- /dev/null +++ b/apps/app/app/assets/icons/ClockIcon.tsx @@ -0,0 +1,20 @@ +import { SVGProps } from "react"; + +const ClockIcon = ({ ...props }: SVGProps) => { + return ( + + + + ); +}; + +export default ClockIcon; diff --git a/apps/app/app/assets/icons/DownloadIcon.tsx b/apps/app/app/assets/icons/DownloadIcon.tsx new file mode 100644 index 0000000..77a4614 --- /dev/null +++ b/apps/app/app/assets/icons/DownloadIcon.tsx @@ -0,0 +1,20 @@ +import { SVGProps } from "react"; + +const DownloadIcon = ({ ...props }: SVGProps) => { + return ( + + + + ); +}; + +export default DownloadIcon; diff --git a/apps/app/app/assets/icons/InformationIcon.tsx b/apps/app/app/assets/icons/InformationIcon.tsx new file mode 100644 index 0000000..941bd2a --- /dev/null +++ b/apps/app/app/assets/icons/InformationIcon.tsx @@ -0,0 +1,20 @@ +import { SVGProps } from "react"; + +const InformationIcon = ({ ...props }: SVGProps) => { + return ( + + + + ); +}; + +export default InformationIcon; diff --git a/apps/app/app/assets/icons/LocationIcon.tsx b/apps/app/app/assets/icons/LocationIcon.tsx new file mode 100644 index 0000000..514aa5d --- /dev/null +++ b/apps/app/app/assets/icons/LocationIcon.tsx @@ -0,0 +1,20 @@ +import { SVGProps } from "react"; + +const LocationIcon = ({ ...props }: SVGProps) => { + return ( + + + + ); +}; + +export default LocationIcon; diff --git a/apps/app/app/assets/icons/RightArrowIcon.tsx b/apps/app/app/assets/icons/RightArrowIcon.tsx new file mode 100644 index 0000000..111f033 --- /dev/null +++ b/apps/app/app/assets/icons/RightArrowIcon.tsx @@ -0,0 +1,20 @@ +import { SVGProps } from "react"; + +const BreezeLogoIcon = ({ ...props }: SVGProps) => { + return ( + + + + ); +}; + +export default BreezeLogoIcon; diff --git a/apps/app/app/assets/icons/SavedIcon.tsx b/apps/app/app/assets/icons/SavedIcon.tsx new file mode 100644 index 0000000..dd5634b --- /dev/null +++ b/apps/app/app/assets/icons/SavedIcon.tsx @@ -0,0 +1,22 @@ +import { SVGProps } from "react"; + +const SavedIcon = ({ ...props }: SVGProps) => { + return ( + + + + ); +}; + +export default SavedIcon; diff --git a/apps/app/app/assets/icons/backicon.tsx b/apps/app/app/assets/icons/backicon.tsx new file mode 100644 index 0000000..ec41e7e --- /dev/null +++ b/apps/app/app/assets/icons/backicon.tsx @@ -0,0 +1,22 @@ +import { SVGProps } from "react"; + +const BackIcon = ({ ...props }: SVGProps) => { + return ( + + + + ); +}; + +export default BackIcon; diff --git a/apps/app/app/assets/images/808Music.svg b/apps/app/app/assets/images/808Music.svg new file mode 100644 index 0000000..4bd7d8e --- /dev/null +++ b/apps/app/app/assets/images/808Music.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/apps/app/app/assets/images/congratulation.png b/apps/app/app/assets/images/congratulation.png new file mode 100644 index 0000000..55530dd Binary files /dev/null and b/apps/app/app/assets/images/congratulation.png differ diff --git a/apps/app/app/assets/images/fireworkShow.svg b/apps/app/app/assets/images/fireworkShow.svg new file mode 100644 index 0000000..06ff564 --- /dev/null +++ b/apps/app/app/assets/images/fireworkShow.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/apps/app/app/assets/images/midSummer.jpg b/apps/app/app/assets/images/midSummer.jpg new file mode 100644 index 0000000..1e3702f Binary files /dev/null and b/apps/app/app/assets/images/midSummer.jpg differ diff --git a/apps/app/app/assets/images/midSummer2.svg b/apps/app/app/assets/images/midSummer2.svg new file mode 100644 index 0000000..8056484 --- /dev/null +++ b/apps/app/app/assets/images/midSummer2.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/apps/app/app/assets/images/muralArtFestival.svg b/apps/app/app/assets/images/muralArtFestival.svg new file mode 100644 index 0000000..8a3c24e --- /dev/null +++ b/apps/app/app/assets/images/muralArtFestival.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/apps/app/app/assets/images/sadReaction.png b/apps/app/app/assets/images/sadReaction.png new file mode 100644 index 0000000..5b53c50 Binary files /dev/null and b/apps/app/app/assets/images/sadReaction.png differ diff --git a/apps/app/app/assets/images/songKran.svg b/apps/app/app/assets/images/songKran.svg new file mode 100644 index 0000000..1a852f6 --- /dev/null +++ b/apps/app/app/assets/images/songKran.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/apps/app/app/event/including-events/808-music/buy-successful/page.tsx b/apps/app/app/event/including-events/808-music/buy-successful/page.tsx new file mode 100644 index 0000000..fdb7ad7 --- /dev/null +++ b/apps/app/app/event/including-events/808-music/buy-successful/page.tsx @@ -0,0 +1,75 @@ +"use client"; +import React, { useState } from "react"; +import Congratulation from "@/app/assets/images/congratulation.png"; +import DownloadIcon from "@/app/assets/icons/DownloadIcon"; +import CancelIcon from "@/app/assets/icons/CancleIcon"; +import Image from "next/image"; +import Link from "next/link"; +import { Badge, cn } from "@breeze/ui"; +import SavedIcon from "@/app/assets/icons/SavedIcon"; + +export default function BuySuccessful() { + const [isETicketSaved, setIsETicketSaved] = useState(false); + + const handleSaveETicket = () => { + setIsETicketSaved(true); + }; + return ( +
+ + + + +

Congratulations !

+

+ You have bought the ticket. +

+ + Congratulation Icon + +

+ See you at the +

+

+ 808 Music Festival +

+ +
+ {isETicketSaved ? ( + <> + +

+ Your e-ticket is saved +

+ + ) : ( + <> + +

+ Save my e-ticket +

+ + )} +
+ +
+ + + OK + + +
+ ); +} diff --git a/apps/app/app/event/including-events/808-music/early-regular-hotsale/early-tickets/buy-price/page.tsx b/apps/app/app/event/including-events/808-music/early-regular-hotsale/early-tickets/buy-price/page.tsx new file mode 100644 index 0000000..567c216 --- /dev/null +++ b/apps/app/app/event/including-events/808-music/early-regular-hotsale/early-tickets/buy-price/page.tsx @@ -0,0 +1,219 @@ +"use client"; +import BackIcon from "@/app/assets/icons/BackIcon"; + +import SadReaction from "@/app/assets/images/sadReaction.png"; +import Link from "next/link"; +import React, { useState } from "react"; +import { + Alert, + AlertDescription, + AlertTitle, + Badge, + Checkbox, + Toggle, +} from "@breeze/ui"; +import { cn } from "@/utils"; +import Image from "next/image"; +import CancleIcon from "@/app/assets/icons/CancleIcon"; +import CancelWhiteIcon from "@/app/assets/icons/CancelWhiteIcon"; +import { useRouter } from "next/navigation"; +export default function BuyPriceType1() { + const router = useRouter(); + + const handleGoBack = () => { + router.back(); + }; + const userMoney = 0; // Assuming user has 250,000 units of currency + + const [selectedButtons, setSelectedButtons] = useState([]); + const [isChecked, setIsChecked] = useState(false); + const [showInsufficientFundsAlert, setShowInsufficientFundsAlert] = + useState(false); + + const handleCheckboxChange = () => { + setIsChecked(!isChecked); + }; + + const handleButtonClick = (buttonId: number) => { + if (!selectedButtons.includes(buttonId)) { + setSelectedButtons([buttonId]); + } else { + setSelectedButtons([]); + } + }; + + const handleBuyTicketClick = () => { + if (userMoney < 300000) { + setShowInsufficientFundsAlert(true); + } else { + // Proceed to the successful purchase page + window.location.href = "/event/including-events/808-music/buy-successful"; + } + }; + + const buttons = [ + { id: 1, label: "1", available: false }, + { id: 2, label: "2", available: true }, + { id: 3, label: "3", available: true }, + { id: 4, label: "4", available: false }, + { id: 5, label: "5", available: true }, + { id: 6, label: "6", available: false }, + { id: 7, label: "7", available: false }, + { id: 8, label: "8", available: false }, + ]; + + return ( +
+ {showInsufficientFundsAlert && ( +
+
+ + +
+ + + +
+

+ Not enough money ! +

+ Cash-in to buy ticket. +
+
+
+
+
+ )} +
+
+
+ + + + + +

+ 808 Music Festival +

+
+
+
+ +
+

VVIP

+

400,000

+
+
+
    +
  • + 7 Pax +
  • +
  • + 7 Beers +
  • +
  • + 1 Potatoes +
  • +
  • + 2 Cokes +
  • +
  • + 2 Water Bottle +
  • +
+
+

+ Sales ends on{" "} + + Dec 14, 2023 + +

+
+
+ +
+
+ {isChecked && selectedButtons.length === 0 ? ( + <> +

Select your ticket

+ *select one* + + ) : ( +

Select your ticket

+ )} +
+
+
+
+ {buttons.map((button) => ( + + ))} +
+
+ +
+
+ +

+ I accept{" "} + + + breeze’s Terms and Conditions. + + + (Required) +

+
+ +
+
+

400,000

+ {isChecked && selectedButtons.length > 0 ? ( + + Buy Ticket + + ) : ( + + Buy Ticket + + )} +
+
+
+
+ ); +} diff --git a/apps/app/app/event/including-events/808-music/early-regular-hotsale/early-tickets/page.tsx b/apps/app/app/event/including-events/808-music/early-regular-hotsale/early-tickets/page.tsx new file mode 100644 index 0000000..ac62ce6 --- /dev/null +++ b/apps/app/app/event/including-events/808-music/early-regular-hotsale/early-tickets/page.tsx @@ -0,0 +1,203 @@ +"use client"; +import BackIcon from "@/app/assets/icons/BackIcon"; +import Link from "next/link"; +import React, { useState } from "react"; +import { Badge, Toggle } from "@breeze/ui"; +import { cn } from "@/utils"; + +export default function EarlyTicket() { + const handleGoBack = () => { + window.history.back(); + }; + + const [selectedToggle, setSelectedToggle] = useState<"GA" | "VIP" | "VVIP">( + null + ); + + const handleToggleChange = ( + toggle: React.SetStateAction<"GA" | "VIP" | "VVIP"> + ) => { + setSelectedToggle(toggle); + }; + + return ( +
+
+
+
+ + + + + +

+ 808 Music Festival +

+
+
+
+

+ Early Bird{" "} + + Available + +

+

+ Sales ends on{" "} + + Dec 14, 2023 + +

+
+
+ handleToggleChange("GA")} + > +
+

GA

+

30,000

+
+
+

+ Sales ends on{" "} + + Dec 14, 2023 + +

+
+
+ + handleToggleChange("VIP")} + > +
+

VIP

+

300,000

+
+
+
    +
  • + 6 Pax +
  • +
  • + 6 Beers +
  • +
  • + 2 Water Bottle +
  • +
+
+

+ Sales ends on{" "} + + Dec 14, 2023 + +

+
+ + handleToggleChange("VVIP")} + > +
+

VVIP

+

400,000

+
+
+
    +
  • + 7 Pax +
  • +
  • + 7 Beers +
  • +
  • + 1 Potatoes +
  • +
  • + 2 Cokes +
  • +
  • + 2 Water Bottle +
  • +
+
+

+ Sales ends on{" "} + + Dec 14, 2023 + +

+
+
+
+ + + Next + + +
+
+
+ ); +} diff --git a/apps/app/app/event/including-events/808-music/early-regular-hotsale/page.tsx b/apps/app/app/event/including-events/808-music/early-regular-hotsale/page.tsx new file mode 100644 index 0000000..0d319c4 --- /dev/null +++ b/apps/app/app/event/including-events/808-music/early-regular-hotsale/page.tsx @@ -0,0 +1,216 @@ +"use client"; +import BackIcon from "@/app/assets/icons/BackIcon"; +import RightArrowIcon from "@/app/assets/icons/RightArrowIcon"; +import Link from "next/link"; +import React, { useEffect, useState } from "react"; +import { + Accordion, + AccordionContent, + AccordionItem, + AccordionTrigger, + Badge, + Checkbox, + Toggle, +} from "@breeze/ui"; +import { cn } from "@/utils"; +import { useRouter } from "next/navigation"; + +export default function EarlyRegularHot() { + const router = useRouter(); + + const handleGoBack = () => { + router.back(); + }; + const [badgeTexts, setBadgeTexts] = useState(["", "", ""]); + + const getBadgeColor = (text: string) => { + if (text === "Available") { + return "bg-availablegreen"; + } else if (text === "Coming Soon") { + return "bg-commingorange"; + } else { + return "bg-soldoutgray"; + } + }; + const setBadgeTextByIndex = (index: number) => { + switch (index) { + case 0: + return "Available"; + case 1: + return "Coming Soon"; + case 2: + return "Sold Out"; + default: + return ""; // Return empty string for unknown index + } + }; + + useEffect(() => { + // Call setBadgeTextByIndex with the desired index to set the badge texts + setBadgeTexts([ + setBadgeTextByIndex(0), + setBadgeTextByIndex(1), + setBadgeTextByIndex(2), + ]); + }, []); + + return ( +
+
+
+
+ + + + + +

+ 808 Music Festival +

+
+
+
+ + + +
+
+

+ Early Bird{" "} + + {badgeTexts[2]} + +

+

+ Sales ends on{" "} + + Dec 14, 2023 + +

+
+ + + +
+ +
+ + +
+
+

+ Regular{" "} + + {badgeTexts[0]} + +

+

+ Sales ends on{" "} + + Dec 14, 2023 + +

+
+ + + +
+ +
+ + +
+
+

+ Hot Sale{" "} + + {badgeTexts[1]} + +

+

+ Sales ends on{" "} + + Dec 14, 2023 + +

+
+ + + +
+ +
+
+
+
+ ); +} diff --git a/apps/app/app/event/including-events/808-music/early-regular-hotsale/regular-tickets/buy-price/page.tsx b/apps/app/app/event/including-events/808-music/early-regular-hotsale/regular-tickets/buy-price/page.tsx new file mode 100644 index 0000000..567c216 --- /dev/null +++ b/apps/app/app/event/including-events/808-music/early-regular-hotsale/regular-tickets/buy-price/page.tsx @@ -0,0 +1,219 @@ +"use client"; +import BackIcon from "@/app/assets/icons/BackIcon"; + +import SadReaction from "@/app/assets/images/sadReaction.png"; +import Link from "next/link"; +import React, { useState } from "react"; +import { + Alert, + AlertDescription, + AlertTitle, + Badge, + Checkbox, + Toggle, +} from "@breeze/ui"; +import { cn } from "@/utils"; +import Image from "next/image"; +import CancleIcon from "@/app/assets/icons/CancleIcon"; +import CancelWhiteIcon from "@/app/assets/icons/CancelWhiteIcon"; +import { useRouter } from "next/navigation"; +export default function BuyPriceType1() { + const router = useRouter(); + + const handleGoBack = () => { + router.back(); + }; + const userMoney = 0; // Assuming user has 250,000 units of currency + + const [selectedButtons, setSelectedButtons] = useState([]); + const [isChecked, setIsChecked] = useState(false); + const [showInsufficientFundsAlert, setShowInsufficientFundsAlert] = + useState(false); + + const handleCheckboxChange = () => { + setIsChecked(!isChecked); + }; + + const handleButtonClick = (buttonId: number) => { + if (!selectedButtons.includes(buttonId)) { + setSelectedButtons([buttonId]); + } else { + setSelectedButtons([]); + } + }; + + const handleBuyTicketClick = () => { + if (userMoney < 300000) { + setShowInsufficientFundsAlert(true); + } else { + // Proceed to the successful purchase page + window.location.href = "/event/including-events/808-music/buy-successful"; + } + }; + + const buttons = [ + { id: 1, label: "1", available: false }, + { id: 2, label: "2", available: true }, + { id: 3, label: "3", available: true }, + { id: 4, label: "4", available: false }, + { id: 5, label: "5", available: true }, + { id: 6, label: "6", available: false }, + { id: 7, label: "7", available: false }, + { id: 8, label: "8", available: false }, + ]; + + return ( +
+ {showInsufficientFundsAlert && ( +
+
+ + +
+ + + +
+

+ Not enough money ! +

+ Cash-in to buy ticket. +
+
+
+
+
+ )} +
+
+
+ + + + + +

+ 808 Music Festival +

+
+
+
+ +
+

VVIP

+

400,000

+
+
+
    +
  • + 7 Pax +
  • +
  • + 7 Beers +
  • +
  • + 1 Potatoes +
  • +
  • + 2 Cokes +
  • +
  • + 2 Water Bottle +
  • +
+
+

+ Sales ends on{" "} + + Dec 14, 2023 + +

+
+
+ +
+
+ {isChecked && selectedButtons.length === 0 ? ( + <> +

Select your ticket

+ *select one* + + ) : ( +

Select your ticket

+ )} +
+
+
+
+ {buttons.map((button) => ( + + ))} +
+
+ +
+
+ +

+ I accept{" "} + + + breeze’s Terms and Conditions. + + + (Required) +

+
+ +
+
+

400,000

+ {isChecked && selectedButtons.length > 0 ? ( + + Buy Ticket + + ) : ( + + Buy Ticket + + )} +
+
+
+
+ ); +} diff --git a/apps/app/app/event/including-events/808-music/early-regular-hotsale/regular-tickets/page.tsx b/apps/app/app/event/including-events/808-music/early-regular-hotsale/regular-tickets/page.tsx new file mode 100644 index 0000000..0c86f38 --- /dev/null +++ b/apps/app/app/event/including-events/808-music/early-regular-hotsale/regular-tickets/page.tsx @@ -0,0 +1,206 @@ +"use client"; +import BackIcon from "@/app/assets/icons/BackIcon"; +import Link from "next/link"; +import React, { useState } from "react"; +import { Badge, Toggle } from "@breeze/ui"; +import { cn } from "@/utils"; +import { useRouter } from "next/navigation"; + +export default function RegularTickets() { + const router = useRouter(); + + const handleGoBack = () => { + router.back(); + }; + + const [selectedToggle, setSelectedToggle] = useState<"GA" | "VIP" | "VVIP">( + null + ); + + const handleToggleChange = ( + toggle: React.SetStateAction<"GA" | "VIP" | "VVIP"> + ) => { + setSelectedToggle(toggle); + }; + + return ( +
+
+
+
+ + + + + +

+ 808 Music Festival +

+
+
+
+

+ Regular{" "} + + Available + +

+

+ Sales ends on{" "} + + Dec 14, 2023 + +

+
+
+ handleToggleChange("GA")} + > +
+

GA

+

30,000

+
+
+

+ Sales ends on{" "} + + Dec 14, 2023 + +

+
+
+ + handleToggleChange("VIP")} + > +
+

VIP

+

300,000

+
+
+
    +
  • + 6 Pax +
  • +
  • + 6 Beers +
  • +
  • + 2 Water Bottle +
  • +
+
+

+ Sales ends on{" "} + + Dec 14, 2023 + +

+
+ + handleToggleChange("VVIP")} + > +
+

VVIP

+

400,000

+
+
+
    +
  • + 7 Pax +
  • +
  • + 7 Beers +
  • +
  • + 1 Potatoes +
  • +
  • + 2 Cokes +
  • +
  • + 2 Water Bottle +
  • +
+
+

+ Sales ends on{" "} + + Dec 14, 2023 + +

+
+
+
+ + + Next + + +
+
+
+ ); +} diff --git a/apps/app/app/event/including-events/808-music/page.tsx b/apps/app/app/event/including-events/808-music/page.tsx new file mode 100644 index 0000000..af992ac --- /dev/null +++ b/apps/app/app/event/including-events/808-music/page.tsx @@ -0,0 +1,206 @@ +"use client"; +import BackIcon from "@/app/assets/icons/BackIcon"; +import { cn } from "@/utils"; +import { Badge, Button } from "@breeze/ui"; +import Image from "next/image"; +import Songkran from "@/app/assets/images/songKran.svg"; +import Music808 from "@/app/assets/images/808Music.svg"; +import CalendarIcon from "@/app/assets/icons/CalendarIcon"; +import ClockIcon from "@/app/assets/icons/ClockIcon"; +import LocationIcon from "@/app/assets/icons/LocationIcon"; +import InformationIcon from "@/app/assets/icons/InformationIcon"; +import React, { useState } from "react"; +import Link from "next/link"; +import { useRouter } from "next/navigation"; + +export default function Music800Event() { + const router = useRouter(); + + const handleGoBack = () => { + router.back(); + }; + const [activePill, setActivePill] = useState<"about" | "community">("about"); + + const handlePillClick = ( + pill: React.SetStateAction<"about" | "community"> + ) => { + setActivePill(pill); + }; + + const isEventEnded = false; + + const [showAdditionalText, setShowAdditionalText] = useState(false); + + const handleSeeAll = () => { + setShowAdditionalText(true); + }; + + const handleSeeLess = () => { + setShowAdditionalText(false); + }; + + const renderContent = () => { + switch (activePill) { + case "about": + return ( +
+
+
+ Mural Art Event photo + {isEventEnded && ( +
+

+ This event has ended. +

+
+ )} +
+ +
+
    +
  • + + + + + Nov, 11 (Sunday), 2023 +
  • +
  • + + + + 5 pm - 11 pm +
  • +
  • + + + + + The One Entertainment Park +
  • +
  • + + + + +

    + 808 Festival 2022, the 8th edition of annual EDM festival + in Bangkok, will be held from 9 – 11 December 2022 at + BITEC Bangna.   + {!showAdditionalText && ( + + ... See all + + )} + {showAdditionalText && ( + <> + + the esteemed venue for the 808 Festival 2022, + promises an electrifying atmosphere for EDM + enthusiasts. With its top-notch facilities and + spacious grounds, attendees can immerse themselves + in pulsating beats and vibrant energy. Get ready for + an unforgettable fusion of music, lights, and + excitement at this iconic location. + +   + + See less + + + )} +

    +
  • +
+
+
+ + + View Ticket + + +
+
+ ); + case "community": + return ( +
+
+

Community Comming Soon!

+

Stay Tuned!

+ +
+
+ ); + default: + return null; + } + }; + + return ( +
+
+
+ + + + + +

+ 808 Music Festival +

+
+ +
    +
  • + +
    +
  • +
  • + +
    +
  • +
+
+ {/* Render content based on active pill */} + {renderContent()} +
+
+ ); +} diff --git a/apps/app/app/event/including-events/808-music/view-ticket-2/buy-price-type-1/page.tsx b/apps/app/app/event/including-events/808-music/view-ticket-2/buy-price-type-1/page.tsx new file mode 100644 index 0000000..d057ffc --- /dev/null +++ b/apps/app/app/event/including-events/808-music/view-ticket-2/buy-price-type-1/page.tsx @@ -0,0 +1,216 @@ +"use client"; +import BackIcon from "@/app/assets/icons/BackIcon"; + +import SadReaction from "@/app/assets/images/sadReaction.png"; +import Link from "next/link"; +import React, { useState } from "react"; +import { + Alert, + AlertDescription, + AlertTitle, + Badge, + Checkbox, + Toggle, +} from "@breeze/ui"; +import { cn } from "@/utils"; +import Image from "next/image"; +import CancleIcon from "@/app/assets/icons/CancleIcon"; +import CancelWhiteIcon from "@/app/assets/icons/CancelWhiteIcon"; +import { useRouter } from "next/navigation"; +export default function BuyPriceType1() { + const router = useRouter(); + + const handleGoBack = () => { + router.back(); + }; + const userMoney = 0; // Assuming user has 250,000 units of currency + + const [selectedButtons, setSelectedButtons] = useState([]); + const [isChecked, setIsChecked] = useState(false); + const [showInsufficientFundsAlert, setShowInsufficientFundsAlert] = + useState(false); + + const handleCheckboxChange = () => { + setIsChecked(!isChecked); + }; + + const handleButtonClick = (buttonId: number) => { + if (!selectedButtons.includes(buttonId)) { + setSelectedButtons([buttonId]); + } else { + setSelectedButtons([]); + } + }; + + const handleBuyTicketClick = () => { + if (userMoney < 300000) { + setShowInsufficientFundsAlert(true); + } else { + // Proceed to the successful purchase page + window.location.href = "/event/including-events/808-music/buy-successful"; + } + }; + + const buttons = [ + { id: 1, label: "1", available: false }, + { id: 2, label: "2", available: true }, + { id: 3, label: "3", available: true }, + { id: 4, label: "4", available: false }, + { id: 5, label: "5", available: true }, + { id: 6, label: "6", available: false }, + { id: 7, label: "7", available: false }, + { id: 8, label: "8", available: false }, + { id: 9, label: "9", available: true }, + { id: 10, label: "10", available: true }, + { id: 11, label: "11", available: false }, + ]; + + return ( +
+ {showInsufficientFundsAlert && ( +
+
+ + +
+ + + +
+

+ Not enough money ! +

+ Cash-in to buy ticket. +
+
+
+
+
+ )} +
+
+
+ + + + + +

+ 808 Music Festival +

+
+
+
+ +
+

VIP

+

300,000

+
+
+
    +
  • + 6 Pax +
  • +
  • + 6 Beers +
  • +
  • + 2 Water Bottle +
  • +
+
+

+ Sales ends on{" "} + + Dec 14, 2023 + +

+
+
+ +
+
+ {isChecked && selectedButtons.length === 0 ? ( + <> +

Select your ticket

+ *select one* + + ) : ( +

Select your ticket

+ )} +
+
+
+
+ {buttons.map((button) => ( + + ))} +
+
+ +
+
+ +

+ I accept{" "} + + + breeze’s Terms and Conditions. + + + (Required) +

+
+ +
+
+

300,000

+ {isChecked && selectedButtons.length > 0 ? ( + + Buy Ticket + + ) : ( + + Buy Ticket + + )} +
+
+
+
+ ); +} diff --git a/apps/app/app/event/including-events/808-music/view-ticket-2/page.tsx b/apps/app/app/event/including-events/808-music/view-ticket-2/page.tsx new file mode 100644 index 0000000..6ac6b54 --- /dev/null +++ b/apps/app/app/event/including-events/808-music/view-ticket-2/page.tsx @@ -0,0 +1,184 @@ +"use client"; +import BackIcon from "@/app/assets/icons/BackIcon"; +import Link from "next/link"; +import React, { useState } from "react"; +import { Badge, Toggle } from "@breeze/ui"; +import { cn } from "@/utils"; +import { useRouter } from "next/navigation"; + +export default function ViewTicket2() { + const router = useRouter(); + + const handleGoBack = () => { + router.back(); + }; + + const [selectedToggle, setSelectedToggle] = useState<"GA" | "VIP" | "VVIP">( + null + ); + + const handleToggleChange = ( + toggle: React.SetStateAction<"GA" | "VIP" | "VVIP"> + ) => { + setSelectedToggle(toggle); + }; + + return ( +
+
+
+
+ + + + + +

+ 808 Music Festival +

+
+
+
+ handleToggleChange("GA")} + > +
+

GA

+

30,000

+
+
+

+ Sales ends on{" "} + + Dec 14, 2023 + +

+
+
+ + handleToggleChange("VIP")} + > +
+

VIP

+

300,000

+
+
+
    +
  • + 6 Pax +
  • +
  • + 6 Beers +
  • +
  • + 2 Water Bottle +
  • +
+
+

+ Sales ends on{" "} + + Dec 14, 2023 + +

+
+ + handleToggleChange("VVIP")} + > +
+

VVIP

+

400,000

+
+
+
    +
  • + 7 Pax +
  • +
  • + 7 Beers +
  • +
  • + 1 Potatoes +
  • +
  • + 2 Cokes +
  • +
  • + 2 Water Bottle +
  • +
+
+

+ Sales ends on{" "} + + Dec 14, 2023 + +

+
+
+
+ + + Next + + +
+
+
+ ); +} diff --git a/apps/app/app/event/including-events/808-music/view-ticket/buy-free/page.tsx b/apps/app/app/event/including-events/808-music/view-ticket/buy-free/page.tsx new file mode 100644 index 0000000..ac983d3 --- /dev/null +++ b/apps/app/app/event/including-events/808-music/view-ticket/buy-free/page.tsx @@ -0,0 +1,110 @@ +"use client"; +import BackIcon from "@/app/assets/icons/BackIcon"; +import Link from "next/link"; +import React, { useState } from "react"; +import { Badge, Checkbox, Toggle } from "@breeze/ui"; +import { useRouter } from "next/navigation"; + +export default function BuyFree() { + const router = useRouter(); + + const handleGoBack = () => { + router.back(); + }; + + const [isChecked, setIsChecked] = useState(false); + + const handleCheckboxChange = () => { + setIsChecked(!isChecked); + }; + + return ( +
+
+
+
+ + + + + +

+ 808 Music Festival +

+
+
+
+ +
+

GA

+

FREE

+
+
+
+ {/* +
    +
  • + 1 +
  • +
  • + 2 +
  • +
  • + 3 +
  • +
  • + 4 +
  • +
  • + 5 +
  • +
+ */} +

+ Sales ends on{" "} + + Dec 14, 2023 + +

+
+
+
+
+ +
+
+ +

+ I accept{" "} + + + breeze’s Terms and Conditions. + + + (Required) +

+
+ +
+
+

FREE

+ {isChecked ? ( + + + Buy Ticket + + + ) : ( + + Buy Ticket + + )} +
+
+
+
+ ); +} diff --git a/apps/app/app/event/including-events/808-music/view-ticket/page.tsx b/apps/app/app/event/including-events/808-music/view-ticket/page.tsx new file mode 100644 index 0000000..64aec6d --- /dev/null +++ b/apps/app/app/event/including-events/808-music/view-ticket/page.tsx @@ -0,0 +1,119 @@ +"use client"; +import BackIcon from "@/app/assets/icons/BackIcon"; +import Link from "next/link"; +import React, { useState } from "react"; +import { Badge, Toggle } from "@breeze/ui"; +import { cn } from "@/utils"; +import { useRouter } from "next/navigation"; + +export default function ViewTicket() { + const router = useRouter(); + + const handleGoBack = () => { + router.back(); + }; + + const [isToggleSelected, setIsToggleSelected] = useState(false); + + const handleToggleChange = () => { + console.log("Toggle clicked"); + setIsToggleSelected(!isToggleSelected); + }; + + return ( +
+
+
+
+ + + + + +

+ 808 Music Festival +

+
+
+
+ +
+

GA

+

FREE

+
+
+
+ {/* +
    +
  • + 1 +
  • +
  • + 2 +
  • +
  • + 3 +
  • +
  • + 4 +
  • +
  • + 5 +
  • +
+ */} +
+ +

+ Sales ends on{" "} + + Dec 14, 2023 + +

+
+
+
+
+ + + Next + + +
+
+
+ ); +} diff --git a/apps/app/app/event/including-events/mid-summer/page.tsx b/apps/app/app/event/including-events/mid-summer/page.tsx new file mode 100644 index 0000000..7b4589e --- /dev/null +++ b/apps/app/app/event/including-events/mid-summer/page.tsx @@ -0,0 +1,220 @@ +"use client"; +import BackIcon from "@/app/assets/icons/BackIcon"; +import { cn } from "@/utils"; +import { Badge, Button } from "@breeze/ui"; +import Image from "next/image"; +import MidSummer2 from "@/app/assets/images/midSummer2.svg"; +import CalendarIcon from "@/app/assets/icons/CalendarIcon"; +import ClockIcon from "@/app/assets/icons/ClockIcon"; +import LocationIcon from "@/app/assets/icons/LocationIcon"; +import InformationIcon from "@/app/assets/icons/InformationIcon"; +import React, { useState } from "react"; +import Link from "next/link"; +import { useRouter } from "next/navigation"; + +export default function MidSummerEvent() { + const router = useRouter(); + + const handleGoBack = () => { + router.back(); + }; + const [activePill, setActivePill] = useState<"about" | "community">("about"); + + const handlePillClick = ( + pill: React.SetStateAction<"about" | "community"> + ) => { + setActivePill(pill); + }; + const isEventEnded = false; + + const [showAdditionalText, setShowAdditionalText] = useState(false); + + const handleSeeAll = () => { + setShowAdditionalText(true); + }; + + const handleSeeLess = () => { + setShowAdditionalText(false); + }; + + const renderContent = () => { + switch (activePill) { + case "about": + return ( +
+
+
+ Mural Art Event photo + {isEventEnded && ( +
+

+ This event has ended. +

+
+ )} +
+ +
+
    +
  • + + + + + May, 28 (Thursday), 2023 +
  • +
  • + + + + + 10 am - 2 pm +
  • +
  • + + + + + Myanmar Ahla Gallery +
  • +
  • + + + + +

    + This is a brief description about Mural Art Festival. If + you want to know more about this festival, you can check + that out here by tapping   + {!showAdditionalText && ( + + ... See all + + )} + {showAdditionalText && ( + <> + + this link. The Mural Art Festival is an annual + celebration of creativity, culture, and community. + Spanning several days, it brings together talented + artists from around the world to transform blank + walls into vibrant works of art. From stunning + portraits to abstract designs, the festival + showcases a diverse range of styles and techniques. + Visitors can wander through the streets, taking in + the colorful murals and experiencing the energy of + live art creation. In addition to the main mural + installations, the festival often features + workshops, performances, and interactive exhibits, + making it an immersive experience for art lovers of + all ages. Whether you're a seasoned art enthusiast + or just looking for something unique to explore, the + Mural Art Festival offers a dynamic blend of + inspiration and entertainment. Don't miss out on + this opportunity to witness the power of art to + transform spaces and bring communities together. Tap + the link to dive deeper into the world of the Mural + Art Festival and discover everything it has to + offer! + +   + + See less + + + )} +

    +
  • +
+
+
+ + + My e-ticket + + +
+
+ ); + case "community": + return ( +
+
+

Community Comming Soon!

+

Stay Tuned!

+ +
+
+ ); + default: + return null; + } + }; + + return ( +
+
+
+ + + + + +

+ Mural Festival +

+
+ +
    +
  • + +
    +
  • +
  • + +
    +
  • +
+
+ {/* Render content based on active pill */} + {renderContent()} +
+
+ ); +} diff --git a/apps/app/app/event/including-events/mural-art/page.tsx b/apps/app/app/event/including-events/mural-art/page.tsx new file mode 100644 index 0000000..53f2d3b --- /dev/null +++ b/apps/app/app/event/including-events/mural-art/page.tsx @@ -0,0 +1,221 @@ +"use client"; +import BackIcon from "@/app/assets/icons/BackIcon"; +import { cn } from "@/utils"; +import { Badge, Button } from "@breeze/ui"; +import Image from "next/image"; +import MuralArt from "@/app/assets/images/muralArtFestival.svg"; +import CalendarIcon from "@/app/assets/icons/CalendarIcon"; +import ClockIcon from "@/app/assets/icons/ClockIcon"; +import LocationIcon from "@/app/assets/icons/LocationIcon"; +import InformationIcon from "@/app/assets/icons/InformationIcon"; +import React, { useState } from "react"; +import Link from "next/link"; +import { useRouter } from "next/navigation"; + +export default function MuralArtEvent() { + const router = useRouter(); + + const handleGoBack = () => { + router.back(); + }; + const [activePill, setActivePill] = useState<"about" | "community">("about"); + + const handlePillClick = ( + pill: React.SetStateAction<"about" | "community"> + ) => { + setActivePill(pill); + }; + + const isEventEnded = true; + + const [showAdditionalText, setShowAdditionalText] = useState(false); + + const handleSeeAll = () => { + setShowAdditionalText(true); + }; + + const handleSeeLess = () => { + setShowAdditionalText(false); + }; + + const renderContent = () => { + switch (activePill) { + case "about": + return ( +
+
+
+ Mural Art Event photo + {isEventEnded && ( +
+

+ This event has ended. +

+
+ )} +
+ +
+
    +
  • + + + + + May, 28 (Thursday), 2023 +
  • +
  • + + + + + 10 am - 2 pm +
  • +
  • + + + + + Myanmar Ahla Gallery +
  • +
  • + + + + +

    + This is a brief description about Mural Art Festival. If + you want to know more about this festival, you can check + that out here by tapping   + {!showAdditionalText && ( + + ... See all + + )} + {showAdditionalText && ( + <> + + this link. The Mural Art Festival is an annual + celebration of creativity, culture, and community. + Spanning several days, it brings together talented + artists from around the world to transform blank + walls into vibrant works of art. From stunning + portraits to abstract designs, the festival + showcases a diverse range of styles and techniques. + Visitors can wander through the streets, taking in + the colorful murals and experiencing the energy of + live art creation. In addition to the main mural + installations, the festival often features + workshops, performances, and interactive exhibits, + making it an immersive experience for art lovers of + all ages. Whether you're a seasoned art enthusiast + or just looking for something unique to explore, the + Mural Art Festival offers a dynamic blend of + inspiration and entertainment. Don't miss out on + this opportunity to witness the power of art to + transform spaces and bring communities together. Tap + the link to dive deeper into the world of the Mural + Art Festival and discover everything it has to + offer! + +   + + See less + + + )} +

    +
  • +
+
+
+ + + Go to Dashboard + + +
+
+ ); + case "community": + return ( +
+
+

Community Comming Soon!

+

Stay Tuned!

+ +
+
+ ); + default: + return null; + } + }; + + return ( +
+
+
+ + + + + +

+ Mural Festival +

+
+ +
    +
  • + +
    +
  • +
  • + +
    +
  • +
+
+ {/* Render content based on active pill */} + {renderContent()} +
+
+ ); +} diff --git a/apps/app/app/event/including-events/page.tsx b/apps/app/app/event/including-events/page.tsx new file mode 100644 index 0000000..d4c2b74 --- /dev/null +++ b/apps/app/app/event/including-events/page.tsx @@ -0,0 +1,375 @@ +"use client"; +import React, { useState } from "react"; +import Image from "next/image"; +import { AspectRatio, Badge, Button } from "@breeze/ui"; +import MidSummer from "@/app/assets/images/midSummer.jpg"; +import MidSummer2 from "@/app/assets/images/midSummer2.svg"; +import MuralArt from "@/app/assets/images/muralArtFestival.svg"; +import Link from "next/link"; +import SongKran from "@/app/assets/images/songKran.svg"; +import FireWorkShow from "@/app/assets/images/fireworkShow.svg"; +import { cn } from "@/utils"; + +export default function EventHavingPage() { + const [activePill, setActivePill] = useState< + "launched" | "upcoming" | "joined" | "saved" + >("launched"); + + const handlePillClick = ( + pill: React.SetStateAction<"launched" | "upcoming" | "joined" | "saved"> + ) => { + setActivePill(pill); + }; + + const renderContent = () => { + switch (activePill) { + case "launched": + return ( +
+ {/* for may 2023*/} +
+

+ May, 2023 +

+ +
+
+
+ + Mid Summer Event photo + +
+
+

+ Mid Summer +

+

25 May (Tue)

+
+
+
+ +
+ +
+
+
+ + Mural Art Event photo + +
+
+

+ Mural Art Festival +

+

28 May (Thur)

+
+
+
+
+
+ + {/* for April 2023*/} +
+

+ April, 2023 +

+ +
+
+
+ + Song Kran Event photo + +
+
+

Songkran

+

+ 13 April (Mon) +

+
+
+
+ +
+ +
+
+
+ + FirwWrok show photo + +
+
+

+ FireWork Show +

+

+ 11 April (Thur) +

+
+
+
+ +
+
+
+ ); + + case "upcoming": + return ( +
+
+

No upcoming events?

+

Join now and let the fun begin!

+ + +
+
+ ); + case "joined": + return ( +
+ {/* for may 2023*/} +
+

+ May, 2023 +

+ +
+
+
+ + Mid Summer Event photo + +
+
+

+ Mid Summer +

+

25 May (Tue)

+
+
+
+ +
+ +
+
+
+ + Mural Art Event photo + +
+
+

+ Mural Art Festival +

+

28 May (Thur)

+
+
+
+
+
+ + {/* for April 2023*/} +
+

+ April, 2023 +

+ +
+
+
+ + Song Kran Event photo + +
+
+

Songkran

+

+ 13 April (Mon) +

+
+
+
+ +
+ +
+
+
+ + FirwWrok show photo + +
+
+

+ FireWork Show +

+

+ 11 April (Thur) +

+
+
+
+ +
+
+
+ ); + case "saved": + return ( +
+
+

No events saved yet.

+

Any plans in mind? Let's fill it up!

+ + + + +
+
+ ); + default: + return null; + } + }; + return ( + <> +
+

My Wallet

+ + + 0.00 + + + + +
+

My Event

+ + + Launch Event + + +
+ +
+
    +
  • + +
    +
  • +
  • + +
    +
  • +
  • + +
    +
  • +
  • + +
    +
  • +
+
+ {/* Render content based on active pill */} + {renderContent()} +
+
+ + ); +} diff --git a/apps/app/app/event/including-events/song-kran/page.tsx b/apps/app/app/event/including-events/song-kran/page.tsx new file mode 100644 index 0000000..c1b0986 --- /dev/null +++ b/apps/app/app/event/including-events/song-kran/page.tsx @@ -0,0 +1,201 @@ +"use client"; +import BackIcon from "@/app/assets/icons/BackIcon"; +import { cn } from "@/utils"; +import { Badge, Button } from "@breeze/ui"; +import Image from "next/image"; +import Songkran from "@/app/assets/images/songKran.svg"; +import CalendarIcon from "@/app/assets/icons/CalendarIcon"; +import ClockIcon from "@/app/assets/icons/ClockIcon"; +import LocationIcon from "@/app/assets/icons/LocationIcon"; +import InformationIcon from "@/app/assets/icons/InformationIcon"; +import React, { useState } from "react"; +import Link from "next/link"; +import { useRouter } from "next/navigation"; + +export default function SongkranEvent() { + const router = useRouter(); + + const handleGoBack = () => { + router.back(); + }; + const [activePill, setActivePill] = useState<"about" | "community">("about"); + + const handlePillClick = ( + pill: React.SetStateAction<"about" | "community"> + ) => { + setActivePill(pill); + }; + + const isEventEnded = true; + + const [showAdditionalText, setShowAdditionalText] = useState(false); + + const handleSeeAll = () => { + setShowAdditionalText(true); + }; + + const handleSeeLess = () => { + setShowAdditionalText(false); + }; + + const renderContent = () => { + switch (activePill) { + case "about": + return ( +
+
+
+ Mural Art Event photo + {isEventEnded && ( +
+

+ This event has ended. +

+
+ )} +
+ +
+
    +
  • + + + + + Apr, 13 (Monday), 2023 +
  • +
  • + + + + 6 am - 6 pm +
  • +
  • + + + + + Thailand +
  • +
  • + + + + +

    + Thai New Year or Songkran is the Thai New Year's national + holiday. Songkran is on 13 April every year, but the + holiday period   + {!showAdditionalText && ( + + ... See all + + )} + {showAdditionalText && ( + <> + + teems with an abundance of activities, traditions, + and celebrations that extend for several days before + and after the official date. + +   + + See less + + + )} +

    +
  • +
+
+
+ + + Go to Dashboard + + +
+
+ ); + case "community": + return ( +
+
+

Community Comming Soon!

+

Stay Tuned!

+ +
+
+ ); + default: + return null; + } + }; + + return ( +
+
+
+ + + + + +

+ Mural Festival +

+
+ +
    +
  • + +
    +
  • +
  • + +
    +
  • +
+
+ {/* Render content based on active pill */} + {renderContent()} +
+
+ ); +} diff --git a/apps/app/app/event/page.tsx b/apps/app/app/event/page.tsx new file mode 100644 index 0000000..8050001 --- /dev/null +++ b/apps/app/app/event/page.tsx @@ -0,0 +1,182 @@ +"use client"; +import React, { useState } from "react"; +import { Badge, Button } from "@breeze/ui"; +import Link from "next/link"; +import { cn } from "@/utils"; + +export default function Event() { + const [activePill, setActivePill] = useState< + "launched" | "upcoming" | "joined" | "saved" + >("launched"); + + const handlePillClick = ( + pill: React.SetStateAction<"launched" | "upcoming" | "joined" | "saved"> + ) => { + setActivePill(pill); + }; + + const renderContent = () => { + switch (activePill) { + case "launched": + return ( +
+
+

‘ Zero ’ events launched.

+

Launch your event right away!

+ + + +
+
+ ); + + case "upcoming": + return ( +
+
+

No upcoming events?

+

Join now and let the fun begin!

+ + +
+
+ ); + case "joined": + return ( +
+
+

Create memories!

+

Join an event now and start the adventure!

+ +
+
+ ); + case "saved": + return ( +
+
+

No events saved yet.

+

Any plans in mind? Let's fill it up!

+ + + + +
+
+ ); + default: + return null; + } + }; + return ( + <> +
+

My Wallet

+ + + 0.00 + + + + +
+

My Event

+ + + Launch Event + + +
+ +
+
    +
  • + +
    +
  • +
  • + +
    +
  • +
  • + +
    +
  • +
  • + +
    +
  • +
+
+ {/* Render content based on active pill */} + {renderContent()} +
+
+ + ); +} diff --git a/apps/app/app/layout.tsx b/apps/app/app/layout.tsx index f48add6..2ae198e 100644 --- a/apps/app/app/layout.tsx +++ b/apps/app/app/layout.tsx @@ -3,6 +3,7 @@ import { Inter } from "next/font/google"; import "@breeze/ui/globals.css"; import "./globals.css"; import NavBar from "@/components/NavBar"; +import TimelineFooter from "@/components/TimeLineFooter"; const inter = Inter({ subsets: ["latin"] }); diff --git a/apps/app/app/page.tsx b/apps/app/app/page.tsx index 1c9966a..5aa8b69 100644 --- a/apps/app/app/page.tsx +++ b/apps/app/app/page.tsx @@ -2,10 +2,10 @@ import FeedScreen from "@/app/components/FeedScreen"; import React from "react"; export default function Home() { - return ( -
- -
hey
-
- ); + return ( +
+ +
hey
+
+ ); } diff --git a/apps/app/tailwind.config.ts b/apps/app/tailwind.config.ts index f79f573..119cbe9 100644 --- a/apps/app/tailwind.config.ts +++ b/apps/app/tailwind.config.ts @@ -27,6 +27,18 @@ const config: Config = { 7: "#0077CC", }, white: "#FFFFFF", + black: { + 1: "#191A1A", + }, + lightgray: "rgb(211,211,211)", + darkgray: "#646668", + alertred: "#E51A2B", + bulletgray: "#646668", + softlightgray: "#E5E6E6", + availablegreen: "#6DB24D", + commingorange: "#EB8C47", + soldoutgray: "#97999B", + savedgreen: "#6DB24D", }, extend: { backgroundImage: { diff --git a/bun.lockb b/bun.lockb index 6db898e..8ed23f8 100755 Binary files a/bun.lockb and b/bun.lockb differ diff --git a/packages/ui/package.json b/packages/ui/package.json index 8e4810f..e80aa49 100644 --- a/packages/ui/package.json +++ b/packages/ui/package.json @@ -1,80 +1,83 @@ { - "name": "@breeze/ui", - "version": "0.0.0", - "private": true, - "scripts": { - "lint": "eslint . --max-warnings 0", - "generate:component": "turbo gen react-component" - }, - "dependencies": { - "@hookform/resolvers": "^3.3.4", - "@radix-ui/react-accordion": "^1.1.2", - "@radix-ui/react-alert-dialog": "^1.0.5", - "@radix-ui/react-aspect-ratio": "^1.0.3", - "@radix-ui/react-avatar": "^1.0.4", - "@radix-ui/react-checkbox": "^1.0.4", - "@radix-ui/react-collapsible": "^1.0.3", - "@radix-ui/react-context-menu": "^2.1.5", - "@radix-ui/react-dialog": "^1.0.5", - "@radix-ui/react-dropdown-menu": "^2.0.6", - "@radix-ui/react-icons": "^1.3.0", - "@radix-ui/react-label": "^2.0.2", - "@radix-ui/react-popover": "^1.0.7", - "@radix-ui/react-progress": "^1.0.3", - "@radix-ui/react-slot": "^1.0.2", - "@radix-ui/react-switch": "^1.0.3", - "class-variance-authority": "^0.7.0", - "clsx": "^2.1.0", - "cmdk": "^0.2.1", - "date-fns": "^3.3.1", - "embla-carousel-react": "^8.0.0", - "lucide-react": "^0.343.0", - "react-day-picker": "^8.10.0", - "react-hook-form": "^7.50.1", - "tailwind-merge": "^2.2.1", - "tailwindcss-animate": "^1.0.7", - "vaul": "^0.9.0", - "zod": "^3.22.4", - "@reach/dialog": "^0.18.0" - }, - "devDependencies": { - "@repo/eslint-config": "*", - "@repo/typescript-config": "*", - "@turbo/gen": "^1.12.4", - "@types/node": "^20.11.24", - "@types/eslint": "^8.56.5", - "@types/react": "^18.2.61", - "@types/react-dom": "^18.2.19", - "eslint": "^8.57.0", - "react": "^18.2.0", - "typescript": "^5.3.3" - }, - "main": "src/index.ts", - "exports": { - "./globals.css": "./src/globals.css", - ".": "./src/index.ts", - "./button": "./src/button.tsx", - "./card": "./src/card.tsx", - "./dialog": "./src/dialog.tsx", - "./drawer": "./src/drawer.tsx", - "./dropdown": "./src/dropdown.tsx", - "./form": "./src/form.tsx", - "./profileForm": "./src/profileForm.tsx", - "./input": "./src/input.tsx", - "./datepicker": "./src/datePicker.tsx", - "./dropdown-menu": "./src/dropdown-menu.tsx", - "./accordion": "./src/accordion.tsx", - "./alert-dialog": "./src/alert-dialog.tsx", - "./aspect-ratio": "./src/aspect-ratio.tsx", - "./avator": "./src/avator.tsx", - "./badge": "./src/badge.tsx", - "./collapsible": "./src/collapsible.tsx", - "./command": "./src/command.tsx", - "./popover": "./src/popover.tsx", - "./contextmenu": "./src/contextmenu.tsx", - "./carousel": "./src/carousel.tsx", - "./breadcrumb": "./src/breadcrumb.tsx", - "./table": "./src/table.tsx", - "./switch": "./src/switch.tsx" - } + "name": "@breeze/ui", + "version": "0.0.0", + "private": true, + "scripts": { + "lint": "eslint . --max-warnings 0", + "generate:component": "turbo gen react-component" + }, + "dependencies": { + "@hookform/resolvers": "^3.3.4", + "@radix-ui/react-accordion": "^1.1.2", + "@radix-ui/react-alert-dialog": "^1.0.5", + "@radix-ui/react-aspect-ratio": "^1.0.3", + "@radix-ui/react-avatar": "^1.0.4", + "@radix-ui/react-checkbox": "^1.0.4", + "@radix-ui/react-collapsible": "^1.0.3", + "@radix-ui/react-context-menu": "^2.1.5", + "@radix-ui/react-dialog": "^1.0.5", + "@radix-ui/react-dropdown-menu": "^2.0.6", + "@radix-ui/react-icons": "^1.3.0", + "@radix-ui/react-label": "^2.0.2", + "@radix-ui/react-popover": "^1.0.7", + "@radix-ui/react-progress": "^1.0.3", + "@radix-ui/react-slot": "^1.0.2", + "@radix-ui/react-switch": "^1.0.3", + "@radix-ui/react-toggle": "^1.0.3", + "@reach/dialog": "^0.18.0", + "class-variance-authority": "^0.7.0", + "clsx": "^2.1.0", + "cmdk": "^0.2.1", + "date-fns": "^3.3.1", + "embla-carousel-react": "^8.0.0", + "lucide-react": "^0.343.0", + "react-day-picker": "^8.10.0", + "react-hook-form": "^7.50.1", + "tailwind-merge": "^2.2.1", + "tailwindcss-animate": "^1.0.7", + "vaul": "^0.9.0", + "zod": "^3.22.4" + }, + "devDependencies": { + "@repo/eslint-config": "*", + "@repo/typescript-config": "*", + "@turbo/gen": "^1.12.4", + "@types/node": "^20.11.24", + "@types/eslint": "^8.56.5", + "@types/react": "^18.2.61", + "@types/react-dom": "^18.2.19", + "eslint": "^8.57.0", + "react": "^18.2.0", + "typescript": "^5.3.3" + }, + "main": "src/index.ts", + "exports": { + "./globals.css": "./src/globals.css", + ".": "./src/index.ts", + "./button": "./src/button.tsx", + "./card": "./src/card.tsx", + "./dialog": "./src/dialog.tsx", + "./drawer": "./src/drawer.tsx", + "./dropdown": "./src/dropdown.tsx", + "./form": "./src/form.tsx", + "./profileForm": "./src/profileForm.tsx", + "./input": "./src/input.tsx", + "./datepicker": "./src/datePicker.tsx", + "./dropdown-menu": "./src/dropdown-menu.tsx", + "./accordion": "./src/accordion.tsx", + "./alert-dialog": "./src/alert-dialog.tsx", + "./aspect-ratio": "./src/aspect-ratio.tsx", + "./avator": "./src/avator.tsx", + "./badge": "./src/badge.tsx", + "./collapsible": "./src/collapsible.tsx", + "./command": "./src/command.tsx", + "./popover": "./src/popover.tsx", + "./contextmenu": "./src/contextmenu.tsx", + "./carousel": "./src/carousel.tsx", + "./breadcrumb": "./src/breadcrumb.tsx", + "./table": "./src/table.tsx", + "./switch": "./src/switch.tsx", + "./toggle": "./src/toggle.tsx", + "./alert": "./src/alert.tsx" + } } diff --git a/packages/ui/src/alert.tsx b/packages/ui/src/alert.tsx new file mode 100644 index 0000000..bd7c2a9 --- /dev/null +++ b/packages/ui/src/alert.tsx @@ -0,0 +1,59 @@ +import * as React from "react"; +import { cva, type VariantProps } from "class-variance-authority"; + +import { cn } from "./utils/cn"; + +const alertVariants = cva( + "relative w-full rounded-lg border px-4 py-3 text-sm [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground [&>svg~*]:pl-7", + { + variants: { + variant: { + default: "bg-background text-foreground", + destructive: + "border-destructive/50 text-destructive dark:border-destructive [&>svg]:text-destructive", + }, + }, + defaultVariants: { + variant: "default", + }, + }, +); + +const Alert = React.forwardRef< + HTMLDivElement, + React.HTMLAttributes & VariantProps +>(({ className, variant, ...props }, ref) => ( +
+)); +Alert.displayName = "Alert"; + +const AlertTitle = React.forwardRef< + HTMLParagraphElement, + React.HTMLAttributes +>(({ className, ...props }, ref) => ( +
+)); +AlertTitle.displayName = "AlertTitle"; + +const AlertDescription = React.forwardRef< + HTMLParagraphElement, + React.HTMLAttributes +>(({ className, ...props }, ref) => ( +
+)); +AlertDescription.displayName = "AlertDescription"; + +export { Alert, AlertTitle, AlertDescription }; diff --git a/packages/ui/src/index.ts b/packages/ui/src/index.ts index 1340da5..74efa13 100644 --- a/packages/ui/src/index.ts +++ b/packages/ui/src/index.ts @@ -27,3 +27,5 @@ export * from "./progress"; export * from "./breadcrumb"; export * from "./table"; export * from "./switch"; +export * from "./toggle"; +export * from "./alert"; diff --git a/packages/ui/src/toggle.tsx b/packages/ui/src/toggle.tsx new file mode 100644 index 0000000..5d6fd6f --- /dev/null +++ b/packages/ui/src/toggle.tsx @@ -0,0 +1,43 @@ +import React from "react"; +import * as TogglePrimitive from "@radix-ui/react-toggle"; +import { cva, type VariantProps } from "class-variance-authority"; + +import { cn } from "./utils/cn"; + +const toggleVariants = cva( + "inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors hover:bg-muted hover:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground", + { + variants: { + variant: { + default: "bg-transparent ", + outline: + "border border-input bg-transparent shadow-sm hover:bg-accent hover:text-accent-foreground", + }, + size: { + default: "h-9 px-3", + sm: "h-8 px-2", + lg: "h-10 px-3", + }, + }, + defaultVariants: { + variant: "default", + size: "default", + }, + }, +); + +const Toggle = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef & + VariantProps +>(({ className, variant, size, ...props }, ref) => ( + +)); + +Toggle.displayName = TogglePrimitive.Root.displayName; + +export { Toggle, toggleVariants };