-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
11 changed files
with
156 additions
and
81 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,5 @@ | ||
| --- | ||
| "@blandui/blandui-react": patch | ||
| --- | ||
|
|
||
| as props added to Button |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,11 @@ | ||
| import { Typography } from '@blandui/blandui-react'; | ||
|
|
||
| export default function ComingSoon() { | ||
| return ( | ||
| <main className="flex items-center justify-center h-[50vh]"> | ||
| <Typography size="lg" type='title' as="h1"> | ||
| Coming soon... | ||
| </Typography> | ||
| </main> | ||
| ); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,53 +1,103 @@ | ||
| import { Button, Typography } from '@blandui/blandui-react'; | ||
| 'use client'; | ||
|
|
||
| import { | ||
| Badge, Button, Checkbox, RadioButton, TextInput, Toggle, Typography, | ||
| } from '@blandui/blandui-react'; | ||
| import { SiFigma } from '@icons-pack/react-simple-icons'; | ||
| import { ExternalLink } from 'lucide-react'; | ||
| import Link from 'next/link'; | ||
| import { useState } from 'react'; | ||
|
|
||
| const Section1 = () => { | ||
| const [toggle, setToggle] = useState(false); | ||
|
|
||
| const Section1 = () => ( | ||
| <section className="w-11/12 sm:w-8/12 m-auto py-4xl sw:py-2xl flex gap-xl sm:gap-lg flex-col sm:flex-row"> | ||
| <div className="flex flex-col gap-xl flex-[0.5]"> | ||
| <Typography type="heading" size='md' className="font-semibold sm:hidden block"> | ||
| return ( | ||
| <section className="w-11/12 sm:w-8/12 m-auto py-4xl sw:py-2xl flex gap-xl sm:gap-lg flex-col sm:flex-row"> | ||
| <div className="flex flex-col gap-xl flex-[0.5]"> | ||
| <Typography type="heading" size='md' className="font-semibold sm:hidden block"> | ||
| Basic building block for your ideas. | ||
| </Typography> | ||
| <Typography type="display" size='sm' className="font-semibold hidden sm:block"> | ||
| </Typography> | ||
| <Typography type="display" size='sm' className="font-semibold hidden sm:block"> | ||
| Basic building block for your ideas. | ||
| </Typography> | ||
| </Typography> | ||
|
|
||
| <Typography type="body" size='md' className="sm:hidden block"> | ||
| <Typography type="body" size='md' className="sm:hidden block"> | ||
| Bland gives you core components to bring your ideas to life, skipping the fancy stuff to focus on the essentials. Our components let you design freely, making sure you are in control the whole time. | ||
| </Typography> | ||
| <Typography type="body" size='lg' className="hidden sm:block"> | ||
| </Typography> | ||
| <Typography type="body" size='lg' className="hidden sm:block"> | ||
| Bland gives you core components to bring your ideas to life, skipping the fancy stuff to focus on the essentials. Our components let you design freely, making sure you are in control the whole time. | ||
| </Typography> | ||
| </Typography> | ||
|
|
||
| <div className="flex gap-md"> | ||
| <Button color='brand' variant='primary' size="md"> | ||
| <SiFigma size="1.25rem"/> | ||
| Get This UI Kit | ||
| </Button> | ||
| <div className="flex gap-md"> | ||
| <Button color='brand' variant='primary' size="md" as={Link} href="https://www.figma.com/community/file/1354188872568801069/bland-ui-kit-for-figma" target="_blank"> | ||
| <SiFigma size="1.25rem"/> | ||
| Get This UI Kit | ||
| </Button> | ||
|
|
||
| <Button color='brand' variant='secondary' size="md"> | ||
| View Docs | ||
| </Button> | ||
| <Button color='brand' variant='secondary' size="md" as={Link} href="/coming-soon"> | ||
| View Docs | ||
| </Button> | ||
| </div> | ||
| </div> | ||
| </div> | ||
|
|
||
| <div className="flex flex-col justify-center gap-md flex-[0.5]"> | ||
| <div className="p-2xl bg-surface-2 rounded-lg gap-xl"> | ||
| <div className="flex gap-2xl items-center"> | ||
| <Button color='brand' variant='primary' size="md"> | ||
| <div className="flex flex-col justify-center gap-lg flex-[0.5]"> | ||
| <div className="flex flex-col p-2xl bg-surface-2 rounded-lg gap-xl text-bold"> | ||
| <div className="flex gap-2xl items-center"> | ||
| <Button color='brand' variant='primary' size="md"> | ||
| Click Me | ||
| </Button> | ||
| </Button> | ||
| </div> | ||
|
|
||
| <div className="flex gap-2xl items-center"> | ||
| <label className="flex gap-md"> | ||
| <Checkbox size="md" /> | ||
| <Typography type="body" size='md'> | ||
| Interact with me | ||
| </Typography> | ||
| </label> | ||
|
|
||
| <label className="flex gap-md"> | ||
| <RadioButton radioSize="md" /> | ||
| <Typography type="body" size='md'> | ||
| Click to select me | ||
| </Typography> | ||
| </label> | ||
|
|
||
| <Badge size="xl" color='red' variant='primary'> | ||
| Label | ||
| </Badge> | ||
| </div> | ||
|
|
||
| <div className="flex gap-2xl items-center"> | ||
| <label className="flex gap-md items-center"> | ||
| <Toggle size="md" onChange={() => { setToggle((prev) => !prev); }}/> | ||
| <Typography type="body" size='md'> | ||
| Switched { toggle ? 'on' : 'off' } | ||
| </Typography> | ||
| </label> | ||
| </div> | ||
|
|
||
| <div className="flex gap-2xl items-center"> | ||
| <TextInput | ||
| label="Label" value="User input" readOnly | ||
| inputSize="md" variant='warning' | ||
| helperText="I am giving a warning here" | ||
| /> | ||
| </div> | ||
|
|
||
| <div className="flex gap-2xl items-center"> | ||
| </div> | ||
| </div> | ||
| </div> | ||
|
|
||
| <div className="hidden sm:flex justify-center"> | ||
| <Button color='brand' variant='primary' size="md" className="shadow-brand-far-subtle"> | ||
| <div className="hidden sm:flex justify-center"> | ||
| <Button color='brand' variant='primary' size="md" className="shadow-brand-far-subtle" as={Link} href="https://playground.blandui.com" target="_blank"> | ||
| Explore in Playground | ||
| <ExternalLink size="1.25rem"/> | ||
| </Button> | ||
| <ExternalLink size="1.25rem"/> | ||
| </Button> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </section> | ||
| ); | ||
| </section> | ||
| ); | ||
| }; | ||
|
|
||
| export default Section1; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,25 +1,17 @@ | ||
| import { Metadata } from 'next'; | ||
| import Section1 from './components/Section1'; | ||
| import Section2 from './components/Section2'; | ||
| import Section3 from './components/Section3'; | ||
| import Section4 from './components/Section4'; | ||
| import Section5 from './components/Section5'; | ||
|
|
||
| export const metadata: Metadata = { | ||
| title: 'BlandUI', | ||
| description: 'TODO', | ||
| }; | ||
|
|
||
| export default function Home() { | ||
| return ( | ||
| <div className=""> | ||
| <main className=""> | ||
| <Section1/> | ||
| <Section2/> | ||
| <Section3/> | ||
| <Section4/> | ||
| <Section5/> | ||
| </main> | ||
| </div> | ||
| <main> | ||
| <Section1/> | ||
| <Section2/> | ||
| <Section3/> | ||
| <Section4/> | ||
| <Section5/> | ||
| </main> | ||
| ); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,6 +1,8 @@ | ||
| import { withPlausibleProxy } from 'next-plausible'; | ||
|
|
||
| /** @type {import('next').NextConfig} */ | ||
| const nextConfig = withPlausibleProxy()({}); | ||
| const nextConfig = withPlausibleProxy({ | ||
| customDomain: 'https://plausible-analytics-pulpopush.up.railway.app', | ||
| })({}); | ||
|
|
||
| export default nextConfig; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,19 +1,21 @@ | ||
| import type { Config } from "tailwindcss"; | ||
| import type { Config } from 'tailwindcss'; | ||
| import { content, plugin } from '@blandui/blandui-react/tailwind'; | ||
| import forms from '@tailwindcss/forms'; | ||
|
|
||
| const config: Config = { | ||
| content: [ | ||
| "./pages/**/*.{js,ts,jsx,tsx,mdx}", | ||
| "./components/**/*.{js,ts,jsx,tsx,mdx}", | ||
| "./app/**/*.{js,ts,jsx,tsx,mdx}", | ||
| content(), | ||
| ], | ||
| theme: { | ||
| extend: { | ||
| }, | ||
| }, | ||
| plugins: [ | ||
| plugin(), | ||
| ], | ||
| content: [ | ||
| './pages/**/*.{js,ts,jsx,tsx,mdx}', | ||
| './components/**/*.{js,ts,jsx,tsx,mdx}', | ||
| './app/**/*.{js,ts,jsx,tsx,mdx}', | ||
| content(), | ||
| ], | ||
| theme: { | ||
| extend: { | ||
| }, | ||
| }, | ||
| plugins: [ | ||
| forms, | ||
| plugin(), | ||
| ], | ||
| }; | ||
| export default config; |
Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.
Oops, something went wrong.