[ckan catalog][m]: new hero element in the home page.
This commit is contained in:
anuveyatsu
parent
65e5a0b3bf
commit
d32e11ae6a
@ -11,57 +11,18 @@ exports[`📸 of Form component with empty 1`] = `
|
||||
<input
|
||||
aria-label="Search"
|
||||
class="bg-white focus:outline-none focus:shadow-outline border border-gray-300 w-1/2 rounded-lg py-2 px-4 block appearance-none leading-normal"
|
||||
name="q"
|
||||
name="search#q"
|
||||
placeholder="Search"
|
||||
type="text"
|
||||
value=""
|
||||
/>
|
||||
<button
|
||||
class="inline-block text-sm px-4 py-3 mx-3 leading-none border rounded text-white bg-black border-black lg:mt-0"
|
||||
type="button"
|
||||
>
|
||||
Search
|
||||
</button>
|
||||
</div>
|
||||
<div
|
||||
class="inline-block my-6 float-right"
|
||||
>
|
||||
<label
|
||||
for="field-order-by"
|
||||
>
|
||||
Order by:
|
||||
</label>
|
||||
<select
|
||||
class="bg-white"
|
||||
id="field-order-by"
|
||||
name="sort"
|
||||
>
|
||||
<option
|
||||
value="score:desc"
|
||||
>
|
||||
Relevance
|
||||
</option>
|
||||
<option
|
||||
value="title_string:asc"
|
||||
>
|
||||
Name Ascending
|
||||
</option>
|
||||
<option
|
||||
value="title_string:desc"
|
||||
>
|
||||
Name Descending
|
||||
</option>
|
||||
<option
|
||||
value="metadata_modified:desc"
|
||||
>
|
||||
Last Modified
|
||||
</option>
|
||||
<option
|
||||
value="views_recent:desc"
|
||||
>
|
||||
Popular
|
||||
</option>
|
||||
</select>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
`;
|
||||
@ -77,57 +38,18 @@ exports[`📸 of Form component with query 1`] = `
|
||||
<input
|
||||
aria-label="Search"
|
||||
class="bg-white focus:outline-none focus:shadow-outline border border-gray-300 w-1/2 rounded-lg py-2 px-4 block appearance-none leading-normal"
|
||||
name="q"
|
||||
name="search#q"
|
||||
placeholder="Search"
|
||||
type="text"
|
||||
value=""
|
||||
/>
|
||||
<button
|
||||
class="inline-block text-sm px-4 py-3 mx-3 leading-none border rounded text-white bg-black border-black lg:mt-0"
|
||||
type="button"
|
||||
>
|
||||
Search
|
||||
</button>
|
||||
</div>
|
||||
<div
|
||||
class="inline-block my-6 float-right"
|
||||
>
|
||||
<label
|
||||
for="field-order-by"
|
||||
>
|
||||
Order by:
|
||||
</label>
|
||||
<select
|
||||
class="bg-white"
|
||||
id="field-order-by"
|
||||
name="sort"
|
||||
>
|
||||
<option
|
||||
value="score:desc"
|
||||
>
|
||||
Relevance
|
||||
</option>
|
||||
<option
|
||||
value="title_string:asc"
|
||||
>
|
||||
Name Ascending
|
||||
</option>
|
||||
<option
|
||||
value="title_string:desc"
|
||||
>
|
||||
Name Descending
|
||||
</option>
|
||||
<option
|
||||
value="metadata_modified:desc"
|
||||
>
|
||||
Last Modified
|
||||
</option>
|
||||
<option
|
||||
value="views_recent:desc"
|
||||
>
|
||||
Popular
|
||||
</option>
|
||||
</select>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
`;
|
||||
|
||||
7
examples/catalog/components/home/Hero.tsx
Normal file
7
examples/catalog/components/home/Hero.tsx
Normal file
@ -0,0 +1,7 @@
|
||||
import Template from './HeroTemplate';
|
||||
|
||||
const Hero: React.FC = () => {
|
||||
return <Template />;
|
||||
};
|
||||
|
||||
export default Hero;
|
||||
130
examples/catalog/components/home/HeroTemplate.tsx
Normal file
130
examples/catalog/components/home/HeroTemplate.tsx
Normal file
@ -0,0 +1,130 @@
|
||||
import useTranslation from 'next-translate/useTranslation';
|
||||
import SearchForm from '../search/Form';
|
||||
|
||||
export default function Example() {
|
||||
const { t } = useTranslation();
|
||||
|
||||
return (
|
||||
<div className="relative bg-white overflow-hidden">
|
||||
<div
|
||||
className="hidden lg:block lg:absolute lg:inset-0"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<svg
|
||||
className="absolute top-0 left-1/2 transform translate-x-64 -translate-y-8"
|
||||
width={640}
|
||||
height={784}
|
||||
fill="none"
|
||||
viewBox="0 0 640 784"
|
||||
>
|
||||
<defs>
|
||||
<pattern
|
||||
id="9ebea6f4-a1f5-4d96-8c4e-4c2abf658047"
|
||||
x={118}
|
||||
y={0}
|
||||
width={20}
|
||||
height={20}
|
||||
patternUnits="userSpaceOnUse"
|
||||
>
|
||||
<rect
|
||||
x={0}
|
||||
y={0}
|
||||
width={4}
|
||||
height={4}
|
||||
className="text-gray-200"
|
||||
fill="currentColor"
|
||||
/>
|
||||
</pattern>
|
||||
</defs>
|
||||
<rect
|
||||
y={72}
|
||||
width={640}
|
||||
height={640}
|
||||
className="text-gray-50"
|
||||
fill="currentColor"
|
||||
/>
|
||||
<rect
|
||||
x={118}
|
||||
width={404}
|
||||
height={784}
|
||||
fill="url(#9ebea6f4-a1f5-4d96-8c4e-4c2abf658047)"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
<div className="relative pt-6 pb-16 sm:pb-24 lg:pb-32">
|
||||
<main className="mt-16 mx-auto max-w-7xl px-4 sm:mt-24 sm:px-6 lg:mt-32">
|
||||
<div className="lg:grid lg:grid-cols-12 lg:gap-8">
|
||||
<div className="sm:text-center md:max-w-2xl md:mx-auto lg:col-span-6 lg:text-left">
|
||||
<h1>
|
||||
<span className="block text-sm font-semibold uppercase tracking-wide text-gray-500 sm:text-base lg:text-sm xl:text-base">
|
||||
Quality Data ready to Integrate
|
||||
</span>
|
||||
<span className="mt-1 block text-4xl tracking-tight font-extrabold sm:text-5xl xl:text-6xl">
|
||||
<span className="block text-gray-900">Find and Share</span>
|
||||
<span className="block text-indigo-600">Quality Data</span>
|
||||
</span>
|
||||
</h1>
|
||||
<p className="mt-3 text-base text-gray-500 sm:mt-5 sm:text-xl lg:text-lg xl:text-xl">
|
||||
{t(`common:description`)}
|
||||
</p>
|
||||
<div className="mt-8 sm:max-w-lg sm:mx-auto sm:text-center lg:text-left lg:mx-0">
|
||||
<SearchForm />
|
||||
</div>
|
||||
</div>
|
||||
<div className="mt-12 relative sm:max-w-lg sm:mx-auto lg:mt-0 lg:max-w-none lg:mx-0 lg:col-span-6 lg:flex lg:items-center">
|
||||
<svg
|
||||
className="absolute top-0 left-1/2 transform -translate-x-1/2 -translate-y-8 scale-75 origin-top sm:scale-100 lg:hidden"
|
||||
width={640}
|
||||
height={784}
|
||||
fill="none"
|
||||
viewBox="0 0 640 784"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<defs>
|
||||
<pattern
|
||||
id="4f4f415c-a0e9-44c2-9601-6ded5a34a13e"
|
||||
x={118}
|
||||
y={0}
|
||||
width={20}
|
||||
height={20}
|
||||
patternUnits="userSpaceOnUse"
|
||||
>
|
||||
<rect
|
||||
x={0}
|
||||
y={0}
|
||||
width={4}
|
||||
height={4}
|
||||
className="text-gray-200"
|
||||
fill="currentColor"
|
||||
/>
|
||||
</pattern>
|
||||
</defs>
|
||||
<rect
|
||||
y={72}
|
||||
width={640}
|
||||
height={640}
|
||||
className="text-gray-50"
|
||||
fill="currentColor"
|
||||
/>
|
||||
<rect
|
||||
x={118}
|
||||
width={404}
|
||||
height={784}
|
||||
fill="url(#4f4f415c-a0e9-44c2-9601-6ded5a34a13e)"
|
||||
/>
|
||||
</svg>
|
||||
<div className="relative mx-auto w-full rounded-lg shadow-lg lg:max-w-md">
|
||||
<img
|
||||
className="w-full"
|
||||
src="/images/banner.svg"
|
||||
alt="banner_img"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@ -4,7 +4,7 @@ describe('Test Home Page', () => {
|
||||
});
|
||||
|
||||
it('renders the hero title', () => {
|
||||
cy.contains('Find, Share and Publish Quality Data with Datahub');
|
||||
cy.contains('Find and Share');
|
||||
});
|
||||
|
||||
it('checks that a search form exists', () => {
|
||||
|
||||
@ -2,11 +2,11 @@ import { GetServerSideProps } from 'next';
|
||||
import Head from 'next/head';
|
||||
import { initializeApollo } from '../lib/apolloClient';
|
||||
import RecentDataset from '../components/home/Recent';
|
||||
import SearchForm from '../components/search/Form';
|
||||
import { SEARCH_QUERY } from '../graphql/queries';
|
||||
import { loadNamespaces } from './_app';
|
||||
import useTranslation from 'next-translate/useTranslation';
|
||||
import NavBar from '../components/home/Nav';
|
||||
import Hero from '../components/home/Hero';
|
||||
|
||||
const Home: React.FC<{ locale: any; locales: any }> = ({
|
||||
locale,
|
||||
@ -21,21 +21,7 @@ const Home: React.FC<{ locale: any; locales: any }> = ({
|
||||
<link rel="icon" href="/favicon.ico" />
|
||||
</Head>
|
||||
<NavBar />
|
||||
<section className="flex justify-center items-center flex-col mt-8 mx-4 lg:flex-row">
|
||||
<div>
|
||||
<h1 className="text-4xl mb-3 font-thin">
|
||||
Find, Share and Publish <br /> Quality Data with{' '}
|
||||
<span className="text-orange-500">Datahub</span>
|
||||
</h1>
|
||||
<p className="text-md font-light mb-3 w-4/5">
|
||||
{t(`common:description`)}
|
||||
</p>
|
||||
<SearchForm />
|
||||
</div>
|
||||
<div className="mt-4">
|
||||
<img src="/images/banner.svg" className="w-4/5" alt="banner_img" />
|
||||
</div>
|
||||
</section>
|
||||
<Hero />
|
||||
<RecentDataset />
|
||||
</div>
|
||||
</>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user