@@ -248,22 +304,34 @@ const ComponentWrapper = ({
size,
renderButton,
children,
+ isChildUsingHeightFull,
}: {
renderButton: boolean;
isIframed?: boolean;
size: ComponentHeightType;
children: React.ReactNode;
+ isChildUsingHeightFull?: boolean;
}) => {
const { resolvedTheme } = useTheme();
if (!isIframed) {
- return <>{children};
+ return (
+
+ {children}
+
+ );
}
if (resolvedTheme === "dark") {
return (
,
+ previewScale: 2,
+ },
+ },
+ {
+ name: "Navigation",
+ slug: "navigation",
+ description: "Create simple navigation components",
+ releaseDate: new Date("2024-06-17"),
+ preview: {
+ component:
,
+ previewScale: 0.75,
+ },
+ },
+ {
+ name: "Buttons",
+ slug: "buttons",
+ description: "Create simple buttons with different styles",
+ releaseDate: new Date("2024-07-29"),
+ preview: {
+ component:
,
+ previewScale: 1.5,
+ },
+ },
+ {
+ name: "Skeletons",
+ slug: "skeletons",
+ description: "Create simple skeletons for loading states",
+ releaseDate: new Date("2024-08-01"),
+
+ preview: {
+ component:
,
+ previewScale: 0.75,
+ },
+ },
+ {
+ name: "Avatars",
+ slug: "avatars",
+ description: "Create simple avatars with different styles",
+ // releaseDate: new Date("2024-08-01"),
+ comingSoon: true,
+ },
+ ],
+ },
+ {
+ name: "Marketing components",
+ slug: "marketing-components",
+ items: [
+ {
+ name: "Features",
+ slug: "features",
+ description: "Showcase your product features with style",
+ releaseDate: new Date("2024-06-17"),
+
+ preview: {
+ component:
,
+ previewScale: 0.3,
+ },
+ },
+ {
+ name: "Pricing Tables",
+ slug: "pricing-tables",
+ description: "Showcase your product pricing with style",
+ releaseDate: new Date("2024-08-01"),
+
+ preview: {
+ component:
,
+ previewScale: 0.75,
+ },
+ },
+ {
+ name: "Testimonials",
+ slug: "testimonials",
+ description: "Showcase your product testimonials with style",
+ releaseDate: new Date("2024-07-17"),
+
+ preview: {
+ component:
,
+ previewScale: 0.75,
+ },
+ },
+ ],
+ },
+ {
+ name: "Application UI",
+ slug: "application-ui",
+ items: [
+ {
+ name: "Settings",
+ slug: "settings",
+ description: "Create simple settings components",
+ releaseDate: new Date("2024-06-30"),
+
+ preview: {
+ component:
,
+ previewScale: 1.25,
+ },
+ },
+ {
+ name: "Static Steppers",
+ slug: "static-steppers",
+ description: "Create simple steppers with different styles",
+ releaseDate: new Date("2024-08-01"),
+ preview: {
+ component:
,
+ previewScale: 0.75,
+ },
+ },
+ {
+ name: "Kbd",
+ slug: "kbd",
+ description: "Create simple accessible kbd shortcut",
+ comingSoon: true,
+ },
+ ],
+ },
+ {
+ name: "Other",
+ slug: "other",
+ items: [
+ {
+ name: "Cursors",
+ slug: "cursors",
+ description: "Create cursor effects",
+ releaseDate: new Date("2024-07-21"),
+ preview: {
+ component:
,
+ previewScale: 1.5,
+ },
+ },
+ {
+ name: "Transition wrappers",
+ slug: "transition-wrappers",
+ description:
+ "Create transition wrappers to animate any without changing your code components",
+ releaseDate: new Date("2024-07-29"),
+ preview: {
+ component:
,
+ previewScale: 0.75,
+ },
+ },
+ ],
+ },
+ {
+ name: "Hooks",
+ slug: "hooks",
+ items: [
+ {
+ name: "Picture in Picture",
+ slug: "picture-in-picture",
+ description: "Create a picture in picture mode for your videos",
+ comingSoon: true,
+ },
+ ],
+ },
+];
diff --git a/src/lib/types/component.d.ts b/src/lib/types/component.d.ts
index 83b684ca..f1881dd4 100644
--- a/src/lib/types/component.d.ts
+++ b/src/lib/types/component.d.ts
@@ -11,7 +11,8 @@ export type ComponentBadge =
| "updated"
| "deprecated"
| "experimental"
- | "no-js";
+ | "no-js"
+ | "prefer-desktop";
export type LibraryBadge = "framer-motion" | "sonner" | "lucide-react";
@@ -22,3 +23,18 @@ export type FrameworkBadge =
| "angular"
| "web-components"
| "next";
+
+export type PreviewComponent = {
+ component: ReactNode;
+ previewScale: number;
+};
+
+export type CategoryItem = {
+ name: string;
+ slug: string;
+ href?: string;
+ description: string;
+ comingSoon?: boolean;
+ releaseDate?: Date;
+ preview?: PreviewComponent;
+};
diff --git a/src/styles/globals.css b/src/styles/globals.css
index 70ade180..0a22f7a5 100755
--- a/src/styles/globals.css
+++ b/src/styles/globals.css
@@ -56,4 +56,13 @@
.comment-1 {
@apply font-normal text-neutral-500 dark:text-neutral-400 text-sm ;
}
+ .caption-md {
+ @apply font-normal text-neutral-500 dark:text-neutral-400 ;
+ }
+ .caption-sm {
+ @apply font-normal text-neutral-400 dark:text-neutral-500 text-xs ;
+ }
+ .uppercase-title {
+ @apply font-semibold text-neutral-400 dark:text-neutral-500 text-xs uppercase tracking-wider;
+ }
}
\ No newline at end of file
diff --git a/src/ui/gradient-container.tsx b/src/ui/gradient-container.tsx
index 37e76568..d973e980 100644
--- a/src/ui/gradient-container.tsx
+++ b/src/ui/gradient-container.tsx
@@ -121,7 +121,7 @@ export default ({
"rounded-[inherit]",
background === "solid" && "bg-neutral-50 dark:bg-neutral-950",
background === "glassy" &&
- "bg-gradient-to-b from-white/95 to-white/90 dark:from-black/95 dark:to-black/85",
+ "bg-gradient-to-b from-white/95 to-white/90 dark:from-neutral-950/95 dark:to-neutral-950/85",
getRoundedValue(rounded, "child"),
classNameChild,
)}
diff --git a/src/ui/navigation/navigation-menu.tsx b/src/ui/navigation/navigation-menu.tsx
index c7c67cd1..f4a253f7 100644
--- a/src/ui/navigation/navigation-menu.tsx
+++ b/src/ui/navigation/navigation-menu.tsx
@@ -4,8 +4,10 @@ import { ArrowUpRightIcon } from "lucide-react";
import Link from "next/link";
import { useSelectedLayoutSegments } from "next/navigation";
import React, { useState } from "react";
-import { type Item, componentCategories } from "#/src/lib/component-categories";
+import { componentCategories } from "#/src/lib/component-categories";
+import type { CategoryItem } from "#/src/lib/types/component";
import { cn } from "#/src/utils/cn";
+import { getCategoryHref } from "#/src/utils/get-component-href";
import GradientContainer from "../gradient-container";
import GradientText from "../gradient-text";
export default function NavigationMenu({
@@ -70,7 +72,7 @@ function GlobalNavItem({
parentSlug,
isMobile,
}: Readonly<{
- item: Item;
+ item: CategoryItem;
parentSlug: string | null;
isMobile?: boolean;
}>) {
@@ -78,19 +80,9 @@ function GlobalNavItem({
const isActive = segments.some((segment) => segment === item.slug);
- function getHref() {
- if (item.href) {
- return item.href;
- }
- if (parentSlug) {
- return `/${parentSlug}/${item.slug}`;
- }
- return `/${item.slug}`;
- }
-
return (
{
// Normalize the input path to remove leading slashes or dots
const filePath = getComponentPath({ componentSlug, variantName });
- console.log("\nHere is the filePath found :\n", filePath);
- const normalizedPath = path.normalize(filePath).replace(/^(\.\/|\/)/, "");
- const absolutePath = path.resolve(normalizedPath);
+ // console.log("\nHere is the filePath found :\n", filePath);
+
+ // Convert relative path to an absolute path in a controlled manner
+ const absolutePath = path.resolve(process.cwd(), filePath);
+
try {
const data = await fs.readFile(absolutePath, "utf-8");
return data;
@@ -26,22 +28,28 @@ import { componentCategories } from "../lib/component-categories";
function getComponentPath({
componentSlug,
variantName,
-}: { componentSlug: string; variantName: string }) {
+}: { componentSlug: string; variantName: string }): string {
let basePath: null | string = null;
+
for (const category of componentCategories) {
for (const item of category.items) {
if (item.slug === componentSlug) {
basePath = `${category.slug}/${item.slug}`;
- console.log(
- "\nHere is the basePath found where slug = slug:\n",
- basePath,
- );
+ // console.log(
+ // "\nHere is the basePath found where slug = slug:\n",
+ // basePath,
+ // );
break;
}
}
+ if (basePath) {
+ break;
+ }
}
+
if (!basePath) {
throw new Error(`Path not found for component ${componentSlug}`);
}
+
return `./src/app/(components)/${basePath}/${variantName}.tsx`;
}