DN-4: Demos page.

client/src/app/test/api/demos/AuthDemo.tsx

@@ -0,0 +1,17 @@
+'use client';
+import React, { useState } from 'react';
+import { useAuth } from '@components/context/AuthContext';
+import { BoxContainer } from '../modules/BoxContainer';
+import { AuthViews } from '@components/components/ui/modal/auth/AuthViews/AuthViews';
+
+export function AuthDemo() {
+    const [title, setTitle] = useState('Login');
+    const { user, login, logout } = useAuth();
+
+    return (
+        <BoxContainer>
+            <h2 style={{ paddingBottom: '5px' }}>{title}</h2>
+            <AuthViews onTitleChange={setTitle} />
+        </BoxContainer>
+    );
+}

client/src/app/test/api/modules/BoxContainer.tsx

@@ -0,0 +1,28 @@
+import React from 'react';
+import styled from 'styled-components';
+
+const Box = styled.div`
+    margin: 10px;
+    padding: 20px;
+    text-decoration: none;
+    color: inherit;
+
+    padding: 5px;
+    text-decoration: none;
+
+    border: 1px solid #ccc;
+    border-radius: 5px;
+    text-align: center;
+
+    &:hover {
+        border-color: #aaa;
+    }
+`;
+
+export function BoxContainer({ children }: { children: React.ReactNode }) {
+    return (
+        <Box style={{ width: '50%', margin: 'auto' }}>
+            <div style={{ padding: '20px' }}>{children}</div>
+        </Box>
+    );
+}