From a011e95789adf95a55c1b94351e4dd2766b2846e Mon Sep 17 00:00:00 2001 From: "Iliya.Faz" <71210624+Humboorgir@users.noreply.github.com> Date: Wed, 5 Mar 2025 07:17:50 +0330 Subject: [PATCH 1/7] docs(pricing-component): fix typo (#399) --- content/docs/section/pricing.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/section/pricing.mdx b/content/docs/section/pricing.mdx index 20aa0532..e063f920 100644 --- a/content/docs/section/pricing.mdx +++ b/content/docs/section/pricing.mdx @@ -1,6 +1,6 @@ --- title: Pricing -description: Pricing component that display the pricing options of various plans in an sleek and interactive way +description: Pricing component that displays the pricing options of various plans in a sleek and interactive way author: SatyamVyas04 --- From 184eb9f0c794744e76786440e8890a9fdd251123 Mon Sep 17 00:00:00 2001 From: Kayondo Edward <46356108+amkayondo@users.noreply.github.com> Date: Wed, 5 Mar 2025 06:48:01 +0300 Subject: [PATCH 2/7] Update marquee.mdx (#398) --- content/docs/container/marquee.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/container/marquee.mdx b/content/docs/container/marquee.mdx index baf8ef75..750789a8 100644 --- a/content/docs/container/marquee.mdx +++ b/content/docs/container/marquee.mdx @@ -24,7 +24,7 @@ theme: { from: { transform: "translateY(0)" }, to: { transform: "translateY(calc(-100% - var(--gap)))" }, }, - } + }, animation: { "marquee-horizontal": "marquee-x var(--duration) infinite linear", "marquee-vertical": "marquee-y var(--duration) linear infinite", From 1180dc4b69f5548e222a1b777360be6cb6d02c94 Mon Sep 17 00:00:00 2001 From: Anshuman Date: Wed, 5 Mar 2025 09:46:22 +0530 Subject: [PATCH 3/7] Calendar widget (issue #321) (#390) Co-authored-by: anshuman --- animata/widget/calendar-widget.stories.tsx | 47 +++++++ animata/widget/calendar-widget.tsx | 154 +++++++++++++++++++++ content/docs/widget/calendar-widget.mdx | 38 +++++ 3 files changed, 239 insertions(+) create mode 100644 animata/widget/calendar-widget.stories.tsx create mode 100644 animata/widget/calendar-widget.tsx create mode 100644 content/docs/widget/calendar-widget.mdx diff --git a/animata/widget/calendar-widget.stories.tsx b/animata/widget/calendar-widget.stories.tsx new file mode 100644 index 00000000..2010e17b --- /dev/null +++ b/animata/widget/calendar-widget.stories.tsx @@ -0,0 +1,47 @@ +import CalendarWidget from "@/animata/widget/calendar-widget"; +import { Meta, StoryObj } from "@storybook/react"; + +const meta = { + title: "Widget/Calendar Widget", + component: CalendarWidget, + parameters: { + layout: "centered", + }, + tags: ["autodocs"], + argTypes: { + initialSelectedDate: { + control: { type: "number", min: 1, max: 30 }, + defaultValue: 1, + }, + initialShowEvents: { + control: { type: "boolean" }, + defaultValue: true, + }, + eventsData: { + control: { type: "object" }, + defaultValue: [ + { date: 3, title: "Project Review", time: "10:00 - 11:00 AM" }, + { date: 5, title: "Client Meeting", time: "9:00 - 9:45 AM" }, + { date: 18, title: "Walk", time: "6:00 - 7:00 AM" }, + ], + }, + }, +} satisfies Meta; + +export default meta; +type Story = StoryObj; + +export const Primary: Story = { + args: { + initialSelectedDate: 1, + initialShowEvents: true, + eventsData: [ + { date: 3, title: "Project Review", time: "10:00 - 11:00 AM" }, + { date: 3, title: "Project discussion", time: "11:00 - 12:00 AM" }, + { date: 5, title: "Client Meeting", time: "9:00 - 9:45 AM" }, + { date: 18, title: "Walk", time: "6:00 - 7:00 AM" }, + ], + month: 3, + year: 2023, + }, +}; diff --git a/animata/widget/calendar-widget.tsx b/animata/widget/calendar-widget.tsx new file mode 100644 index 00000000..bc53ff03 --- /dev/null +++ b/animata/widget/calendar-widget.tsx @@ -0,0 +1,154 @@ +import React, { useEffect, useRef, useState } from "react"; +import { AnimatePresence, motion } from "framer-motion"; +import { Calendar as CalendarIcon, DotIcon } from "lucide-react"; + +const monthArray = [ + "", + "January", + "February", + "March", + "April", + "May", + "June", + "July", + "August", + "September", + "October", + "November", + "December", +]; + +interface EventType { + date: number; + title: string; + time: string; +} + +export default function CalendarWidget({ + initialSelectedDate = 1, + initialShowEvents = true, + eventsData = [], + month = 1, + year = new Date().getFullYear(), +}: { + initialSelectedDate?: number; + initialShowEvents?: boolean; + eventsData?: EventType[]; + month?: number; + year?: number; +}) { + const [selectedDate, setSelectedDate] = useState(initialSelectedDate); + const [showEvents, setShowEvents] = useState(initialShowEvents); + const scrollRef = useRef(null); + + const dates = Array.from({ length: 30 }, (_, i) => i + 1); + const daySymbols = ["S", "M", "T", "W", "T", "F", "S"]; + + const filteredEvents = eventsData.filter((event: EventType) => event.date === selectedDate); + + useEffect(() => { + if (scrollRef.current) { + const selectedElement = scrollRef.current.querySelector(`[data-date="${selectedDate}"]`); + if (selectedElement) { + selectedElement.scrollIntoView({ behavior: "smooth", inline: "center", block: "nearest" }); + } + } + }, [selectedDate]); + + return ( + +
+

{`${monthArray[month]} ${year}`}

+
+ {dates.map((date, index) => ( + { + setSelectedDate(date); + setShowEvents(true); + }} + whileHover={{ scale: 1.05 }} + whileTap={{ scale: 0.95 }} + > + {daySymbols[(index + 4) % 7]} + + {selectedDate === date ? ( + + {date} + + ) : ( + {date} + )} + + + {eventsData.find((alldates: EventType) => alldates.date === date) ? ( + + ) : ( + "" + )} + + + ))} +
+
+ +
+ + {showEvents && ( + + {filteredEvents.length > 0 ? ( + filteredEvents.map((event: EventType, index: number) => ( + +

{event.title}

+

{event.time}

+ + )) + ) : ( + + +

No Events

+ + )} + + )} + +
+ + ); +} diff --git a/content/docs/widget/calendar-widget.mdx b/content/docs/widget/calendar-widget.mdx new file mode 100644 index 00000000..f2efdaeb --- /dev/null +++ b/content/docs/widget/calendar-widget.mdx @@ -0,0 +1,38 @@ +--- +title: Calendar Widget +description: calendar widget is calender like widget with smooth animations and cool effects +author: anshu_code +--- + + + +## Installation + + +Install dependencies + +```bash +npm install framer-motion lucide-react +``` + +Run the following command + +It will create a new file `calendar-widget.tsx` inside the `components/animata/widget` directory. + +```bash +mkdir -p components/animata/widget && touch components/animata/widget/calendar-widget.tsx +``` + +Paste the code{" "} + +Open the newly created file and paste the following code: + +```jsx file=/animata/widget/calendar-widget.tsx + +``` + + + +## Credits + +Built by [Anshuman](https://github.com/anshuman008) From 569a37f6ef8330523663dd5b952128c5eb0a3a6b Mon Sep 17 00:00:00 2001 From: Hari Lamichhane Date: Tue, 11 Mar 2025 15:50:49 +0545 Subject: [PATCH 4/7] feat: use plunk for email sub (#402) --- hooks/use-newsletter-subscription.ts | 33 ++++++++++++++++------------ 1 file changed, 19 insertions(+), 14 deletions(-) diff --git a/hooks/use-newsletter-subscription.ts b/hooks/use-newsletter-subscription.ts index d444d2c1..40e46b51 100644 --- a/hooks/use-newsletter-subscription.ts +++ b/hooks/use-newsletter-subscription.ts @@ -1,8 +1,8 @@ "use client"; import { useState } from "react"; -const url = process.env.NEXT_PUBLIC_SUPABASE_URL + "/rest/v1/prelaunch_subscribers"; -const apiKey = process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY; +const plunkApiUrl = "https://api.useplunk.com/v1/track"; +const plunkApiKey = process.env.NEXT_PUBLIC_PLUNK_API_KEY; export default function useNewsletterSubscription() { const initialState = { @@ -29,20 +29,25 @@ export default function useNewsletterSubscription() { } setState({ ...state, isLoading: true }); - const data = { email: state.email }; - try { - const response = await fetch(url, { - method: "POST", - // @ts-expect-error - Types for custom headers are not defined in fetch types - headers: { - apikey: apiKey, - Authorization: "Bearer " + apiKey, - "Content-Type": "application/json", - Prefer: "return=minimal", + const options = { + method: "POST", + headers: { + "Content-Type": "application/json", + Authorization: `Bearer ${plunkApiKey}`, + }, + body: JSON.stringify({ + event: "newsletter_subscription", + email: state.email, + subscribed: true, + data: { + project_id: "animata", }, - body: JSON.stringify(data), - }); + }), + }; + + try { + const response = await fetch(plunkApiUrl, options); if (response.status >= 200 && response.status < 300) { // Email added successfully From 033fada62195ca0c5457a98db2c26bd65f37be25 Mon Sep 17 00:00:00 2001 From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com> Date: Tue, 11 Mar 2025 16:06:28 +0545 Subject: [PATCH 5/7] chore(deps): bump elliptic from 6.5.7 to 6.6.1 in the npm_and_yarn group across 1 directory (#397) Signed-off-by: dependabot[bot] Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> --- yarn.lock | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/yarn.lock b/yarn.lock index 9568d9ec..a3eedf5f 100644 --- a/yarn.lock +++ b/yarn.lock @@ -9414,8 +9414,8 @@ __metadata: linkType: hard "elliptic@npm:^6.5.3, elliptic@npm:^6.5.5": - version: 6.5.7 - resolution: "elliptic@npm:6.5.7" + version: 6.6.1 + resolution: "elliptic@npm:6.6.1" dependencies: bn.js: "npm:^4.11.9" brorand: "npm:^1.1.0" @@ -9424,7 +9424,7 @@ __metadata: inherits: "npm:^2.0.4" minimalistic-assert: "npm:^1.0.1" minimalistic-crypto-utils: "npm:^1.0.1" - checksum: 10c0/799959b6c54ea3564e8961f35abdf8c77e37617f3051614b05ab1fb6a04ddb65bd1caa75ed1bae375b15dda312a0f79fed26ebe76ecf05c5a7af244152a601b8 + checksum: 10c0/8b24ef782eec8b472053793ea1e91ae6bee41afffdfcb78a81c0a53b191e715cbe1292aa07165958a9bbe675bd0955142560b1a007ffce7d6c765bcaf951a867 languageName: node linkType: hard From 4dd00fe4fc12edaea2120a9ac0ae19f1df71c58a Mon Sep 17 00:00:00 2001 From: Daniel Crump <42187710+dancrump1@users.noreply.github.com> Date: Tue, 11 Mar 2025 06:21:59 -0400 Subject: [PATCH 6/7] Add missing instructions to moving-gradient documentation (#401) --- content/docs/background/moving-gradient.mdx | 3 +++ 1 file changed, 3 insertions(+) diff --git a/content/docs/background/moving-gradient.mdx b/content/docs/background/moving-gradient.mdx index ac798d95..c02a44f5 100644 --- a/content/docs/background/moving-gradient.mdx +++ b/content/docs/background/moving-gradient.mdx @@ -15,6 +15,9 @@ author: harimanok_ ```js theme: { extend: { + animation: { + "bg-position": "bg-position 3s infinite alternate", + }, keyframes: { "bg-position": { "0%": { backgroundPosition: "0% 50%" }, From ccfc6c75a68c1483a1a69becd8c4a997d7a68728 Mon Sep 17 00:00:00 2001 From: Hari Lamichhane Date: Tue, 11 Mar 2025 16:07:18 +0545 Subject: [PATCH 7/7] fix: pass API key (#404) --- .github/workflows/deploy.yml | 1 + 1 file changed, 1 insertion(+) diff --git a/.github/workflows/deploy.yml b/.github/workflows/deploy.yml index ace6ab08..f1027867 100644 --- a/.github/workflows/deploy.yml +++ b/.github/workflows/deploy.yml @@ -41,6 +41,7 @@ jobs: NEXT_PUBLIC_SUPABASE_ANON_KEY: ${{ vars.NEXT_PUBLIC_SUPABASE_ANON_KEY }} NEXT_PUBLIC_POSTHOG_KEY: ${{ vars.NEXT_PUBLIC_POSTHOG_KEY }} NEXT_PUBLIC_POSTHOG_HOST: ${{ vars.NEXT_PUBLIC_POSTHOG_HOST }} + NEXT_PUBLIC_PLUNK_API_KEY: ${{ vars.NEXT_PUBLIC_PLUNK_API_KEY }} run: yarn build - name: Deploy to Cloudflare Pages id: deploy