Skip to content

Commit

Permalink
Docs/fix wrong code samples (#198)
Browse files Browse the repository at this point in the history
  • Loading branch information
@nank1ro
nank1ro authored Nov 19, 2024
1 parent b2febda commit 42ad3a2
Show file tree
Hide file tree
Showing 11 changed files with 524 additions and 414 deletions.
265 changes: 136 additions & 129 deletions docs/src/content/docs/Components/card.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,12 +3,14 @@ title: Card
sidebar:
order: 4
---
import Preview from '../../../components/Preview.astro';

import Preview from "../../../components/Preview.astro";

Displays a card with header, content, and footer.

<Preview src="https://shadcn-ui-playground.pages.dev/card" minHeight="500px">
```dart

```dart
const frameworks = {
'next': 'Next.js',
'react': 'React',
Expand All @@ -23,56 +25,60 @@ class CardProject extends StatelessWidget {
Widget build(BuildContext context) {
final theme = ShadTheme.of(context);
return ShadCard(
width: 350,
title: Text('Create project', style: theme.textTheme.h4),
description: const Text('Deploy your new project in one-click.'),
child: Padding(
padding: const EdgeInsets.symmetric(vertical: 16),
child: Column(
mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
const Text('Name'),
const ShadInput(placeholder: 'Name of your project'),
const SizedBox(height: 6),
const Text('Framework'),
ShadSelect<String>(
placeholder: const Text('Select'),
options: frameworks.entries
.map(
(e) => ShadOption(value: e.key, child: Text(e.value)))
.toList(),
selectedOptionBuilder: (context, value) {
return Text(frameworks[value]!);
},
onChanged: (value) {},
),
],
width: 350,
title: Text('Create project', style: theme.textTheme.h4),
description: const Text('Deploy your new project in one-click.'),
footer: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
ShadButton.outline(
child: const Text('Cancel'),
onPressed: () {},
),
),
footer: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
ShadButton(
child: const Text('Deploy'),
onPressed: () {},
),
],
),
child: Padding(
padding: const EdgeInsets.symmetric(vertical: 16),
child: Column(
mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
ShadButton.outline(
child: const Text('Cancel'),
onPressed: () {},
),
ShadButton(
child: const Text('Deploy'),
onPressed: () {},
const Text('Name'),
const ShadInput(placeholder: Text('Name of your project')),
const SizedBox(height: 6),
const Text('Framework'),
ShadSelect<String>(
placeholder: const Text('Select'),
options: frameworks.entries
.map((e) => ShadOption(value: e.key, child: Text(e.value)))
.toList(),
selectedOptionBuilder: (context, value) {
return Text(frameworks[value]!);
},
onChanged: (value) {},
),
],
),
);
),
);
}
}
```

</Preview>

## Notifications Example

<Preview src="https://shadcn-ui-playground.pages.dev/card?style=notifications" minHeight="500px">

```dart
import 'package:awesome_flutter_extensions/awesome_flutter_extensions.dart';
import 'package:shadcn_ui/shadcn_ui.dart';
const notifications = [
(
title: "Your call has been confirmed.",
Expand Down Expand Up @@ -108,103 +114,104 @@ class _CardNotificationsState extends State<CardNotifications> {
Widget build(BuildContext context) {
final theme = ShadTheme.of(context);
return ShadCard(
width: 380,
title: const Text('Notifications'),
description: const Text('You have 3 unread messages.'),
child: Column(
children: [
const SizedBox(height: 16),
Container(
padding: const EdgeInsets.all(16),
decoration: BoxDecoration(
borderRadius: theme.radius,
border: Border.all(color: theme.colorScheme.border),
),
child: Row(
children: [
ShadImage.square(
LucideIcons.bellRing,
size: 24,
color: theme.colorScheme.foreground,
),
Expanded(
child: Padding(
padding: const EdgeInsets.only(left: 16),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
'Push Notifications',
style: theme.textTheme.small,
),
const SizedBox(height: 4),
Text(
'Send notifications to device.',
style: theme.textTheme.muted,
)
],
),
width: 380,
title: const Text('Notifications'),
description: const Text('You have 3 unread messages.'),
footer: ShadButton(
width: double.infinity,
icon: const Padding(
padding: EdgeInsets.only(right: 8),
child: ShadImage.square(LucideIcons.check, size: 16),
),
onPressed: () {},
child: const Text('Mark all as read'),
),
child: Column(
children: [
const SizedBox(height: 16),
Container(
padding: const EdgeInsets.all(16),
decoration: BoxDecoration(
borderRadius: theme.radius,
border: Border.all(color: theme.colorScheme.border),
),
child: Row(
children: [
ShadImage.square(
LucideIcons.bellRing,
size: 24,
color: theme.colorScheme.foreground,
),
Expanded(
child: Padding(
padding: const EdgeInsets.only(left: 16),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
'Push Notifications',
style: theme.textTheme.small,
),
const SizedBox(height: 4),
Text(
'Send notifications to device.',
style: theme.textTheme.muted,
)
],
),
),
ValueListenableBuilder(
valueListenable: pushNotifications,
builder: (context, value, child) {
return ShadSwitch(
value: value,
onChanged: (v) => pushNotifications.value = v,
);
},
),
],
),
),
ValueListenableBuilder(
valueListenable: pushNotifications,
builder: (context, value, child) {
return ShadSwitch(
value: value,
onChanged: (v) => pushNotifications.value = v,
);
},
),
],
),
const SizedBox(height: 16),
...notifications
.map(
(n) => Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Container(
width: 8,
height: 8,
margin: const EdgeInsets.only(top: 4),
decoration: const BoxDecoration(
color: Color(0xFF0CA5E9),
shape: BoxShape.circle,
),
),
const SizedBox(height: 16),
...notifications
.map(
(n) => Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Container(
width: 8,
height: 8,
margin: const EdgeInsets.only(top: 4),
decoration: const BoxDecoration(
color: Color(0xFF0CA5E9),
shape: BoxShape.circle,
),
Expanded(
child: Padding(
padding: const EdgeInsets.only(left: 16),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text('Your call has been confirmed.',
style: theme.textTheme.small),
const SizedBox(height: 4),
Text(n.description, style: theme.textTheme.muted),
],
),
),
Expanded(
child: Padding(
padding: const EdgeInsets.only(left: 16),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text('Your call has been confirmed.',
style: theme.textTheme.small),
const SizedBox(height: 4),
Text(n.description, style: theme.textTheme.muted),
],
),
)
],
),
)
.separatedBy(const SizedBox(height: 16)),
const SizedBox(height: 16),
],
),
footer: ShadButton(
width: double.infinity,
text: const Text('Mark all as read'),
icon: const Padding(
padding: EdgeInsets.only(right: 8),
child: ShadImage.square(LucideIcons.check, size: 16),
),
onPressed: () {},
),
);
),
)
],
),
)
.separatedBy(const SizedBox(height: 16)),
const SizedBox(height: 16),
],
),
);
}
}
```

</Preview>
44 changes: 29 additions & 15 deletions docs/src/content/docs/Components/checkbox.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,32 +3,45 @@ title: Checkbox
sidebar:
order: 4
---
import Preview from '../../../components/Preview.astro';

import Preview from "../../../components/Preview.astro";

A control that allows the user to toggle between checked and not checked.

<Preview src="https://shadcn-ui-playground.pages.dev/checkbox">
```dart
bool value = false;
@override
Widget build(BuildContext context) {
return ShadCheckbox(
value: value,
onChanged: (v) => setState(() => value = v),
label: const Text('Accept terms and conditions'),
sublabel: const Text(
'You agree to our Terms of Service and Privacy Policy.',
),
);

```dart
class CheckboxSample extends StatefulWidget {
const CheckboxSample({super.key});
@override
State<CheckboxSample> createState() => _CheckboxSampleState();
}
class _CheckboxSampleState extends State<CheckboxSample> {
bool value = false;
@override
Widget build(BuildContext context) {
return ShadCheckbox(
value: value,
onChanged: (v) => setState(() => value = v),
label: const Text('Accept terms and conditions'),
sublabel: const Text(
'You agree to our Terms of Service and Privacy Policy.',
),
);
}
}
```

</Preview>

## Form

<Preview src="https://shadcn-ui-playground.pages.dev/form?style=checkboxField" minHeight="300px">
```dart

```dart
ShadCheckboxFormField(
id: 'terms',
initialValue: false,
Expand All @@ -45,4 +58,5 @@ ShadCheckboxFormField(
},
)
```

</Preview>
Loading

0 comments on commit 42ad3a2

Please sign in to comment.