Add simple textarea

BirthdayyBot · Apr 9, 2024 · d377ab9 · d377ab9
1 parent cdfaa4b
commit d377ab9
Show file tree

Hide file tree

Showing 2 changed files with 58 additions and 16 deletions.
diff --git a/src/components/GuildConfig/ConfigInput.tsx b/src/components/GuildConfig/ConfigInput.tsx
@@ -1,6 +1,7 @@
 'use client';
 import { timezonesOffsets } from '@/types/config';
 import { Input, Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/ui';
+import { Textarea } from '@/ui/textarea';
 import { APIChannel, APIRole } from 'discord-api-types/v10';
 import { useState } from 'react';
 
@@ -19,6 +20,13 @@ interface ConfigChannelInputProps {
 
 interface ConfigTimezoneOffsetInputProps {
   defaultTimezoneOffset: string;
+  option: 1 | 2;
+  guildId: string;
+}
+
+interface ConfigBirthdayMessageInputProps {
+  defaultBirthdayMessage: string;
+  premium: boolean;
   guildId: string;
 }
 
@@ -68,25 +76,48 @@ export function ConfigChannelInput({ channels, defaultChannel }: ConfigChannelIn
     </div>
   );
 }
-export function ConfigTimezoneOffsetInput({ defaultTimezoneOffset }: ConfigTimezoneOffsetInputProps) {
+export function ConfigTimezoneOffsetInput({ defaultTimezoneOffset, option }: ConfigTimezoneOffsetInputProps) {
   const [selectedTimezone, setSelectedTimezone] = useState<string>(defaultTimezoneOffset);
 
   return (
     <div className="ConfigTimezoneOffsetInput">
-      <Input type="number" defaultValue={defaultTimezoneOffset} onChange={(e) => setSelectedTimezone(e.target.value)} />
+      {option === 1 ? (
+        <Input
+          type="number"
+          defaultValue={defaultTimezoneOffset}
+          onChange={(e) => setSelectedTimezone(e.target.value)}
+          max={'12'}
+          min={'-11'}
+          step={'1'}
+          placeholder="Timezone offset"
+        />
+      ) : (
+        <Select value={selectedTimezone}>
+          <SelectTrigger>
+            <SelectValue placeholder={defaultTimezoneOffset ?? 'Select a timezone offset'} />
+          </SelectTrigger>
+          <SelectContent>
+            {timezonesOffsets.map((timezone) => (
+              <SelectItem key={timezone} value={timezone}>
+                {timezone}
+              </SelectItem>
+            ))}
+          </SelectContent>
+        </Select>
+      )}
+    </div>
+  );
+}
 
-      <Select value={selectedTimezone}>
-        <SelectTrigger>
-          <SelectValue placeholder={defaultTimezoneOffset ?? 'Select a timezone offset'} />
-        </SelectTrigger>
-        <SelectContent>
-          {timezonesOffsets.map((timezone) => (
-            <SelectItem key={timezone} value={timezone}>
-              {timezone}
-            </SelectItem>
-          ))}
-        </SelectContent>
-      </Select>
+export function ConfigBirthdayMessageInput({
+  defaultBirthdayMessage,
+  premium,
+  guildId,
+}: ConfigBirthdayMessageInputProps) {
+  return (
+    <div className="ConfigBirthdayMessageInput">
+      <Input type="text" defaultValue={defaultBirthdayMessage} placeholder="Birthday message" disabled={!premium} />
+      <Textarea placeholder="Happy Birthday!" disabled={!premium} rows={4} />
     </div>
   );
 }
diff --git a/src/components/GuildConfig/GuildConfig.tsx b/src/components/GuildConfig/GuildConfig.tsx
@@ -1,6 +1,11 @@
 import { GuildChannelInfoMock, GuildInfoMock } from '@/mock/guild.mock';
 import { H3 } from '@/ui/typography';
-import { ConfigChannelInput, ConfigRoleInput, ConfigTimezoneOffsetInput } from './ConfigInput';
+import {
+  ConfigBirthdayMessageInput,
+  ConfigChannelInput,
+  ConfigRoleInput,
+  ConfigTimezoneOffsetInput,
+} from './ConfigInput';
 
 interface GuildConfigComponentProps {
   guildId: string;
@@ -23,7 +28,13 @@ export default function GuildConfigComponent({ children, guildId }: GuildConfigC
         channels={GuildChannelInfoMock}
         defaultChannel="1080819909317099541"
       />
-      <ConfigTimezoneOffsetInput defaultTimezoneOffset={'0'} guildId="980559116076470272" />
+      <ConfigTimezoneOffsetInput defaultTimezoneOffset={'0'} guildId="980559116076470272" option={2} />
+      <br />
+      <ConfigBirthdayMessageInput
+        defaultBirthdayMessage="Happy Birthday!"
+        premium={true}
+        guildId="980559116076470272"
+      />
     </div>
   );
 }