Merge pull request #120 from DuckyMomo20012/dev

feat: update demo

README.md

@@ -78,7 +78,7 @@
 ### :camera: Screenshots
 
 <div align="center">
-  <img src="https://github.com/DuckyMomo20012/nextjs-template/assets/64480713/7da7177c-84b4-4f03-b9d4-da8b07e4a654" alt="screenshot" />
+  <img src="https://github.com/DuckyMomo20012/nextjs-template/assets/64480713/4854d68c-930d-4238-ab8a-4a02cd27e81b" alt="screenshot" />
 </div>
 
 <!-- TechStack -->

next.config.js

@@ -1,6 +1,7 @@
-/** @type {import('next').NextConfig} */
+// @ts-check
 
-export default {
+/** @type {import('next').NextConfig} */
+const nextConfig = {
   eslint: {
     ignoreDuringBuilds: true,
   },
@@ -16,3 +17,5 @@ export default {
     ],
   },
 };
+
+export default nextConfig;

package.json

@@ -38,6 +38,7 @@
     "@babel/core": "7.23.6",
     "@commitlint/cli": "18.4.3",
     "@commitlint/config-conventional": "18.4.3",
+    "@tailwindcss/container-queries": "0.1.1",
     "@types/node": "20.10.5",
     "@types/react": "18.2.29",
     "@types/react-dom": "18.2.18",

src/app/(home)/page.tsx

@@ -15,7 +15,6 @@ import {
 } from '@mantine/core';
 import Head from 'next/head';
 import { useDeferredValue, useState } from 'react';
-import { AppShell } from '@/components/layouts/AppShell';
 import { ButtonDemo } from '@/components/modules/ButtonDemo';
 import { ComboboxDemo } from '@/components/modules/ComboboxDemo';
 import { DataDisplayDemo } from '@/components/modules/DataDisplayDemo';
@@ -56,7 +55,7 @@ const HomePage = () => {
   const deferredError = useDeferredValue(error);
   const deferredPlaceholder = useDeferredValue(placeholder);
 
-  const defaultProps: ControlledDemoProps = {
+  const defaultProps = {
     color,
     description: deferredDescription,
     disabled,
@@ -67,7 +66,7 @@ const HomePage = () => {
     size,
     withAsterisk,
     loading,
-  };
+  } satisfies ControlledDemoProps;
 
   return (
     <>
@@ -243,8 +242,4 @@ const HomePage = () => {
   );
 };
 
-HomePage.getLayout = (page: React.ReactNode) => {
-  return <AppShell>{page}</AppShell>;
-};
-
 export default HomePage;

src/app/error.tsx

@@ -12,8 +12,8 @@ import {
 
 function Error() {
   return (
-    <Center className="@container h-full w-full flex-1">
-      <Stack align="center" className="min-w-4/5 @lg:w-full w-4/5 max-w-xl">
+    <Center className="h-full w-full flex-1 @container">
+      <Stack align="center" className="min-w-4/5 w-4/5 max-w-xl @lg:w-full">
         <Image
           alt="500"
           className="aspect-[5/4]"

src/app/not-found.tsx

@@ -12,8 +12,8 @@ import Link from 'next/link';
 
 const NotFound = () => {
   return (
-    <Center className="@container h-full w-full flex-1">
-      <Stack align="center" className="min-w-4/5 @lg:w-full w-4/5 max-w-xl">
+    <Center className="h-full w-full flex-1 @container">
+      <Stack align="center" className="min-w-4/5 w-4/5 max-w-xl @lg:w-full">
         <Image
           alt="404"
           className="aspect-[5/4]"

src/components/elements/Feature.tsx

@@ -1,21 +1,33 @@
 'use client';
 
-import { Card, Space, Stack, Text } from '@mantine/core';
+import { Anchor, Card, Space, Stack, Text } from '@mantine/core';
 
 const Feature = ({
   title,
   group,
+  url,
   children,
   className,
 }: {
   title: string;
   group?: string;
+  url?: string;
   className?: string;
   children: React.ReactNode;
 }) => {
   return (
     <Card className={`${className}`} radius="md" shadow="sm" withBorder>
-      <Text className="text-xl font-bold">{title}</Text>
+      {url ? (
+        <Anchor
+          className="text-xl font-bold text-inherit"
+          href={url}
+          target="_blank"
+        >
+          {title}
+        </Anchor>
+      ) : (
+        <Text className="text-xl font-bold">{title}</Text>
+      )}
       {group && (
         <Text c="dimmed" className="text-sm">
           {group}

src/components/modules/ButtonDemo.tsx

@@ -16,7 +16,11 @@ const ButtonDemo = memo(function ButtonDemo({
 }: ControlledDemoProps) {
   return (
     <>
-      <Feature group="Buttons" title="ActionIcon">
+      <Feature
+        group="Buttons"
+        title="ActionIcon"
+        url="https://mantine.dev/core/action-icon/"
+      >
         <ActionIcon
           color={color}
           disabled={disabled}
@@ -117,7 +121,11 @@ const ButtonDemo = memo(function ButtonDemo({
         </ActionIcon>
       </Feature>
 
-      <Feature group="Buttons" title="Button">
+      <Feature
+        group="Buttons"
+        title="Button"
+        url="https://mantine.dev/core/button/"
+      >
         <Button
           color={color}
           disabled={disabled}

src/components/modules/ComboboxDemo.tsx

@@ -23,7 +23,11 @@ const ComboboxDemo = memo(function ComboboxDemo({
 }: ControlledDemoProps) {
   return (
     <>
-      <Feature group="Combobox" title="Autocomplete">
+      <Feature
+        group="Combobox"
+        title="Autocomplete"
+        url="https://mantine.dev/core/autocomplete/"
+      >
         <Autocomplete
           data={[
             { group: 'Frontend', items: ['React', 'Angular'] },
@@ -70,7 +74,11 @@ const ComboboxDemo = memo(function ComboboxDemo({
         />
       </Feature>
 
-      <Feature group="Combobox" title="MultiSelect">
+      <Feature
+        group="Combobox"
+        title="MultiSelect"
+        url="https://mantine.dev/core/multi-select/"
+      >
         <MultiSelect
           data={['React', 'Angular', 'Svelte', 'Vue']}
           description={description}
@@ -131,7 +139,11 @@ const ComboboxDemo = memo(function ComboboxDemo({
         />
       </Feature>
 
-      <Feature group="Combobox" title="Pill">
+      <Feature
+        group="Combobox"
+        title="Pill"
+        url="https://mantine.dev/core/pill/"
+      >
         <Group>
           <Pill disabled={disabled} radius={radius} size={size}>
             {label}
@@ -147,7 +159,11 @@ const ComboboxDemo = memo(function ComboboxDemo({
         </Group>
       </Feature>
 
-      <Feature group="Combobox" title="TagsInput">
+      <Feature
+        group="Combobox"
+        title="TagsInput"
+        url="https://mantine.dev/core/tags-input/"
+      >
         <TagsInput
           description={description}
           disabled={disabled}

src/components/modules/DataDisplayDemo.tsx

@@ -22,7 +22,11 @@ const DataDisplayDemo = memo(function DataDisplayDemo({
 }: ControlledDemoProps) {
   return (
     <>
-      <Feature group="Data Display" title="Accordion">
+      <Feature
+        group="Data Display"
+        title="Accordion"
+        url="https://mantine.dev/core/accordion/"
+      >
         <Accordion chevronPosition="left" radius={radius} variant="default">
           <Accordion.Item value="photos">
             <Accordion.Control disabled={disabled}>
@@ -85,7 +89,11 @@ const DataDisplayDemo = memo(function DataDisplayDemo({
         </Accordion>
       </Feature>
 
-      <Feature group="Data Display" title="Avatar">
+      <Feature
+        group="Data Display"
+        title="Avatar"
+        url="https://mantine.dev/core/avatar/"
+      >
         <Avatar color={color} radius={radius} size={size} variant="default" />
 
         <Avatar color={color} radius={radius} size={size} variant="filled">
@@ -109,7 +117,11 @@ const DataDisplayDemo = memo(function DataDisplayDemo({
         <Avatar color={color} radius={radius} size={size} variant="white" />
       </Feature>
 
-      <Feature group="Data Display" title="Badge">
+      <Feature
+        group="Data Display"
+        title="Badge"
+        url="https://mantine.dev/core/badge/"
+      >
         <Badge color={color} radius={radius} size={size} variant="default">
           {label}
         </Badge>
@@ -133,7 +145,11 @@ const DataDisplayDemo = memo(function DataDisplayDemo({
         </Badge>
       </Feature>
 
-      <Feature group="Data Display" title="Indicator">
+      <Feature
+        group="Data Display"
+        title="Indicator"
+        url="https://mantine.dev/core/indicator/"
+      >
         <Stack className="w-min">
           <Indicator
             color={color}
@@ -199,7 +215,11 @@ const DataDisplayDemo = memo(function DataDisplayDemo({
         </Stack>
       </Feature>
 
-      <Feature group="Data Display" title="ThemeIcon">
+      <Feature
+        group="Data Display"
+        title="ThemeIcon"
+        url="https://mantine.dev/core/theme-icon/"
+      >
         <ThemeIcon color={color} radius={radius} size={size} variant="default">
           <Icon
             height="70%"

src/components/modules/FeedbackDemo.tsx

@@ -14,7 +14,11 @@ const FeedbackDemo = memo(function FeedbackDemo({
 }: ControlledDemoProps) {
   return (
     <>
-      <Feature group="Feedback" title="Alert">
+      <Feature
+        group="Feedback"
+        title="Alert"
+        url="https://mantine.dev/core/alert/"
+      >
         <Alert
           color={color}
           radius={radius}
@@ -71,7 +75,11 @@ const FeedbackDemo = memo(function FeedbackDemo({
         </Alert>
       </Feature>
 
-      <Feature group="Feedback" title="Notification">
+      <Feature
+        group="Feedback"
+        title="Notification"
+        url="https://mantine.dev/core/notification/"
+      >
         <Notification
           color={color}
           loading={loading}
@@ -93,7 +101,11 @@ const FeedbackDemo = memo(function FeedbackDemo({
         </Notification>
       </Feature>
 
-      <Feature group="Feedback" title="Progress">
+      <Feature
+        group="Feedback"
+        title="Progress"
+        url="https://mantine.dev/core/progress/"
+      >
         <Progress color={color} radius={radius} value={50}>
           {description}
         </Progress>
@@ -105,7 +117,11 @@ const FeedbackDemo = memo(function FeedbackDemo({
         </Progress>
       </Feature>
 
-      <Feature group="Feedback" title="Skeleton">
+      <Feature
+        group="Feedback"
+        title="Skeleton"
+        url="https://mantine.dev/core/skeleton/"
+      >
         <Skeleton circle height={50} mb="xl" />
         <Skeleton height={8} radius={radius} />
         <Skeleton height={8} mt={6} radius={radius} />