import { #273

Open
opened 2026-01-29 21:46:23 +00:00 by claunia · 0 comments
Owner

Originally created by @Brentdharn on GitHub (Oct 11, 2022).

import {
Card,
Title,
Text,
Tab,
TabList,
ColGrid,
Block,
} from '@tremor/react';

import { useState } from 'react';

export default function Example() {
const [selectedView, setSelectedView] = useState(1);
return (



Lorem ipsum dolor sit amet, consetetur sadipscing elitr.

        <TabList defaultValue={ 1 } handleSelect={ (value) => setSelectedView(value) } marginTop="mt-6">
            <Tab value={ 1 } text="Page 1" />
            <Tab value={ 2 } text="Page 2" />
        </TabList>

        { selectedView === 1 ? (
            <>
                <ColGrid numColsMd={ 2 } numColsLg={ 3 } gapX="gap-x-6" gapY="gap-y-6" marginTop="mt-6">
                    <Card>
                        { /* Placeholder to set height */ }
                        <div className="h-28" />
                    </Card>
                    <Card>
                        { /* Placeholder to set height */ }
                        <div className="h-28" />
                    </Card>
                    <Card>
                        { /* Placeholder to set height */ }
                        <div className="h-28" />
                    </Card>
                </ColGrid>

                <Block marginTop="mt-6">
                    <Card>
                        <div className="h-80" />
                    </Card>
                </Block>
            </>
        ) : (
            <Block marginTop="mt-6">
                <Card>
                    <div className="h-96" />
                </Card>
            </Block>
        ) }
    </main>
);

}

Originally posted by @Brentdharn in https://github.com/tremorlabs/tremor/issues/91

Originally created by @Brentdharn on GitHub (Oct 11, 2022). import { Card, Title, Text, Tab, TabList, ColGrid, Block, } from '@tremor/react'; import { useState } from 'react'; export default function Example() { const [selectedView, setSelectedView] = useState(1); return ( <main> <Title>Dashboard</Title> <Text>Lorem ipsum dolor sit amet, consetetur sadipscing elitr.</Text> <TabList defaultValue={ 1 } handleSelect={ (value) => setSelectedView(value) } marginTop="mt-6"> <Tab value={ 1 } text="Page 1" /> <Tab value={ 2 } text="Page 2" /> </TabList> { selectedView === 1 ? ( <> <ColGrid numColsMd={ 2 } numColsLg={ 3 } gapX="gap-x-6" gapY="gap-y-6" marginTop="mt-6"> <Card> { /* Placeholder to set height */ } <div className="h-28" /> </Card> <Card> { /* Placeholder to set height */ } <div className="h-28" /> </Card> <Card> { /* Placeholder to set height */ } <div className="h-28" /> </Card> </ColGrid> <Block marginTop="mt-6"> <Card> <div className="h-80" /> </Card> </Block> </> ) : ( <Block marginTop="mt-6"> <Card> <div className="h-96" /> </Card> </Block> ) } </main> ); } __Originally posted by @Brentdharn in https://github.com/tremorlabs/tremor/issues/91__
Sign in to join this conversation.
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: TencentARC/GFPGAN#273