96 lines
2.8 KiB
TypeScript
96 lines
2.8 KiB
TypeScript
'use client';
|
|
|
|
import React, { useState, useEffect } from 'react';
|
|
import { Row, Col } from 'antd/lib/grid';
|
|
import Button from 'antd/lib/button';
|
|
import { Paragraph } from '@/components/Typography/Paragraph';
|
|
import { Text } from '@/components/Typography/Text';
|
|
|
|
// ⛔ Mock useWindowSize (since actual hook isn't available)
|
|
function useWindowSize() {
|
|
const [width, setWidth] = useState<number | undefined>(undefined);
|
|
|
|
useEffect(() => {
|
|
function handleResize() {
|
|
setWidth(window.innerWidth);
|
|
}
|
|
|
|
handleResize(); // Set initial
|
|
window.addEventListener('resize', handleResize);
|
|
return () => window.removeEventListener('resize', handleResize);
|
|
}, []);
|
|
|
|
return { width };
|
|
}
|
|
|
|
// ✅ Simulated store (mocked useProfileStore)
|
|
const useProfileStore = () => {
|
|
const [modules, setModules] = useState<any[]>([]);
|
|
const addModule = () => {
|
|
const newModule = {
|
|
id: Date.now(),
|
|
title: 'New Module',
|
|
description: 'Describe your module here',
|
|
};
|
|
setModules([...modules, newModule]);
|
|
};
|
|
|
|
return { modules, addModule };
|
|
};
|
|
|
|
export default function EmptyModulePage() {
|
|
const { modules, addModule } = useProfileStore();
|
|
const { width } = useWindowSize();
|
|
const isMobileStyleChangesEnabled = width !== undefined && width <= 768;
|
|
|
|
return (
|
|
<div className={isMobileStyleChangesEnabled ? 'p__t--12' : 'p__t--24'}>
|
|
{modules.length === 0 ? (
|
|
<Row
|
|
data-testid="module--empty"
|
|
gutter={[10, 10]}
|
|
className="text__align--center"
|
|
>
|
|
<Col span={24}>
|
|
</Col>
|
|
<Col span={24}>
|
|
<Text
|
|
data-testid="empty-module--caption"
|
|
preset="semibold18"
|
|
className="d--block m__b--4"
|
|
>
|
|
Nothing Here Yet
|
|
</Text>
|
|
<Paragraph
|
|
data-testid="empty-module--caption-cta"
|
|
className="opacity--60 leading-22"
|
|
>
|
|
Click the button below to get started
|
|
</Paragraph>
|
|
</Col>
|
|
<Col span={24}>
|
|
<Button type="link" onClick={addModule}>
|
|
<div className="d--flex justify__content--center align__items--center">
|
|
<Text preset="semibold18" className="text--blue m__l--4">
|
|
Add Module
|
|
</Text>
|
|
</div>
|
|
</Button>
|
|
</Col>
|
|
</Row>
|
|
) : (
|
|
<div className="p-8 max-w-xl mx-auto space-y-2">
|
|
<h2 className="text-xl font-bold">Modules:</h2>
|
|
<ul className="list-disc list-inside">
|
|
{modules.map((mod) => (
|
|
<li key={mod.id}>
|
|
<span className="font-medium">{mod.title}</span> - {mod.description}
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|