({
+ source: content,
+ options: {
+ parseFrontmatter: true,
+ },
+ });
+ return {
+ filename,
+ filenameWithoutExtension: filename.replace(".mdx", ""),
+ content: contentMDX,
+ date: parseISO(filename.replace(".mdx", "")),
+ ...frontmatter,
+ };
+ }),
+ );
- const sortedChangelogs = changelogs.sort(
- (a, b) => b.date.getTime() - a.date.getTime(),
- );
+ const sortedChangelogs = changelogs.sort(
+ (a, b) => b.date.getTime() - a.date.getTime(),
+ );
- return (
-
-
Changelog
-
- {sortedChangelogs.map(({ content, date, title }, index) => {
- return (
-
- {format(date, "do MMMM yyyy")}
- {index === 0 && (
-
- Latest Release
-
- )}
-
- {formatDistanceToNow(date, { addSuffix: true })}
-
- {title}
- {content}
-
- );
- })}
-
-
+
Changelog
+
+ {sortedChangelogs.map(({ content, date, title }, index) => {
+ return (
+
+ {format(date, "do MMMM yyyy")}
+ {index === 0 && (
+
+ Latest Release
+
+ )}
+
+ {formatDistanceToNow(date, { addSuffix: true })}
+
+ {title}
+ {content}
+
+ );
+ })}
+
+
- {variantFound.component}
-
- );
+ return (
+
+ {typeof variantFound.component === "function"
+ ? variantFound.component()
+ : variantFound.component}
+
+ );
}
export const findCorrespondingComponent = ({
- section,
- category,
- component,
- variant,
+ section,
+ category,
+ component,
+ variant,
}: {
- section: string;
- category: string;
- component: string;
- variant?: string;
+ section: string;
+ category: string;
+ component: string;
+ variant?: string;
}) => {
- const sectionFound = SectionsList.find((s) => s.slug === section);
- if (!sectionFound) {
- return null;
- }
- console.log(sectionFound.slug);
- if (sectionFound.type === "multiple-component") {
- const categoryFound = sectionFound.categoriesList.find(
- (c) => c.slug === category,
- );
- if (!categoryFound) {
- return null;
- }
- console.log(categoryFound.slug);
+ const sectionFound = SectionsList.find((s) => s.slug === section);
+ if (!sectionFound) {
+ return null;
+ }
+ console.log(sectionFound.slug);
+ if (sectionFound.type === "multiple-component") {
+ const categoryFound = sectionFound.categoriesList.find(
+ (c) => c.slug === category,
+ );
+ if (!categoryFound) {
+ return null;
+ }
+ console.log(categoryFound.slug);
- const componentFound = categoryFound.componentList?.find(
- (c) => c.slug === component,
- );
- if (!componentFound) {
- return null;
- }
+ const componentFound = categoryFound.componentList?.find(
+ (c) => c.slug === component,
+ );
+ if (!componentFound) {
+ return null;
+ }
- console.log(componentFound.slug);
+ console.log(componentFound.slug);
- const variantFound = componentFound.variantList.find(
- (v) => v.slugPreviewFile === variant,
- );
+ const variantFound = componentFound.variantList.find(
+ (v) => v.slugPreviewFile === variant,
+ );
- console.log(variantFound?.slugPreviewFile);
+ console.log(variantFound?.slugPreviewFile);
- return variantFound;
- }
+ return variantFound;
+ }
- if (sectionFound.type === "single-component") {
- const categoryFound = sectionFound.categoriesList.find(
- (c) => c.slug === category,
- );
- if (!categoryFound) {
- return null;
- }
+ if (sectionFound.type === "single-component") {
+ const categoryFound = sectionFound.categoriesList.find(
+ (c) => c.slug === category,
+ );
+ if (!categoryFound) {
+ return null;
+ }
- const variantFound = categoryFound.component?.variantList.find(
- // We use component instead of variant as it is a single-component
- (v) => v.slugPreviewFile === component,
- );
+ const variantFound = categoryFound.component?.variantList.find(
+ // We use component instead of variant as it is a single-component
+ (v) => v.slugPreviewFile === component,
+ );
- return variantFound;
- }
+ return variantFound;
+ }
};
diff --git a/apps/website/src/app/preview/[section]/[category]/[component]/page.tsx b/apps/website/src/app/preview/[section]/[category]/[component]/page.tsx
index ee309239..5eeb5033 100644
--- a/apps/website/src/app/preview/[section]/[category]/[component]/page.tsx
+++ b/apps/website/src/app/preview/[section]/[category]/[component]/page.tsx
@@ -4,57 +4,59 @@ import type { Metadata } from "next";
import { notFound } from "next/navigation";
export const metadata: Metadata = {
- referrer: "no-referrer",
- robots: "noindex, nofollow",
+ referrer: "no-referrer",
+ robots: "noindex, nofollow",
};
export async function generateStaticParams() {
- return SectionsList.map((section) => {
- if (section.type === "single-component") {
- return section.categoriesList.map((category) => {
- if (!category.component) {
- return null;
- }
- return category.component.variantList.map((variant) => {
- if (!category.component) {
- return null;
- }
+ return SectionsList.map((section) => {
+ if (section.type === "single-component") {
+ return section.categoriesList.map((category) => {
+ if (!category.component) {
+ return null;
+ }
+ return category.component.variantList.map((variant) => {
+ if (!category.component) {
+ return null;
+ }
- return {
- params: {
- section: section.slug,
- category: category.slug,
- component: variant.slugPreviewFile,
- },
- };
- });
- });
- }
- });
+ return {
+ params: {
+ section: section.slug,
+ category: category.slug,
+ component: variant.slugPreviewFile,
+ },
+ };
+ });
+ });
+ }
+ });
}
export default function PagePreview({
- params: { section, category, component },
+ params: { section, category, component },
}: {
- params: {
- section: string;
- category: string;
- component: string;
- };
+ params: {
+ section: string;
+ category: string;
+ component: string;
+ };
}) {
- const variantFound = findCorrespondingComponent({
- section,
- category,
- component,
- });
+ const variantFound = findCorrespondingComponent({
+ section,
+ category,
+ component,
+ });
- if (!variantFound) {
- return notFound();
- }
+ if (!variantFound) {
+ return notFound();
+ }
- return (
-
- {variantFound.component}
-
- );
+ return (
+
+ {typeof variantFound.component === "function"
+ ? variantFound.component()
+ : variantFound.component}
+
+ );
}
diff --git a/apps/website/src/changelogs/2024-11-22.mdx b/apps/website/src/changelogs/2024-11-22.mdx
new file mode 100644
index 00000000..78f939e5
--- /dev/null
+++ b/apps/website/src/changelogs/2024-11-22.mdx
@@ -0,0 +1,12 @@
+---
+title: Sticky Footer & Title UI
+---
+
+#### New component
+
+- A sticky footer customizable component has been added to the website.
+
+##### Website update
+
+- The title UI has been updated to appear more modern and clean.
+- Add a "new" tag on the changelog if there is a changelog that has been added in the last 7 days.
\ No newline at end of file
diff --git a/apps/website/src/changelogs/last-changelog-date.ts b/apps/website/src/changelogs/last-changelog-date.ts
new file mode 100644
index 00000000..7ff8eab9
--- /dev/null
+++ b/apps/website/src/changelogs/last-changelog-date.ts
@@ -0,0 +1,2 @@
+// This file is generated by the generate-latest-changelog-date script
+export const lastChangelogDate = new Date("2024-11-21T23:00:00.000Z");
diff --git a/apps/website/src/components/component-wrapper/component-tab-renderer.tsx b/apps/website/src/components/component-wrapper/component-tab-renderer.tsx
index 05af2181..2f349140 100644
--- a/apps/website/src/components/component-wrapper/component-tab-renderer.tsx
+++ b/apps/website/src/components/component-wrapper/component-tab-renderer.tsx
@@ -118,7 +118,9 @@ export default function ComponentTabRenderer({
size={size}
// key={render}
>
- {component ?? An error has occured
}
+ {typeof component === "function"
+ ? component()
+ : (component ?? An error has occured
)}
- {component ?? An error has occured
}
+ {typeof component === "function"
+ ? component()
+ : (component ?? An error has occured
)}
)}
diff --git a/apps/website/src/components/component-wrapper/header-component.tsx b/apps/website/src/components/component-wrapper/header-component.tsx
index c1cece2f..de7d6d1e 100644
--- a/apps/website/src/components/component-wrapper/header-component.tsx
+++ b/apps/website/src/components/component-wrapper/header-component.tsx
@@ -32,7 +32,9 @@ export default function HeaderComponent({
)}
-
{title}
+
+ {title}
+
{description}
-
- {firstMenuSection.categoryList.map((category, _index) => (
-
-
- ))}
-
-
- );
+export default async function InfoMenuList() {
+ const today = new Date();
+ // is New if latest changelog date is within 7 days
+ const isNew = lastChangelogDate
+ ? lastChangelogDate > new Date(today.setDate(today.getDate() - 7))
+ : false;
+
+ return (
+
+
+ {firstMenuSection.categoryList.map((category, _index) => (
+
+
+ ))}
+
+
+ );
}
diff --git a/apps/website/src/components/navigation/navigation-menu.tsx b/apps/website/src/components/navigation/navigation-menu.tsx
index 2b56b304..e2861c08 100644
--- a/apps/website/src/components/navigation/navigation-menu.tsx
+++ b/apps/website/src/components/navigation/navigation-menu.tsx
@@ -1,149 +1,148 @@
import { differenceInDays } from "date-fns";
import { NavigationAnimatedBackground } from "#/src/components/navigation/navigation-animated-background";
import {
- GlobalNavItem,
- SectionWrapper,
+ GlobalNavItem,
+ SectionWrapper,
} from "#/src/components/navigation/navigation-item";
import { SectionsList } from "@cuicui/ui";
-import { firstMenuSection } from "#/src/lib/first-menu-section";
import type {
- CategoryType,
- SingleComponentCategoryType,
+ CategoryType,
+ SingleComponentCategoryType,
} from "@cuicui/ui/lib/types/component";
import { cn } from "#/src/utils/cn";
export default function NavigationMenu({
- isMobile,
- className,
+ isMobile,
+ className,
}: Readonly<{ isMobile?: boolean; className?: string }>) {
- function getCategoryTagMultipleComponentCategory(category: CategoryType) {
- const isNew =
- differenceInDays(new Date(), category.releaseDateCategory ?? 0) < 21;
- if (category.comingSoonCategory) {
- return "Coming Soon";
- }
- if (isNew) {
- return "New";
- }
- return null;
- }
- function getCategoryTagSingleComponentCategory(
- category: SingleComponentCategoryType,
- ) {
- const isNew =
- differenceInDays(new Date(), category.releaseDateCategory ?? 0) < 21;
- if (category.comingSoonCategory) {
- return "Coming Soon";
- }
- if (isNew) {
- return "New";
- }
+ function getCategoryTagMultipleComponentCategory(category: CategoryType) {
+ const isNew =
+ differenceInDays(new Date(), category.releaseDateCategory ?? 0) < 21;
+ if (category.comingSoonCategory) {
+ return "Coming Soon";
+ }
+ if (isNew) {
+ return "New";
+ }
+ return null;
+ }
+ function getCategoryTagSingleComponentCategory(
+ category: SingleComponentCategoryType,
+ ) {
+ const isNew =
+ differenceInDays(new Date(), category.releaseDateCategory ?? 0) < 21;
+ if (category.comingSoonCategory) {
+ return "Coming Soon";
+ }
+ if (isNew) {
+ return "New";
+ }
- return null;
- }
+ return null;
+ }
- function getClosestUpdatedComponentDate(dateList: (Date | null)[]) {
- return dateList.reduce((acc, date) => {
- if (!date) {
- return acc;
- }
- if (!acc) {
- return date;
- }
- return date > acc ? date : acc;
- }, null);
- }
+ function getClosestUpdatedComponentDate(dateList: (Date | null)[]) {
+ return dateList.reduce((acc, date) => {
+ if (!date) {
+ return acc;
+ }
+ if (!acc) {
+ return date;
+ }
+ return date > acc ? date : acc;
+ }, null);
+ }
- return (
-
- {SectionsList.map((section) => {
- if (section.type === "page") {
- return (
-
-
- {section.pageList.map((page) => (
-
-
- ))}
-
-
- );
- }
- if (section.type === "single-component") {
- return (
-
-
- {section.categoriesList.map((category, _index) => {
- return (
-
-
- );
- })}
-
-
- );
- }
- if (section.type === "multiple-component") {
- return (
-
-
- {section.categoriesList.map((category, _index) => {
- return (
-
-
- );
- })}
-
-
- );
- }
- })}
-
- );
+ return (
+
+ {SectionsList.map((section) => {
+ if (section.type === "page") {
+ return (
+
+
+ {section.pageList.map((page) => (
+
+
+ ))}
+
+
+ );
+ }
+ if (section.type === "single-component") {
+ return (
+
+
+ {section.categoriesList.map((category, _index) => {
+ return (
+
+
+ );
+ })}
+
+
+ );
+ }
+ if (section.type === "multiple-component") {
+ return (
+
+
+ {section.categoriesList.map((category, _index) => {
+ return (
+
+
+ );
+ })}
+
+
+ );
+ }
+ })}
+
+ );
}
diff --git a/apps/website/src/lib/generated-package-check-list-to-install.ts b/apps/website/src/lib/generated-package-check-list-to-install.ts
index 60ee82d9..d876516b 100644
--- a/apps/website/src/lib/generated-package-check-list-to-install.ts
+++ b/apps/website/src/lib/generated-package-check-list-to-install.ts
@@ -1,226 +1,254 @@
-// This is an automated generated file with the ./scripts/generate-package-list-check.ts script
+// This is an automatically generated file with the ./scripts/generate-package-list-check.ts script
import type { PackageToInstallType } from "#/src/components/steps-to-install/packages";
export const packageCheckListToInstall: PackageToInstallType[] = [
- {
- find: [`from "@ctrl/tinycolor"`],
- packageName: "@ctrl/tinycolor",
- },
- {
- find: [`from "@radix-ui/react-dialog"`],
- packageName: "@radix-ui/react-dialog",
- },
- {
- find: [`from "@radix-ui/react-dropdown-menu"`],
- packageName: "@radix-ui/react-dropdown-menu",
- },
- {
- find: [`from "@radix-ui/react-scroll-area"`],
- packageName: "@radix-ui/react-scroll-area",
- },
- {
- find: [`from "@radix-ui/react-select"`],
- packageName: "@radix-ui/react-select",
- },
- {
- find: [`from "@radix-ui/react-slider"`],
- packageName: "@radix-ui/react-slider",
- },
- {
- find: [`from "@radix-ui/react-slot"`],
- packageName: "@radix-ui/react-slot",
- },
- {
- find: [`from "@radix-ui/react-tabs"`],
- packageName: "@radix-ui/react-tabs",
- },
- {
- find: [`from "@radix-ui/react-tooltip"`],
- packageName: "@radix-ui/react-tooltip",
- },
- {
- find: [`from "@uiw/react-signature"`],
- packageName: "@uiw/react-signature",
- },
- {
- find: [`from "bezier-editor"`],
- packageName: "bezier-editor",
- },
- {
- find: [`from "class-variance-authority"`],
- packageName: "class-variance-authority",
- },
- {
- find: [`from "clsx"`],
- packageName: "clsx",
- },
- {
- find: [`from "cmdk"`],
- packageName: "cmdk",
- },
- {
- find: [`from "date-fns"`],
- packageName: "date-fns",
- },
- {
- find: [`from "embla-carousel-react"`],
- packageName: "embla-carousel-react",
- },
- {
- find: [`from "framer-motion"`],
- packageName: "framer-motion",
- },
- {
- find: [`from "fs-extra"`],
- packageName: "fs-extra",
- },
- {
- find: [`from "get-similar-color"`],
- packageName: "get-similar-color",
- },
- {
- find: [`from "jsbarcode"`],
- packageName: "jsbarcode",
- },
- {
- find: [`from "lucide-react"`],
- packageName: "lucide-react",
- },
- {
- find: [`from "next"`],
- packageName: "next",
- },
- {
- find: [`from "next-themes"`],
- packageName: "next-themes",
- },
- {
- find: [`from "path"`],
- packageName: "path",
- },
- {
- find: [`from "qrcode.react"`],
- packageName: "qrcode.react",
- },
- {
- find: [`from "react"`],
- packageName: "react",
- },
- {
- find: [`from "react-dom"`],
- packageName: "react-dom",
- },
- {
- find: [`from "react-frame-component"`],
- packageName: "react-frame-component",
- },
- {
- find: [`from "react-resizable-panels"`],
- packageName: "react-resizable-panels",
- },
- {
- find: [`from "sharp"`],
- packageName: "sharp",
- },
- {
- find: [`from "sonner"`],
- packageName: "sonner",
- },
- {
- find: [`from "tailwind-merge"`],
- packageName: "tailwind-merge",
- },
- {
- find: [`from "tts-react"`],
- packageName: "tts-react",
- },
- {
- find: [`from "vaul"`],
- packageName: "vaul",
- },
- {
- find: [`from "zustand"`],
- packageName: "zustand",
- },
- {
- find: [`from "@biomejs/biome"`],
- packageName: "@biomejs/biome",
- },
- {
- find: [`from "@tailwindcss/forms"`],
- packageName: "@tailwindcss/forms",
- },
- {
- find: [`from "@tailwindcss/typography"`],
- packageName: "@tailwindcss/typography",
- },
- {
- find: [`from "@testing-library/dom"`],
- packageName: "@testing-library/dom",
- },
- {
- find: [`from "@testing-library/react"`],
- packageName: "@testing-library/react",
- },
- {
- find: [`from "@types/node"`],
- packageName: "@types/node",
- },
- {
- find: [`from "@types/react"`],
- packageName: "@types/react",
- },
- {
- find: [`from "@types/react-dom"`],
- packageName: "@types/react-dom",
- },
- {
- find: [`from "@vitejs/plugin-react"`],
- packageName: "@vitejs/plugin-react",
- },
- {
- find: [`from "autoprefixer"`],
- packageName: "autoprefixer",
- },
- {
- find: [`from "eslint"`],
- packageName: "eslint",
- },
- {
- find: [`from "eslint-config-next"`],
- packageName: "eslint-config-next",
- },
- {
- find: [`from "jsdom"`],
- packageName: "jsdom",
- },
- {
- find: [`from "lint-staged"`],
- packageName: "lint-staged",
- },
- {
- find: [`from "postcss"`],
- packageName: "postcss",
- },
- {
- find: [`from "shiki"`],
- packageName: "shiki",
- },
- {
- find: [`from "tailwindcss"`],
- packageName: "tailwindcss",
- },
- {
- find: [`from "tailwindcss-animate"`],
- packageName: "tailwindcss-animate",
- },
- {
- find: [`from "typescript"`],
- packageName: "typescript",
- },
- {
- find: [`from "vitest"`],
- packageName: "vitest",
- },
+ {
+ find: [`from "@cuicui/ui"`],
+ packageName: "@cuicui/ui",
+ },
+ {
+ find: [`from "@radix-ui/react-dialog"`],
+ packageName: "@radix-ui/react-dialog",
+ },
+ {
+ find: [`from "@radix-ui/react-dropdown-menu"`],
+ packageName: "@radix-ui/react-dropdown-menu",
+ },
+ {
+ find: [`from "@radix-ui/react-scroll-area"`],
+ packageName: "@radix-ui/react-scroll-area",
+ },
+ {
+ find: [`from "@radix-ui/react-select"`],
+ packageName: "@radix-ui/react-select",
+ },
+ {
+ find: [`from "@radix-ui/react-slot"`],
+ packageName: "@radix-ui/react-slot",
+ },
+ {
+ find: [`from "@radix-ui/react-tabs"`],
+ packageName: "@radix-ui/react-tabs",
+ },
+ {
+ find: [`from "class-variance-authority"`],
+ packageName: "class-variance-authority",
+ },
+ {
+ find: [`from "clsx"`],
+ packageName: "clsx",
+ },
+ {
+ find: [`from "cmdk"`],
+ packageName: "cmdk",
+ },
+ {
+ find: [`from "date-fns"`],
+ packageName: "date-fns",
+ },
+ {
+ find: [`from "dom-to-image-more"`],
+ packageName: "dom-to-image-more",
+ },
+ {
+ find: [`from "framer-motion"`],
+ packageName: "framer-motion",
+ },
+ {
+ find: [`from "fs-extra"`],
+ packageName: "fs-extra",
+ },
+ {
+ find: [`from "lucide-react"`],
+ packageName: "lucide-react",
+ },
+ {
+ find: [`from "next"`],
+ packageName: "next",
+ },
+ {
+ find: [`from "next-mdx-remote"`],
+ packageName: "next-mdx-remote",
+ },
+ {
+ find: [`from "next-themes"`],
+ packageName: "next-themes",
+ },
+ {
+ find: [`from "path"`],
+ packageName: "path",
+ },
+ {
+ find: [`from "react"`],
+ packageName: "react",
+ },
+ {
+ find: [`from "react-dom"`],
+ packageName: "react-dom",
+ },
+ {
+ find: [`from "react-frame-component"`],
+ packageName: "react-frame-component",
+ },
+ {
+ find: [`from "react-resizable-panels"`],
+ packageName: "react-resizable-panels",
+ },
+ {
+ find: [`from "sharp"`],
+ packageName: "sharp",
+ },
+ {
+ find: [`from "sonner"`],
+ packageName: "sonner",
+ },
+ {
+ find: [`from "tailwind-merge"`],
+ packageName: "tailwind-merge",
+ },
+ {
+ find: [`from "vite-tsconfig-paths"`],
+ packageName: "vite-tsconfig-paths",
+ },
+ {
+ find: [`from "zustand"`],
+ packageName: "zustand",
+ },
+ {
+ find: [`from "@biomejs/biome"`],
+ packageName: "@biomejs/biome",
+ },
+ {
+ find: [`from "@tailwindcss/forms"`],
+ packageName: "@tailwindcss/forms",
+ },
+ {
+ find: [`from "@tailwindcss/typography"`],
+ packageName: "@tailwindcss/typography",
+ },
+ {
+ find: [`from "@testing-library/dom"`],
+ packageName: "@testing-library/dom",
+ },
+ {
+ find: [`from "@testing-library/react"`],
+ packageName: "@testing-library/react",
+ },
+ {
+ find: [`from "@types/dom-to-image"`],
+ packageName: "@types/dom-to-image",
+ },
+ {
+ find: [`from "@types/node"`],
+ packageName: "@types/node",
+ },
+ {
+ find: [`from "@types/react"`],
+ packageName: "@types/react",
+ },
+ {
+ find: [`from "@types/react-dom"`],
+ packageName: "@types/react-dom",
+ },
+ {
+ find: [`from "@vitejs/plugin-react"`],
+ packageName: "@vitejs/plugin-react",
+ },
+ {
+ find: [`from "autoprefixer"`],
+ packageName: "autoprefixer",
+ },
+ {
+ find: [`from "eslint"`],
+ packageName: "eslint",
+ },
+ {
+ find: [`from "eslint-config-next"`],
+ packageName: "eslint-config-next",
+ },
+ {
+ find: [`from "jsdom"`],
+ packageName: "jsdom",
+ },
+ {
+ find: [`from "lint-staged"`],
+ packageName: "lint-staged",
+ },
+ {
+ find: [`from "postcss"`],
+ packageName: "postcss",
+ },
+ {
+ find: [`from "shiki"`],
+ packageName: "shiki",
+ },
+ {
+ find: [`from "tailwindcss"`],
+ packageName: "tailwindcss",
+ },
+ {
+ find: [`from "tailwindcss-animate"`],
+ packageName: "tailwindcss-animate",
+ },
+ {
+ find: [`from "turbo"`],
+ packageName: "turbo",
+ },
+ {
+ find: [`from "typescript"`],
+ packageName: "typescript",
+ },
+ {
+ find: [`from "vitest"`],
+ packageName: "vitest",
+ },
+ {
+ find: [`from "@ctrl/tinycolor"`],
+ packageName: "@ctrl/tinycolor",
+ },
+ {
+ find: [`from "@number-flow/react"`],
+ packageName: "@number-flow/react",
+ },
+ {
+ find: [`from "@radix-ui/react-slider"`],
+ packageName: "@radix-ui/react-slider",
+ },
+ {
+ find: [`from "@uiw/react-signature"`],
+ packageName: "@uiw/react-signature",
+ },
+ {
+ find: [`from "bezier-editor"`],
+ packageName: "bezier-editor",
+ },
+ {
+ find: [`from "embla-carousel-react"`],
+ packageName: "embla-carousel-react",
+ },
+ {
+ find: [`from "get-similar-color"`],
+ packageName: "get-similar-color",
+ },
+ {
+ find: [`from "jsbarcode"`],
+ packageName: "jsbarcode",
+ },
+ {
+ find: [`from "qrcode.react"`],
+ packageName: "qrcode.react",
+ },
+ {
+ find: [`from "tts-react"`],
+ packageName: "tts-react",
+ },
+ {
+ find: [`from "@cuicui/config-tailwind"`],
+ packageName: "@cuicui/config-tailwind",
+ },
+ {
+ find: [`from "@cuicui/config-typescript"`],
+ packageName: "@cuicui/config-typescript",
+ },
];
diff --git a/apps/website/biome.json b/biome.json
similarity index 100%
rename from apps/website/biome.json
rename to biome.json
diff --git a/packages/ui/cuicui/common-ui/buttons/github-stars/component.github-stars.tsx b/packages/ui/cuicui/common-ui/buttons/github-stars/component.github-stars.tsx
index ea899c86..18f700f0 100644
--- a/packages/ui/cuicui/common-ui/buttons/github-stars/component.github-stars.tsx
+++ b/packages/ui/cuicui/common-ui/buttons/github-stars/component.github-stars.tsx
@@ -4,139 +4,139 @@ import Link from "next/link";
import { cn } from "@/cuicui/utils/cn/cn";
import type { ComponentProps } from "react";
export const GithubStarsButton = ({
- starNumber,
- href,
- children,
- className,
- ...props
+ starNumber,
+ href,
+ children,
+ className,
+ ...props
}: Readonly<{
- starNumber: number;
- children?: string;
- href: string;
- className?: string;
+ starNumber: number;
+ children?: string;
+ href: string;
+ className?: string;
}> &
- ComponentProps<"a">) => {
- return (
-
-
-
-
-
-
+ ComponentProps<"a">) => {
+ return (
+
+
+
+
+
+
-
-
-
-
- {children}
-
- )}
-
-
- );
+
+
+
+
+ {children}
+
+ )}
+
+
+ );
};
const CuicuiStarIcon = ({ ...props }: React.SVGProps) => {
- return (
-
- Star Icon
-
-
-
-
-
-
-
- );
+ return (
+
+ Star Icon
+
+
+
+
+
+
+
+ );
};
diff --git a/packages/ui/cuicui/marketing-ui/footer/category.ts b/packages/ui/cuicui/marketing-ui/footer/category.ts
new file mode 100644
index 00000000..fe519422
--- /dev/null
+++ b/packages/ui/cuicui/marketing-ui/footer/category.ts
@@ -0,0 +1,23 @@
+import footerComponent from "@/cuicui/marketing-ui/footer/sticky-footer/component";
+import { PreviewStickyFooter } from "@/cuicui/marketing-ui/footer/sticky-footer/preview.sticky-footer";
+import type { CategoryType } from "@/lib/types/component";
+import { PanelBottomIcon } from "lucide-react";
+
+export const footerCategory: CategoryType = {
+ slug: "footer",
+ name: "Footer",
+ description:
+ "Customize the footer section of your website with various styles and components.",
+ releaseDateCategory: new Date("2024-11-22"),
+ icon: PanelBottomIcon, // Updated icon to represent footer
+ previewCategory: {
+ component: PreviewStickyFooter,
+ previewScale: 0.8,
+ },
+ componentList: [
+ footerComponent,
+ // Add more footer components as needed
+ ],
+};
+
+export default footerCategory;
diff --git a/packages/ui/cuicui/marketing-ui/footer/sticky-footer/component.ts b/packages/ui/cuicui/marketing-ui/footer/sticky-footer/component.ts
new file mode 100644
index 00000000..bbe3c96e
--- /dev/null
+++ b/packages/ui/cuicui/marketing-ui/footer/sticky-footer/component.ts
@@ -0,0 +1,19 @@
+import type { ComponentType } from "@/lib/types/component";
+import { PreviewStickyFooter } from "@/cuicui/marketing-ui/footer/sticky-footer/preview.sticky-footer";
+
+export const footerComponent: ComponentType = {
+ sizePreview: "md",
+ slug: "sticky-footer",
+ name: "Sticky Footer",
+ description: "A sticky footer that stays at the bottom of the page.",
+ isIframed: true,
+ variantList: [
+ {
+ name: "Fixed positionned",
+ component: PreviewStickyFooter,
+ slugPreviewFile: "preview.sticky-footer",
+ },
+ ],
+};
+
+export default footerComponent;
diff --git a/packages/ui/cuicui/marketing-ui/footer/sticky-footer/preview.sticky-footer.tsx b/packages/ui/cuicui/marketing-ui/footer/sticky-footer/preview.sticky-footer.tsx
new file mode 100644
index 00000000..7be39057
--- /dev/null
+++ b/packages/ui/cuicui/marketing-ui/footer/sticky-footer/preview.sticky-footer.tsx
@@ -0,0 +1,50 @@
+import { StickyFooter } from "./sticky-footer";
+
+export function PreviewStickyFooter() {
+ return (
+
+ );
+}
+
+export function Content() {
+ return (
+
+
+
+
About
+
Home
+
Projects
+
Our Mission
+
Contact Us
+
+
+
+
Education
+
News
+
Learn
+
Certification
+
Publications
+
+
+
+
+
Sticky Footer
+
©copyright
+
+