AskSQLAI/frontend/src/components/Header.tsx at 5c224be69822b056bde5f9e99dec45b873c4ed6a · rahulapjs/AskSQLAI · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
import React from 'react';
import './Header.css';

interface HeaderProps {
    onSchemaView: () => void;
    onSchemaCreate: () => void;
}

const Header: React.FC<HeaderProps> = ({ onSchemaView, onSchemaCreate }) => {
    return (
        <header className="header glass-card">
            <div className="header-content">
                <div className="logo-section">
                    <div className="logo-icon">
                        <svg width="32" height="32" viewBox="0 0 32 32" fill="none">
                            <path d="M16 4L4 10V22L16 28L28 22V10L16 4Z" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
                            <path d="M16 16L4 10" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
                            <path d="M16 16V28" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
                            <path d="M16 16L28 10" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
                        </svg>
                    </div>
                    <div className="logo-text">
                        <h1 className="app-title">AskSQL<span className="ai-badge">AI</span></h1>
                        <p className="app-subtitle">Natural Language to SQL</p>
                    </div>
                </div>

                <nav className="header-nav">
                    <button className="btn btn-secondary" onClick={onSchemaCreate}>
                        <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
                            <path d="M12 5v14M5 12h14" />
                        </svg>
                        <span className="btn-text">Create Table</span>
                    </button>
                    <button className="btn btn-secondary" onClick={onSchemaView}>
                        <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
                            <rect x="3" y="3" width="7" height="7" rx="1" />
                            <rect x="14" y="3" width="7" height="7" rx="1" />
                            <rect x="14" y="14" width="7" height="7" rx="1" />
                            <rect x="3" y="14" width="7" height="7" rx="1" />
                        </svg>
                        <span className="btn-text">View Schema</span>
                    </button>
                </nav>
            </div>
        </header>
    );
};

export default Header;