@umituz/web-design-system 1.0.4 → 1.3.1

package/src/presentation/templates/PageLayout.tsx

@@ -0,0 +1,38 @@
+/**
+ * PageLayout Template Component
+ * @description Centralized page layout with consistent padding, max-width, and theme integration
+ */
+
+import { forwardRef, type HTMLAttributes } from 'react';
+import { cn } from '../../infrastructure/utils';
+import type { BaseProps, ChildrenProps } from '../../domain/types';
+
+export type MaxWidth = '4xl' | '7xl' | 'full';
+
+export interface PageLayoutProps extends HTMLAttributes<HTMLDivElement>, BaseProps {
+  maxWidth?: MaxWidth;
+}
+
+const maxWidthClasses: Record<MaxWidth, string> = {
+  '4xl': 'max-w-4xl',
+  '7xl': 'max-w-7xl',
+  'full': 'max-w-full',
+};
+
+export const PageLayout = forwardRef<HTMLDivElement, PageLayoutProps>(
+  ({ children, maxWidth = '7xl', className, ...props }, ref) => {
+    return (
+      <div
+        ref={ref}
+        className="min-h-screen bg-surface-gradient py-8 md:py-12 px-4 transition-theme"
+        {...props}
+      >
+        <div className={cn(maxWidthClasses[maxWidth], 'mx-auto', className)}>
+          {children}
+        </div>
+      </div>
+    );
+  }
+);
+
+PageLayout.displayName = 'PageLayout';

package/src/presentation/templates/ProjectSkeleton.tsx

@@ -0,0 +1,35 @@
+/**
+ * ProjectSkeleton Template Component
+ * @description Loading skeleton for project cards
+ */
+
+import { forwardRef, type HTMLAttributes } from 'react';
+import { cn } from '../../infrastructure/utils';
+import type { BaseProps } from '../../domain/types';
+
+export interface ProjectSkeletonProps extends HTMLAttributes<HTMLDivElement>, BaseProps {}
+
+export const ProjectSkeleton = forwardRef<HTMLDivElement, ProjectSkeletonProps>(
+  ({ className, ...props }, ref) => {
+    return (
+      <div
+        ref={ref}
+        className={cn('bg-bg-card rounded-xl overflow-hidden border border-border transition-theme', className)}
+        {...props}
+      >
+        <div className="h-28 bg-bg-tertiary animate-pulse" />
+        <div className="p-5">
+          <div className="flex gap-2 mb-3">
+            <div className="w-16 h-6 bg-bg-tertiary rounded-full animate-pulse" />
+            <div className="w-20 h-6 bg-bg-tertiary rounded-full animate-pulse" />
+          </div>
+          <div className="w-3/4 h-5 bg-bg-tertiary rounded mb-2 animate-pulse" />
+          <div className="w-full h-4 bg-bg-tertiary rounded mb-4 animate-pulse" />
+          <div className="w-1/2 h-4 bg-bg-tertiary rounded animate-pulse" />
+        </div>
+      </div>
+    );
+  }
+);
+
+ProjectSkeleton.displayName = 'ProjectSkeleton';

package/src/presentation/templates/Section.tsx

@@ -7,7 +7,7 @@ import { forwardRef, type HTMLAttributes } from 'react';
 import { cn } from '../../infrastructure/utils';
 import type { BaseProps, ChildrenProps } from '../../domain/types';
 
-export interface SectionProps extends HTMLAttributes<HTMLElement>, BaseProps, ChildrenProps {
+export interface SectionProps extends HTMLAttributes<HTMLElement>, BaseProps {
   title?: string;
   description?: string;
 }

package/src/presentation/templates/index.ts

@@ -12,3 +12,12 @@ export type { ListProps } from './List';
 
 export { Section } from './Section';
 export type { SectionProps } from './Section';
+
+export { PageLayout } from './PageLayout';
+export type { PageLayoutProps, MaxWidth } from './PageLayout';
+
+export { PageHeader } from './PageHeader';
+export type { PageHeaderProps, TextAlign, HeaderSize } from './PageHeader';
+
+export { ProjectSkeleton } from './ProjectSkeleton';
+export type { ProjectSkeletonProps } from './ProjectSkeleton';