jrangel/lcp-visualizer
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Changes to datagrid

Browse Source
This commit is contained in:
Jeremy Rangel
2025-02-01 22:16:55 -08:00
parent 05664f161a
commit 6dd4e7e1e2
7 changed files with 73 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files

42
blocks/components/LCPDatasetBuilder.js
View File

@ -1,4 +1,6 @@
import { useState, useEffect } from '@wordpress/element';
import {Icon, chevronDownSmall} from '@wordpress/icons';
import { Button, Modal } from '@wordpress/components';
import { __ } from '@wordpress/i18n';
import LCPDataGrid from './LCPDataGrid';
@ -49,7 +51,7 @@ const LCPDatasetBuilder = ({ attributes, setAttributes }) => {
<Button
variant="secondary"
onClick={() => setIsOpen(true)}
style={{ marginBottom: '10px', width: '100%' }}
style={{ marginBottom: '10px', width: '100%', }}
>
{__('Edit Dataset', 'lcp-visualize')}
</Button>
@ -58,27 +60,49 @@ const LCPDatasetBuilder = ({ attributes, setAttributes }) => {
<Modal
onRequestClose={() => setIsOpen(false)}
title={__('Dataset Builder', 'lcp-visualize')}
style={{ width: '90vw', height: '90vh' }}
style={{ width: '90vw', height: '90vh',
background:'#efefef',
padding:'0px',
}}
>
<div style={{ height: 'calc(90vh - 40px)', padding: '20px' }}>
<div style={{ height: 'calc(90vh - 40px)', padding: '0px' }}>
{/* Tabs */}
<div style={{ display: 'flex', marginBottom: '20px' }}>
<div style={{ display: 'flex' }}>
{datasets.map((dataset, index) => (
<button
key={index}
onClick={() => setActiveTab(index)} // Set the active tab
style={{
padding: '10px 20px',
margin: '0 5px',
backgroundColor: activeTab === index ? '#007cba' : '#f1f1f1',
display: 'flex',
alignItems:'center',
justifyContent:'center',
position: 'relative',
minWidth: '100px',
height: '35px',
lineHeight: '35px',
padding: '0 10px',
margin: '0 3px',
backgroundColor: '#fff',
border: '1px solid #ccc',
borderBottomColor: activeTab === index ? '#fff' : '#ccc',
borderRadius: '3px',
color: activeTab === index ? 'white' : 'black',
border: '1px solid #ccc',
borderRadius: '5px',
cursor: 'pointer',
transition: 'background-color 0.3s ease',
}}
>
{dataset.name}
> <span style={{
display: 'inline-block',
marginRight: '5px',
color: activeTab === index ? '#333' : '#aaa',
fontWeight: 'bold'
}}>
{dataset.name}
</span>
<Icon icon={ chevronDownSmall } style={{position:'relative',top:'0px'}} />
</button>
))}
</div>