70 lines
2.8 KiB
TypeScript
70 lines
2.8 KiB
TypeScript
'use client'
|
|
import theme from "@/theme";
|
|
import { Button, ChakraProvider, Container, Flex, Heading, Image, Input, Text } from "@chakra-ui/react";
|
|
import { useState } from "react";
|
|
import { toaster } from "@/components/ui/toaster";
|
|
import { feelingFree } from "@/actions";
|
|
|
|
|
|
export default function Home() {
|
|
const [query, setQuery] = useState<string | undefined>(undefined);
|
|
const feelingFreedom = async () => {
|
|
try {
|
|
|
|
if (!query) {
|
|
throw new Error('You must provide a search query.');
|
|
}
|
|
|
|
const searchParams = new URLSearchParams();
|
|
searchParams.set('query', query)
|
|
|
|
const result = await feelingFree(searchParams.toString());
|
|
|
|
if (result.error) {
|
|
throw new Error(result.payload);
|
|
}
|
|
|
|
toaster.create({ title: 'Redirecting...', description: 'Was that so hard?', type: 'success' })
|
|
setTimeout(() => {
|
|
window.location.href = result.payload;
|
|
}, 2000)
|
|
|
|
} catch (error) {
|
|
if (error instanceof Error) {
|
|
toaster.create({ type: 'error', title: 'Error', description: error.message })
|
|
return;
|
|
}
|
|
return;
|
|
}
|
|
|
|
}
|
|
const lmgcitfy = () => {
|
|
if (!query) {
|
|
toaster.create({ title: 'Error', description: 'You must enter a search query.', type: 'error' });
|
|
return;
|
|
}
|
|
const searchParams = new URLSearchParams();
|
|
|
|
searchParams.append('query', query);
|
|
window.location.href = `https://guncadindex.com/search?${searchParams}`;
|
|
}
|
|
return (
|
|
<ChakraProvider value={theme}>
|
|
<Container backgroundColor={'#2a2a2a'} borderRadius={'lg'} boxShadow={'0 0 12px #4a4a4a'} py={4} width={{ base: '90%', md: '50%' }} overflow={'hidden'}>
|
|
<Flex justify={'center'} align={'center'} p={2} mb={4}>
|
|
<Image src={'/gci_logo_large.png'} height={{ base: '50px', md: '75px' }} alt="GunCAD Index logo" />
|
|
<Flex flexDir={'column'} mx={4} >
|
|
<Heading size={{ base: '2xl', md: '5xl' }} fontFamily={'var(--font-ibm)'} lineHeight={1}>GunCAD Index</Heading>
|
|
<Text fontSize={{ base: 'sm', md: 'xl' }} ml={{ md: 1 }} fontFamily={'var(--font-ibm)'}>A search engine for guns.</Text>
|
|
</Flex>
|
|
</Flex>
|
|
<Input variant={'outline'} borderRadius={'lg'} border={'1px solid #4a4a4a'} size={'lg'} placeholder="Enter your query here" onChange={(e) => setQuery(e.target.value)} />
|
|
<Flex justify={'space-around'} gapY={4} flexDir={{ base: 'column', md: 'row' }} p={2} my={4}>
|
|
<Button colorPalette={'green'} variant={'solid'} size={'lg'} onClick={() => lmgcitfy()}>Search on GCI</Button>
|
|
<Button colorPalette={'white'} variant={'outline'} size={'lg'} border={'1px solid #4a4a4a'} color={'#FFF'} onClick={() => feelingFreedom()}>I'm feeling free</Button>
|
|
</Flex>
|
|
</Container>
|
|
</ChakraProvider>
|
|
);
|
|
}
|