mirror of
https://github.com/Memo-2023/mana-monorepo.git
synced 2026-05-20 10:43:38 +02:00
61d181fbc2
Move inactive projects out of active workspace: - bauntown (community website) - maerchenzauber (AI story generation) - memoro (voice memo app) - news (news aggregation) - nutriphi (nutrition tracking) - reader (reading app) - uload (URL shortener) - wisekeep (AI wisdom extraction) Update CLAUDE.md documentation: - Add presi to active projects - Document archived projects section - Update workspace configuration Archived apps can be re-activated by moving back to apps/ 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
73 lines
1.8 KiB
Svelte
73 lines
1.8 KiB
Svelte
<script lang="ts">
|
|
interface Props {
|
|
variant?: 'default' | 'compact' | 'hero' | 'minimal' | 'glass' | 'gradient';
|
|
layout?: {
|
|
padding?: string;
|
|
gap?: string;
|
|
columns?: number;
|
|
};
|
|
animations?: {
|
|
hover?: boolean;
|
|
entrance?: 'fade' | 'slide' | 'scale' | 'none';
|
|
};
|
|
className?: string;
|
|
children?: any;
|
|
}
|
|
|
|
let {
|
|
variant = 'default',
|
|
layout = {},
|
|
animations = {},
|
|
className = '',
|
|
children,
|
|
}: Props = $props();
|
|
|
|
// Generate CSS classes based on variant
|
|
let variantClasses = $derived(() => {
|
|
const classes = {
|
|
default: 'bg-white border border-gray-200 shadow-sm',
|
|
compact: 'bg-white border border-gray-200 shadow-sm p-2',
|
|
hero: 'bg-gradient-to-r from-blue-500 to-purple-600 text-white shadow-lg',
|
|
minimal: 'bg-transparent border-none',
|
|
glass: 'bg-white/20 backdrop-blur-md border border-white/30',
|
|
gradient: 'bg-gradient-to-br from-indigo-50 to-blue-50 border border-indigo-200',
|
|
};
|
|
return classes[variant] || classes.default;
|
|
});
|
|
|
|
// Generate layout styles
|
|
let layoutStyles = $derived(() => {
|
|
const styles = [];
|
|
if (layout.padding) styles.push(`padding: ${layout.padding}`);
|
|
if (layout.gap) styles.push(`gap: ${layout.gap}`);
|
|
return styles.join('; ');
|
|
});
|
|
|
|
// Generate animation classes
|
|
let animationClasses = $derived(() => {
|
|
const classes = [];
|
|
if (animations.hover)
|
|
classes.push('hover:shadow-md hover:scale-[1.02] transition-all duration-200');
|
|
if (animations.entrance === 'fade') classes.push('animate-fade-in');
|
|
return classes.join(' ');
|
|
});
|
|
</script>
|
|
|
|
<div class="rounded-lg {variantClasses()} {animationClasses()} {className}" style={layoutStyles()}>
|
|
{@render children()}
|
|
</div>
|
|
|
|
<style>
|
|
@keyframes fade-in {
|
|
from {
|
|
opacity: 0;
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
.animate-fade-in {
|
|
animation: fade-in 0.3s ease-in-out;
|
|
}
|
|
</style>
|