feat: add feature component url

DuckyMomo20012 · Jan 2, 2024 · d9b4e60 · d9b4e60
1 parent e35a635
commit d9b4e60
Show file tree

Hide file tree

Showing 9 changed files with 194 additions and 39 deletions.
diff --git a/src/components/elements/Feature.tsx b/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}

diff --git a/src/components/modules/ButtonDemo.tsx b/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}

diff --git a/src/components/modules/ComboboxDemo.tsx b/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}

diff --git a/src/components/modules/DataDisplayDemo.tsx b/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%"

diff --git a/src/components/modules/FeedbackDemo.tsx b/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} />